環境の設定とテーマの作成
テーマの作成は、テーマ開発の最初のステップです。 独自のテーマを作成したら、それをLiferay DXPインスタンスにデプロイし、 さまざまなサイトのカスタマイズに使用できます。
Liferayテーマジェネレーターを使用する
Liferay テーマツールキットは、Liferay DXP 2024.Q4/Portal GA129 の時点で 廃止 されており、将来のリリースで削除される予定です。 代わりに、 クライアント拡張機能 を使用してテーマを作成するか、 サイト初期化子を使用します。
テーマは、Liferayテーマジェネレーターを使用して作成します。 Liferay DXP 7.3は、テーマジェネレーターのバージョン10.xxを使用しています。
古いバージョンのLiferayテーマジェネレーターを使用して、古いバージョンのLiferay DXPのテーマを生成できます。 DXP 7.0または7.1のテーマを作成するには、テーマジェネレーターのバージョン8.xxをインストールしてください。
インストール
Liferayテーマジェネレータを使用してテーマを開発するには、ノードとNPMの両方が必要です。 ノード互換性マトリックス をチェックして、Liferay バージョンに対して正しいバージョンがインストールされていることを確認してください。
まだインストールしていない場合は、次のコマンドを使用してLiferayテーマジェネレーターをインストールします。
npm install -g generator-liferay-theme@10.x.x
次のコマンドを使用して、YeomanとGulpの依存関係をインストールします。
npm install -g yo gulp
Liferayテーマジェネレーターを実行する
次の手順でLiferayテーマジェネレーターを実行します。
-
Yeomanを使用してLiferayテーマジェネレーターを実行します。
yo liferay-theme重要このコマンドにベースとなるテーマ名を追加することで、新しいテーマのベースとして使用することができます。 たとえば、
yo liferay-theme:classicを実行すると、新しいテーマは DXP の Classic テーマに基づいて作成されます。 -
プロンプトでテーマの名前を入力します。 デフォルトの"My Liferay Theme"を使用するには、Enterキーを押します。
? What would you like to call your theme? (My Liferay Theme) -
プロンプトでテーマのIDを入力します。 テーマが生成されると、IDによってテーマが組み込まれているフォルダの名前が決まります。 Enterキーを押して、名前に基づいたデフォルトIDを使用することもできます。
? What id would you like to give to your theme? (my-liferay-theme) -
矢印キーを使用して、プロンプトでテーマを作成するLiferay DXPのバージョンを選択します。 7.2または7.3のテーマは、Liferayテーマジェネレーターのバージョン10.xxを使用して生成できます。
? Which version of Liferay is this theme for? (Use arrow keys) ❯ 7.3 7.2 -
プロンプトで、テーマに使用できるフォントとしてFont Awesomeを追加するかどうかを答えます。
-
テーマが生成されたら、矢印キーを使って、ローカルアプリサーバー、Dockerコンテナ、その他のURLでデプロイするという、テーマに適した配布タイプを選択して、プロセスを完了します。
? Select your deployment strategy (Use arrow keys) ❯ Local App Server Docker Container Other -
使用しているデプロイメントのタイプに応じて、プロンプトでアプリサーバーの場所を指定します。
アプリサーバーのディレクトリ、Dockerコンテナ名、またはホストURLを指定して、アプリサーバーを見つけることができます。
テーマが生成され、選択した ID の名前のフォルダーに配置されます。 これで、テーマのベースフォルダからgulp deployを実行することで、テーマをビルドしてDXPインスタンスにデプロイできます。
Dart SASSの無効化
テーマジェネレータで作成したテーマに対してgulp buildまたはgulp deployを実行すると、以下のようなエラーが発生する場合があります。
Error: compound selectors may no longer be extended.
このエラーは、テーマ ジェネレーターが Liferay 7.3 以降で Dart SASS を使用しているために発生しますが、一部の環境では、依然として非推奨の LibSassで使用される機能に依存しています。
このエラーを回避するには、テーマでDart SASSを無効にします。 これらの dartSass と node-sass のプロパティを、テーマの package.json に追加します（既存のプロパティを削除しないこと）。
"liferaytheme": {
"sassOptions": {
"dartSass": false
},
"devDependencies": {
"node-sass": "7.0.1"
}
}
npm install を実行し、LibSass をインストールします。 次にgulpでビルドすると、Dart SASSによるエラーは消えます。