カスタムテーマの適用

さまざまな フロントエンド クライアント拡張機能 を使用して、サイトの外観と操作性をカスタマイズできます。 具体的には、 テーマ CSS タイプ クライアント拡張機能は、 カスタム テーマの構築の代替として使用できます。

liferay-ticket-theme-css クライアント拡張機能をデプロイします。

1. 次のコマンドを実行します。

   ./gradlew :client-extensions:liferay-ticket-theme-css:deploy
   

2. Liferayで、 製品メニュー （）を選択し、 サイトビルダー → ページに移動します。

3. グローバル メニューの右上にある オプション () をクリックし、 構成をクリックします。

4. テーマの CSS クライアント拡張セクションまで下にスクロールし、 追加 () をクリックします。

5. デプロイされたチケット テーマ CSS を選択します。

   

6. 一番下までスクロールして、 保存をクリックします。 製品メニューで、 ホームをクリックします。 カスタムテーマが適用されました。

カスタムテーマのCSSコードを調べる

client-extension.yaml ファイルの assemble ブロック セクションは次のようになります。

assemble:
    - from: build/buildTheme/img
      into: static/img

この liferay-ticket-theme-css は テーマ CSS タイプのクライアント拡張機能です。 次のように定義されます。

liferay-ticket-theme-css:
    clayURL: css/clay.css
    mainURL: css/main.css
    name: Tickets Theme CSS
    type: themeCSS

各プロパティの説明については、 テーマ CSS YAML 構成リファレンス を参照してください。

テーマのカスタマイズは、 /src/css フォルダー内の 2 つのファイルに表示されます。

_clay_variables.scss ファイルは、上書きされる CSS clay 変数を提供します。

_custom.scss ファイルは、CSS のカスタマイズを提供します。

変数とカスタマイズの詳細については、 Clay CSS ドキュメントを参照してください。 また、別のクライアント拡張の例については、テーマ CSS クライアント拡張 を使用する を参照してください。

次へ: カスタム チケット アプリケーションのデプロイ。

関連概念

• テーマの概要
• フロントエンドのクライアント拡張