テーマのお気に入りアイコンクライアント拡張の使用
Liferay DXP 7.4+
テーマのお気に入りアイコンクライアント拡張を使えば、選択したページでテーマのお気に入りアイコンを上書きすることができます。 クライアント拡張機能をビルドしてデプロイするには、 サンプル ワークスペース から開始します。
前提条件
クライアント拡張の開発を開始するには、
-
サポートされているバージョンの Javaをインストールします。
-
サンプルワークスペースをダウンロードし、解凍します。
curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content\?r\=liferay-public-releases\&g\=com.liferay.workspace\&a\=com.liferay.sample.workspace\&\v\=LATEST\&p\=zipunzip com.liferay.sample.workspace-latest.zip
これで、最初のテーマのお気に入りアイコンクライアント拡張をデプロイするためのツールがそろいました。
クライアント拡張の検討
テーマのお気に入りアイコンクライアント拡張は、サンプルワークスペースの client-extensions/sample-global-css/ フォルダにあります。 client-extension.yaml ファイルに定義されています。
liferay-sample-theme-favicon:
name: Liferay Sample Theme Favicon
type: themeFavicon
url: favicon.ico
このクライアント拡張は、IDが liferay-sample-theme-faviconで、タイプや追加するお気に入りアイコンファイルなど、テーマのお気に入りアイコンクライアント拡張の主要な設定項目が含まれています。 利用可能なプロパティの詳細については、 テーマのファビコン YAML 構成リファレンス を参照してください。
また、以下のassemble YAMLブロックも含まれています。
assemble:
- from: assets
into: static
これは、 assets/ フォルダ内のすべてを、ビルドされたクライアント拡張.zip ファイルに静的リソースとして含めることを指定します。 テーマのお気に入りアイコンクライアント拡張のお気に入りアイコンファイルは、Liferayの静的リソースとして使用されます。
Liferayにクライアント拡張をデプロイする
新しいLiferay インスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132
http://localhost:8080でLiferayにサインインします。 メールアドレス test@liferay.com とパスワード testを使用してください。 プロンプトが表示されたら、パスワードを learnに変更します。
Liferay が起動したら、サンプル ワークスペースのクライアント拡張機能のフォルダーから次のコマンドを実行します。
../../gradlew clean deploy -Ddeploy.docker.container.id=$(docker ps -lq)
これにより、クライアント拡張が構築され、Liferayのdeploy/フォルダにzipをデプロイします。
クライアント拡張機能をLiferay SaaSにデプロイするには、Liferay Cloud コマンドラインツール を使用して lcp deployを実行します。
ワークスペース内のすべてのクライアント拡張機能を同時にデプロイするには、 client-extensions/ フォルダーからコマンドを実行します。
Liferayインスタンスのコンソールでデプロイメントを確認します。
STARTED liferay-sample-theme-favicon_1.0.0
ページでクライアント拡張を使用する
デプロイされたクライアント拡張を使用するために、Liferayのページを設定します。
-
ページ上部の 編集 (
) をクリックします。 -
サイドバーで、「ページ デザイン オプション」メニュー (
) に移動し、メニューの上部にある 構成 (
) をクリックします。 -
ファビコン セクションで、 外観 タブの ファビコンの変更をクリックします。
-
[クライアント拡張]をクリックし、新しくデプロイしたお気に入りアイコン、[サンプルテーマのお気に入りアイコン]を選択します。
![[サンプルテーマのお気に入りアイコン]クライアント拡張を選択し、[保存]をクリックします。](https://resources.learn.liferay.com/images/dxp/latest/en/development/customizing-liferays-look-and-feel/using-a-theme-favicon-client-extension/images/01.gif)
-
下にスクロールして、 「保存」をクリックします。
-
ページに戻ります。 新しいお気に入りアイコンがブラウザのタブに表示されます。
![]()
今後の流れ
Liferayでテーマのお気に入りアイコンクライアント拡張を使用できるようになりました。 次は他のクライアント拡張タイプのデプロイメントを試してみましょう。