テーマ用に再利用可能なコードを作成する
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
テーマは、小さく、拡張可能で、再利用可能なコードです。 テーマは複数のコンポーネントを必要としますが、テーマレットは拡張したいファイルのみを必要とします。 これにより、よりモジュール化されたテーマ設計アプローチが作成され、コラボレーションに役立ち、テーマ内でコードを複製する必要性が減ります。
テーマレットを使用すると、開発者は他の開発者とテーマ間でコードスニペットを簡単に共有できます。 テーマレットは、CSSとJavaScriptで構成できます。 テーマ は、 テーマテンプレートをサポートしていません。
テーマは非常に柔軟であるため、さまざまな用途が考えられます。 テーマレットを作成して、管理ツールの外観を変更したり、レスポンシブ埋め込みビデオにカスタムJavaScriptコンポーネントを使用するテーマレットなどを作成できます。 たとえば、 Liferay Product Menu Animation Themelet 単に製品メニューのアニメーションを変更します。
作成するテーマごとに手動でコーディングする必要があるものがある場合、それはテーマレットの良い候補です。
このチュートリアルでは、次の方法を示します。
-
テーマレットを作成してテーマを拡張します
-
テーマをインストールする
themeletを作成するには、拡張するためのテーマとLiferayのテーマジェネレータとの依存関係がインストールを必要とする、などで説明した の作成テーマ チュートリアル。
テーマの作成
テーマレットを作成するには、次の手順に従います。
-
コマンドラインを開き、テーマレットを作成するフォルダーに移動します。
-
yo liferay-theme：themeletを実行し、プロンプトに従ってテーマレットを生成します。
-
生成されたテーマレットには、構成情報を含む
package.jsonファイルと、_custom.scssファイルを含むsrc / cssフォルダーが含まれます。 テーマと同様に、CSSの変更をsrc / cssフォルダーに追加し、JavaScriptの変更をsrc / jsフォルダーに追加します。 -
テーマレットを使用するには、まずグローバルにインストールする必要があります。 これにより、ジェネレーターにテーマレットが表示されます。 テーマレットをグローバルにインストールするには、そのルートフォルダーに移動して
npm linkを実行します。sudo npm linkを使用してコマンドを実行する必要がある場合があります。 これにより、npm packagesフォルダーにテーマレットのグローバルにインストールされたシンボリックリンクが作成されます。 テーマレットをテーマにインストールできるようになりました。
テーマレットが開発されたので、テーマにインストールできます。
テーマのインストール
テーマレットを開発したら、次の手順に従ってテーマレットをインストールします。
-
テーマのルートフォルダーに移動し、次のコマンドを実行します。
gulp extend -
拡張するテーマアセットとして テーマ を選択します。
-
選択 件の検索グローバルにインストールNPMモジュール、 件の検索NPMレジストリ、または パッケージURLを指定 themeletを検索します。
-
テーマレットを強調表示し、スペースバーを押してアクティブにし、 を押して を押してインストールします。
-
gulp deployを実行して、新しいテーマレットの更新でテーマをビルドおよびデプロイします。
テーマレットがインストールされました\！ ご覧のとおり、テーマレットは、テーマ開発バッグにトリックを追加する便利なツールです。