テーマコントリビューターを介した独立したUIリソースのバンドル¶
テーマコントリビューターは、CSSおよびJavaScriptリソースを含み、それらを各ページに適用するモジュールです。 これらは特定のテーマから独立しており、テーマの特定のスタイルをオーバーライドしたり、互いにオーバーライドするように設定できます ページに個別のUIリソースを含め、それらを特定のテーマに含める場合は、代わりにテーマレットを使用してください。
Liferay Portal/DXPの多くのメニューは、 サイトメニュー などのテーマコントリビューターとしてパッケージ化されています。
サイトメニューなどの標準のUIコンポーネントを編集またはスタイル設定する場合は、テーマコントリビューターで変更をデプロイする必要があります。 テーマコントリビューターを使用して、新しいUIコンポーネントまたはスタイルを追加することもできます。
シンプルなテーマコントリビューターをデプロイする¶
サンプルのテーマコントリビューターをデプロイすることから始めます。
サンプルをダウンロードして解凍します。
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
Liferay Dockerコンテナを起動します。
docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u29サンプルをビルドしてデプロイします。
cd liferay-w9m6./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
注釈
このコマンドは、モジュールJARをDockerコンテナの
/opt/liferay/osgi/modulesにコピーするのと同じです。Dockerコンテナコンソールでデプロイを確認します。
STARTED com.acme.w9m6.web_1.0.0
テーマコントリビューターがサイトの背景色を変更したことを確認します。 ブラウザを開いて
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ファイルをすべて正しいサブフォルダに追加した後、モジュールをデプロイすると、それらが各ページに適用されます。
背景色を変更する¶
次に、テーマコントリビューターがページにどのように影響するかを確認するために、背景色を変更してみましょう。
プロジェクトで
src/main/resources/META-INF/resources/css/custom.cssを開きます。backgroundの色プロパティをorangeなどの別の色に変更します。body, #wrapper { background: orange; }
サンプルをビルドして、実行中のDockerコンテナに再度デプロイします。
./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
Dockerコンテナコンソールでデプロイを確認します。
STARTED com.acme.w9m6.web_1.0.0
テーマコントリビューターがサイトの背景を新しい色に変更したことを確認します。 ブラウザで
https://localhost:8080を開き、変更を確認します。
