Documentation

テーマコントリビューターを介した独立したUIリソースのバンドル

テーマコントリビューターは、CSSおよびJavaScriptリソースを含み、それらを各ページに適用するモジュールです。 これらは特定のテーマから独立しており、テーマの特定のスタイルをオーバーライドしたり、互いにオーバーライドするように設定できます ページに個別のUIリソースを含め、それらを特定のテーマに含める場合は、代わりにテーマレットを使用してください。

Liferay Portal/DXPの多くのメニューは、 サイトメニュー などのテーマコントリビューターとしてパッケージ化されています。

サイトメニューは、テーマコントリビューターモジュールとして実装されています。

サイトメニューなどの標準のUIコンポーネントを編集またはスタイル設定する場合は、テーマコントリビューターで変更をデプロイする必要があります。 テーマコントリビューターを使用して、新しいUIコンポーネントまたはスタイルを追加することもできます。

シンプルなテーマコントリビューターをデプロイする

サンプルのテーマコントリビューターをデプロイすることから始めます。

  1. サンプルをダウンロードして解凍します。

    curl https://learn.liferay.com/dxp/latest/en/site-building/site-appearance/themes/theme-development/bundling-resources/bundling-independent-ui-resources-via-theme-contributors/liferay-w9m6.zip -O
    
    unzip liferay-w9m6.zip
    
  2. Liferay Dockerコンテナを起動します。

    docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u29
    
  3. サンプルをビルドしてデプロイします。

    cd liferay-w9m6
    
    ./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
    

    注釈

    このコマンドは、モジュールJARをDockerコンテナの/opt/liferay/osgi/modulesにコピーするのと同じです。

  4. Dockerコンテナコンソールでデプロイを確認します。

    STARTED com.acme.w9m6.web_1.0.0
    
  5. テーマコントリビューターがサイトの背景色を変更したことを確認します。 ブラウザを開いてhttps://localhost:8080にアクセスし、Liferayホームページの背景が青色になっていることを確認します。

サンプルのテーマコントリビューターでは、ページの背景が青に変わります。

新しいテーマコントリビューターの構築とデプロイが完了しました。

次に、カスタムCSSの変更でテーマコントリビューターがどのように見えるかを学習します。

サンプルのテーマコントリビューターを調べる

テーマコントリビューターはOSGiモジュールであり、そのbnd.bndファイルにプロパティが必要です。 次に、カスタマイズが resourcesフォルダに追加されます。 サンプルのテーマコントリビューターは、custom.cssファイルを使用して各ページの背景色を変更します。

テーマコントリビューターのプロパティを調べる

テーマコントリビューターのプロジェクトには、それを構成するために必要なプロパティがbnd.bndファイルに追加されています。

Bundle-Name: Acme W9M6 Web
Bundle-SymbolicName: com.acme.w9m6.web
Bundle-Version: 1.0.0
Liferay-Theme-Contributor-Type: CSS
Liferay-Theme-Contributor-Weight: 1
Web-ContextPath: /w9m6-web

テーマコントリビューターのbnd.bndファイルが機能するには、次のプロパティが必要です。

Web-ContextPath:テーマコントリビューターのリソースのコンテキストを設定します。 サンプルモジュールでは、コンテキストパスはw9m6-webです。

Liferay-Theme-Contributor-Type:モジュールがテーマコントリビューターを追加することを示します。 このプロパティは任意の値にすることができます。 サンプルモジュールは、値CSSを使用します。

Liferay-Theme-Contributor-Weight:他のコントリビューターと比較した、テーマコントリビューターのスタイルの重みを設定します。 値が小さいほど、他のコントリビューターのスタイルを上書きするための優先度が高くなります。 サンプルモジュールは、スタイルがテーマコントリビューターの中で最も優先度が高いことを保証する重み1を使用しています。

bnd.bndファイルに必要なプロパティがあれば、あとはモジュールに必要なカスタマイズを行うだけです。

スタイルのカスタマイズを調べる

必要なCSSまたはJavaScriptファイルは、モジュール内のサブフォルダに追加する必要があります。 CSSファイルはsrc/main/resources/META-INF/resources/css/サブフォルダに属し、JavaScriptファイルはsrc/main/resources/META-INF/resources/js/サブフォルダに属します。

サンプルのテーマコントリビューターでは、単純なCSSスタイルの変更を使用して、各ページの背景を青色にします。 これは、src/main/resources/META-INF/resources/にある custom.css ファイルを使用して行われます。

body, #wrapper {
    background: blue;
}

必要なCSSまたはJavaScriptファイルをすべて正しいサブフォルダに追加した後、モジュールをデプロイすると、それらが各ページに適用されます。

背景色を変更する

次に、テーマコントリビューターがページにどのように影響するかを確認するために、背景色を変更してみましょう。

  1. プロジェクトでsrc/main/resources/META-INF/resources/css/custom.cssを開きます。

  2. backgroundの色プロパティをorangeなどの別の色に変更します。

    body, #wrapper {
        background: orange;
    }
    
  3. サンプルをビルドして、実行中のDockerコンテナに再度デプロイします。

    ./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
    
  4. Dockerコンテナコンソールでデプロイを確認します。

    STARTED com.acme.w9m6.web_1.0.0
    
  5. テーマコントリビューターがサイトの背景を新しい色に変更したことを確認します。 ブラウザでhttps://localhost:8080を開き、変更を確認します。

CSSファイルの背景色を変更すると、デプロイ時にすべてのページに影響します。

まとめ

CSSスタイルを変更したテーマコントリビューターを作成しました。 スタイルブックを使用して、サイトのページに特定のスタイル変更を適用することもできます。