ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

テーマレットを介したリソースのバンドルとテーマへのインストール

テーマレットは、複数のテーマで再利用できる小さなモジュール式のコードです。テーマ自体とは異なり、テーマレットには変更を加えたファイルのみを含めることができます。テーマレットを使用して、テーマの一部として通常定義するあらゆる種類のスタイルや機能を変更できます。

前提条件

テーマレットは、Liferay テーマジェネレーターを使用して作成されます ( テーマを作成するなど)。まだインストールしていない場合は、次のコマンドを使用してインストールしてください。

npm install -g generator-liferay-theme@10.x.x

次のコマンドを使用して、YeomanとGulpの依存関係をインストールします。

npm install -g yo gulp

テーマレットの作成

Liferayテーマジェネレーターを使用してテーマレットを作成します。

テーマレットを作成するファイルの場所から次のコマンドを実行します。
```
yo liferay-theme:themelet
```
プロンプトでテーマレットの名前を入力します。デフォルトの「My Liferay Themelet」を使用するには、Enterキーを押します。
```
? What would you like to call your themelet? Example
```
プロンプトでテーマレットの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

このコマンドを実行すると、テーマレットがグローバルにインストールされ、テーマを拡張するときに選択できるようになります。

テーマレットをテーマに追加する

テーマレットをグローバルにインストールしたら、それを任意のテーマに追加できます。

注

テーマレットを追加するテーマがない場合は、テーマの作成手順については「テーマの作成」を参照してください。

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