テーマCSSクライアントエクステンションの使用
Liferay 7.4 U45+/GA45+で利用可能
テーマCSSクライアント拡張機能を使用すると、現在のテーマのCSSファイル（main.css および clay.css）を上書きして、ページの外観を変更することができます。 サンプルワークスペース のクライアントエクステンションから始めます。
前提条件
Java（JDK8またはJDK11）をインストールします。
サンプルワークスペースをダウンロードし、解凍してください：
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
これで、最初のテーマCSSクライアント拡張を展開するためのツールを手に入れたことになります。
テーマのスタイルがどのようにオーバーライドされるかを検証する
テーマCSSクライアント拡張は、サンプルワークスペースの client-extensions/liferay-sample-theme-css-1/ フォルダにあります。 client-extension.yaml ファイルで定義されています：
liferay-sample-theme-css-1:
clayURL: css/clay.css
mainURL: css/main.css
name: Liferay Sample Theme CSS 1
type: themeCSS
このクライアントエクステンションのIDは liferay-sample-theme-css-1 で、2つのCSSリソースファイルの種類やパスなど、テーマCSSクライアントエクステンションの主要な構成が含まれています。 利用可能なプロパティの詳細については、「 Theme CSS YAML Configuration Reference」 を参照してください。
また、 assemble YAMLブロックも含まれています：
assemble:
- from: build/buildTheme/img
into: static/img
これは、テーマ構築後、 build/buildTheme/img/ フォルダ内のすべてを、構築したクライアント拡張機能 .zip ファイルに静的リソースとして含めるように指定します。 テーマCSSクライアント拡張に含まれる画像ファイルは、Liferayの静的リソースとして使用されます。
package.json ファイルには、以下のコードが含まれています：
{
"dependencies": {
"sassy-inputs": "1.0.6"
},
"liferayDesignPack": {
"baseTheme": "styled"
},
"main": "package.json",
"name": "@liferay/liferay-sample-theme-css-1",
"version": "1.0.0"
}
dependencies セクションには、 sassy-inputs ライブラリが含まれています。 これは例では使用しませんが、テーマCSSクライアント拡張でnpmモジュールをインポートして使用する方法を示しています。 liferayDesignPack セクションでは、スタイルに使用するベーステーマを宣言しています。 styled テーマを使用することで、ページ、フラグメント、ウィジェットに指定された既存のスタイルに影響を与えないようにしています。 その他のフィールド main, name and version は、必要なメタデータを提供します。
ベーステーマを styled または unstyled に設定することができます。 unstyledテーマは基本的なスタイルのセットを含み、styledテーマはunstyledテーマのすべてのスタイルと追加のスタイリングを含む。 Liferay のすべてのテーマは unstyled または styled テーマをベースとしています。
テーマCSSクライアント拡張を別のテーマを使用しているページに適用すると、クライアント拡張のスタイリングは、テーマのスタイリングを置き換える。 元のテーマでカスタムスタイルを使用している場合は、それらの要素を _custom.scss ファイルに追加して、クライアント拡張機能を適用したときにそれらの要素が影響を受けないようにします。
すでにテーマCSSクライアントエクステンションを使用しているページのテーマを変更した場合、クライアントエクステンションは削除されます。
src/css/_custom.scss ファイルにこのSCSSが含まれています：
@import 'sassy-inputs/sass/main';
header {
background-image: url(../img/header_bg.jpg);
}
1行目は package.jsonで追加した npm モジュールをインポートしています。 CSSでは、ヘッダーの背景に画像を使用するように変更します。
あなたのコードは _custom.scss の中にあり、client-extension.yaml ファイルは clay.css と main.css を指しています。 これは、テーマCSSクライアント拡張機能が完全なClay CSSビルドプロセスを実行し、コンパイルされた clay.css と main.css ファイルに _custom.scss からコンパイルされたCSSコードも含まれるからです。
テーマのCSSを修正する
すべての画像にホバー効果を持たせるためのCSSを追加する。 _custom.scss ファイルを開き、 img:hover の宣言を追加する：
img:hover{
border: 2px solid red;
border-radius: 10%;
}
これは、画像を 2px 赤のボーダーとホバー時の丸みを帯びたエッジを持つものとして定義します。
ここで、クライアントエクステンションをデプロイします。
テーマCSSクライアントエクステンションのデプロイメント
新しいLiferay インスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.75-ga75。
http://localhost:8080でLiferayへのサインインします。 メールアドレス[email protected]_とパスワード_test_を使用してください。 プロンプトが表示されたら、パスワードを _learn_に変更します。
Once Liferay starts, run this command from the client extension’s folder in the sample workspace:
../../gradlew clean deploy -Ddeploy.docker.container.id=$(docker ps -lq)
これはクライアント拡張をビルドし、Liferayの deploy/ フォルダにzipをデプロイします。
クライアント拡張を Liferay Experience Cloud にデプロイするには、Liferay Cloud Command-Line Tool を使って lcp deploy を実行します。
ワークスペース内のすべてのクライアント拡張機能を同時に配置するには、client-extensions/フォルダからコマンドを実行します。
Liferayインスタンスのコンソールでデプロイメントを確認します。
STARTED liferay-sample-theme-css-1_1.0.0
ページのテーマをオーバーライドする
新しいテーマのCSSを使用するようにページを設定します：
ページで、上部にある 編集(
) をクリックします。サイドバーで、 ページデザインオプション メニュー (
) に移動し、メニュー上部の 設定(
) をクリックします。Look and Feel」タブの「Theme CSS Client Extension」セクションで、「Add(
)」をクリックします。新しくデプロイされたクライアントエクステンションを選択します。 Liferay Sample Theme CSS 1 .
下にスクロールして、 保存 をクリックします。
ページエディターでは、ヘッダーの背景が画像になり、ホバーオーバーしたリンクごとに背景色と文字色が変わっています。 編集モード以外のページで変更を反映させるには、ページを公開する必要があります。
次のステップ
LiferayでテーマCSSクライアントエクステンションを使用することに成功しました。 次は他のクライアント拡張タイプのデプロイメントを試してみましょう。