テーマ用に再利用可能なコードを作成する

テーマ用に再利用可能なコードを作成する

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

テーマは、小さく、拡張可能で、再利用可能なコードです。 テーマは複数のコンポーネントを必要としますが、テーマレットは拡張したいファイルのみを必要とします。 これにより、よりモジュール化されたテーマ設計アプローチが作成され、コラボレーションに役立ち、テーマ内でコードを複製する必要性が減ります。

テーマレットを使用すると、開発者は他の開発者とテーマ間でコードスニペットを簡単に共有できます。 テーマレットは、CSSとJavaScriptで構成できます。 テーマ は、 テーマテンプレートをサポートしていません。

テーマは非常に柔軟であるため、さまざまな用途が考えられます。 テーマレットを作成して、管理ツールの外観を変更したり、レスポンシブ埋め込みビデオにカスタムJavaScriptコンポーネントを使用するテーマレットなどを作成できます。 たとえば、 Liferay Product Menu Animation Themelet 単に製品メニューのアニメーションを変更します。

図1:テーマレットを使用してUIの1つの側面を変更し、他のテーマで再利用できます。

作成するテーマごとに手動でコーディングする必要があるものがある場合、それはテーマレットの良い候補です。

このチュートリアルでは、次の方法を示します。

  • テーマレットを作成してテーマを拡張します

  • テーマをインストールする

themeletを作成するには、拡張するためのテーマとLiferayのテーマジェネレータとの依存関係がインストールを必要とする、などで説明した の作成テーマ チュートリアル。

テーマの作成

テーマレットを作成するには、次の手順に従います。

  1. コマンドラインを開き、テーマレットを作成するフォルダーに移動します。

  2. yo liferay-theme:themelet を実行し、プロンプトに従ってテーマレットを生成します。

    図2:Themeletサブジェネレーターは、テーマレットの作成プロセスを自動化し、迅速かつ簡単にします。

  3. 生成されたテーマレットには、構成情報を含む package.json ファイルと、 _custom.scss ファイルを含む src / css フォルダーが含まれます。 テーマと同様に、CSSの変更を src / css フォルダーに追加し、JavaScriptの変更を src / js フォルダーに追加します。

  4. テーマレットを使用するには、まずグローバルにインストールする必要があります。 これにより、ジェネレーターにテーマレットが表示されます。 テーマレットをグローバルにインストールするには、そのルートフォルダーに移動して npm linkを実行します。 sudo npm linkを使用してコマンドを実行する必要がある場合があります。 これにより、npm packagesフォルダーにテーマレットのグローバルにインストールされたシンボリックリンクが作成されます。 テーマレットをテーマにインストールできるようになりました。

テーマレットが開発されたので、テーマにインストールできます。

テーマのインストール

テーマレットを開発したら、次の手順に従ってテーマレットをインストールします。

  1. テーマのルートフォルダーに移動し、次のコマンドを実行します。

    gulp extend
    
  2. 拡張するテーマアセットとして テーマ を選択します。

  3. 選択 件の検索グローバルにインストールNPMモジュール件の検索NPMレジストリ、または パッケージURLを指定 themeletを検索します。

    図3:グローバルにインストールされたnpmモジュール、公開されたnpmモジュール、またはパッケージURLを使用してテーマを拡張できます。

  4. テーマレットを強調表示し、スペースバーを押してアクティブにし、 を押して を押してインストールします。

  5. gulp deploy を実行して、新しいテーマレットの更新でテーマをビルドおよびデプロイします。

テーマレットがインストールされました\! ご覧のとおり、テーマレットは、テーマ開発バッグにトリックを追加する便利なツールです。

関連トピック

テーマを使用したリソースのインポート

テーマの作成

« テーマの変更の自動展開テーマのサムネイルプレビューを作成する »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています