テーマレットを介したリソースのバンドルとテーマへのインストール¶
テーマレットは、複数のテーマで再利用できる小さなモジュール式のコードです。 テーマ自体とは異なり、テーマレットには変更を加えたファイルのみを含めることができます。 テーマレットを使用して、テーマの一部として通常定義するあらゆる種類のスタイルや機能を変更できます。
前提条件¶
テーマは、Liferayテーマジェネレーターを使用して作成します（テーマの作成など）。 まだインストールしていない場合は、次のコマンドを使用してインストールしてください。
npm install -g [email protected]
次のコマンドを使用して、YeomanとGulpの依存関係をインストールします。
npm install -g yo gulp
テーマレットの作成¶
Liferayテーマジェネレーターを使用してテーマレットを作成します。
テーマレットを作成するファイルの場所から次のコマンドを実行します。
yo liferay-theme:themelet
プロンプトでテーマレットの名前を入力します。 デフォルトの「My Liferay Themelet」を使用するには、Enterキーを押します。
? What would you like to call your themelet? 例
プロンプトでテーマレットのIDを入力します。 テーマレットが生成されると、IDによってテーマレットが組み込まれているフォルダの名前が決まります。 Enterキーを押して、名前に基づいたデフォルトIDを使用することもできます。
矢印キーを使用して、プロンプトでテーマレットを作成するLiferay DXPのバージョンを選択し、Enterキーを押します。
? Which version of Liferay is this themelet for? (Use arrow keys) ❯ 7.3 7.2 Any
テーマレットは、選択したIDに基づいて生成され、フォルダ内に配置されます。 これで、デプロイするテーマに追加できます。
テーマレットをテーマ内で使用できるようにするには、テーマレットのフォルダに移動して、次のコマンドを実行する必要もあります。
npm link
このコマンドを実行すると、テーマレットがグローバルにインストールされ、テーマを拡張するときに選択できるようになります。
テーマレットをテーマに追加する¶
テーマレットをグローバルにインストールしたら、それを任意のテーマに追加できます。
注釈
テーマレットを追加するためのテーマがない場合は、Creating a Themeでテーマを作成する手順を参照してください。
gulp extendコマンドを使用して、テーマレットを任意のテーマに追加します。
テーマのルートフォルダに移動します。
cd my-theme/このフォルダから次のコマンドを実行します。
gulp extend
プロンプトで、矢印キーを使用して
テーマレットを使用して拡張することを選択し、Enterキーを押します。? What kind of theme asset would you like to extend? Base theme ❯ Themelet
プロンプトで、矢印キーを使用して「Search globally installed npm modules」を選択します。
? Where would you like to search for themelets? (Use arrow keys) ❯ Search globally installed npm modules (development purposes only) Search npm registry (published modules) Specify a package URL
矢印キーを使用して、グローバルにインストールされたモジュールのリストからテーマレットを選択します。 リストに表示するには、テーマレット内で
npm linkを実行している必要があります。
テーマレットがテーマにインストールされ、次にgulp deployコマンドを使用してこのテーマをビルドおよびデプロイするときに変更内容が適用されます。