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

既存のテーマからのファイルのバンドルとコピー

gulp の kickstart タスクを使用すると、以前に作成したテーマのファイルを任意のテーマにコピーできます。この機能は、既存のテーマに基づいてテーマを開発する場合に便利です。

プロセスはテーマを拡張する場合とは異なります。 キックスタート タスクは単一の継承方法として機能しますが、テーマの拡張では、拡張されたテーマの src ファイルがビルドごとにベーステーマの上に動的に適用されます。

警告

gulp の kickstart タスクを使用すると、同じ名前のファイルを上書きできます。必要に応じてファイルをバックアップしてください。

テーマの作成とコピー

注

テーマを作成するための環境を設定していない場合は、環境の設定とテーマの作成を参照してください。

複数のテーマを作成し、あるテーマから別のテーマにファイルをコピーするには、次の手順に従います。

Liferay テーマジェネレーターを実行して 2 つのテーマを作成します。これらに Liferay テーマ 1 および Liferay テーマ 2というラベルを付けます。
Liferay テーマ 1 のルートフォルダに移動します。
```
cd liferay-theme1-theme/
```

src/css/_custom.scss を開き、コードスニペットを追加します。

body, #wrapper {
   background: orange;
}

a {
   transition: color 2s ease-in-out, font-size 2s ease-in-out;
}

a:hover {
   color: yellow;
   font-size: 1.2rem;
}

npm link を実行して Liferay Theme 1 をグローバルにインストールし、他のテーマ内で使用できるようにします。
Liferay Theme 2 のフォルダに移動し、gulp の kickstart タスクを実行します。
```
cd liferay-theme2-theme/
```
```
gulp kickstart
```
グローバルにインストールされたテーマ、または npm レジストリに公開されたテーマからコピーすることを選択できます。この例では、最初のオプションを選択します。
```
? Where would you like to search? (Use arrow keys)
❯ Search globally installed npm modules
Search npm registry (published modules)
```
npm モジュールリストで Liferay テーマ 1 を選択します。
```
? Select a theme (Use arrow keys)
❯ liferay-theme1-theme
```
gulp がテーマのファイルのコピーを完了すると、確認メッセージが表示されます。
```
[10:49:43] Finished 'kickstart' after 4.29 s
```
src/css/_custom.scss を開き、Liferay Theme 1 のファイルと類似しているかどうかを確認します。
gulp deploy を実行して、Liferay Theme 2 をビルドしてデプロイします。そうすれば、実行中の Liferay Portal インスタンスで新しく設定したテーマを使用できるようになります。

これで、既存のテーマのファイルを設定およびコピーして、既存のテーマに基づいてテーマを開発する方法がわかりました。

既存のテーマからのファイルのバンドルとコピー

テーマの作成とコピー

関連トピック