テーマコントリビューターを介した独立したUIリソースのバンドル¶
テーマコントリビューターは、CSSおよびJavaScriptリソースを含み、それらを各ページに適用するモジュールです。 これらは特定のテーマから独立しており、テーマの特定のスタイルをオーバーライドしたり、互いにオーバーライドするように設定できます ページに個別のUIリソースを含め、それらを特定のテーマに含める場合は、代わりにテーマレットを使用してください。
Liferay Portal/DXPの多くのメニューは、 サイトメニュー などのテーマコントリビューターとしてパッケージ化されています。
サイトメニューなどの標準のUIコンポーネントを編集またはスタイル設定する場合は、テーマコントリビューターで変更をデプロイする必要があります。 テーマコントリビューターを使用して、新しいUIコンポーネントまたはスタイルを追加することもできます。
シンプルなテーマコントリビューターをデプロイする¶
新しいLiferay DXPインスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u55。
メールアドレス_test@liferay.com_とパスワード_test_を使用して、http://localhost:8080でLiferayにサインインしてください。 プロンプトが表示されたら、パスワードを _learn_に変更します。
Then, follow these steps to deploy the example theme contributor:
サンプルをダウンロードして解凍します。
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
サンプルをビルドしてデプロイします。
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
A theme contributor's bnd.bnd file must have these properties for it to function:
Web-ContextPath: sets the context for your theme contributor's resources. In the example module, the context path is w9m6-web.
Liferay-Theme-Contributor-Type: indicates that your module adds a theme contributor. このプロパティは任意の値にすることができます。 The example module uses the value CSS.
Liferay-Theme-Contributor-Weight: configures the weight of your theme contributor's styles versus other contributors. 値が小さいほど、他のコントリビューターのスタイルを上書きするための優先度が高くなります。 The example module uses a weight of 1 to guarantee that the style has the highest priority of any theme contributor.
Once the bnd.bnd file has the necessary properties, the module needs only have the desired customizations.
Examine the Style Customizations¶
Any desired CSS or JavaScript files must be added to subfolders within the module. CSS files belong in a src/main/resources/META-INF/resources/css/ subfolder, and JavaScript files belong in a src/main/resources/META-INF/resources/js/ subfolder.
サンプルのテーマコントリビューターでは、単純なCSSスタイルの変更を使用して、各ページの背景を青色にします。 This is done with a custom.css file in src/main/resources/META-INF/resources/:
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を開き、変更を確認します。
まとめ¶
CSSスタイルを変更したテーマコントリビューターを作成しました。 スタイルブックを使用して、サイトのページに特定のスタイル変更を適用することもできます。