フラグメントにデフォルトのリソースを含める
フラグメントセットに画像（例： .gif、.jpg、.jpeg、.png）を含めて、フラグメントで使用できるようにすることができます。 ドキュメントとメディアなどの他のアプリケーションではなく、フラグメントと一緒に画像を保持すると便利です。 ここでは、フラグメント セットに画像リソースを含める方法と、フラグメントで画像リソースを使用する方法を学びます。
Liferay DXP 7.4以降の場合、フラグメントコレクションはLiferay UIではフラグメントセットと呼ばれます。
リソースとともにフラグメント セットをインポートする
新しいLiferay インスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 。
http://localhost:8080でLiferayへのサインインします。 メールアドレス test@liferay.com とパスワード test を使用してください。 プロンプトが表示されたら、パスワードを learn に変更します。
次に、以下の手順に従ってフラグメントセットの例をインポートし、フラグメントリソースの動作を確認します：
-
example resources Fragment Set をダウンロードし、解凍します：
curl https://resources.learn.liferay.com/dxp/latest/en/site-building/developer-guide/developing-page-fragments/liferay-i6r3.zip -Ounzip liferay-i6r3.zip -
フラグメント ツールキットをセットアップします。
cd liferay-i6r3./setup_tutorial.shスクリプトによって報告された満たされていない要件をすべて解決し、環境の準備が整ったと報告されるまでスクリプトを再実行する。
-
以下の
yarn run importコマンドを使用して、フラグメントツールキットでフラグメントセットをDockerコンテナにインポートします。yarn run import ... ? Liferay host & port http://localhost:8080 ? Username test@liferay.com ? Password [hidden] Checking connection... Connection successful ? Company ID liferay.com ? Group ID Liferay DXP Building project... Importing project... ✔ Fragment I6R3 Card imported Project Imported -
フラグメントセットが利用可能であることを確認します。 ブラウザで
https://localhost:8080にアクセスし、画面左側のサイトメニューで、 ［デザイン］ → ［フラグメント］ に移動します。 I6R3セットが他のフラグメントセットと一緒に表示されるはずです。 -
［I6R3 セット］ をクリックします。
-
［Resources］ タブをクリックします。
books.png画像がリソースリストに表示されます。
リソースを含むフラグメントセットストラクチャー
リソースを含むフラグメントセットは、次の構造を使用します。
collection.json:{"name":"Set Name","description":"Set description"}の形式でセットを説明するテキスト ファイル。[fragment-name]/: フラグメントのすべてのファイルが含まれています。resources/: セットのすべてのフラグメントで使用可能なファイルが含まれています。
また、フラグメントエディター の リソース タブから画像をアップロードすることも可能です。
画像ファイルはフラグメントの HTML で構文 [resources:image-name.extension] を使用して参照されます。 サンプルのフラグメント HTML には、次の img 要素があります。
<img
class="card-img-top"
src="[resources:books.png]"
/>
リソース名は大文字と小文字が区別され、参照内の名前と大文字と小文字が正確に一致する必要があります。
img[src="[resources:image-name.extension]"] という構文を使用して、CSS で画像リソースのスタイルを設定できます。
新しいリソースを含める
フラグメントにリソースを組み込んで参照する方法がわかったので、サンプルのフラグメント セットで新しいリソースを使用できます。
-
https://www.freeimages.com/ から取得した画像などを
liferay-i6r3.zip/src/i6r3-set/resources/フォルダにコピーします。 -
上記と同様に、Docker コンテナにフラグメントセットを再度インポートします。
yarn run import -
フラグメントセットにリソースが含まれていることを確認します。 UI の ［Fragments］ ページで、 ［I6R3 セット］ を選択し、 ［Resources］ タブをクリックします。 新しい画像がリソース リストに表示されるはずです。
-
セットの ［Fragments］ タブを選択してから ［I6R3 カード］ フラグメントをクリックして、 ［I6R3 カード］ フラグメントを開きます。 フラグメント ソースがフラグメント エディターに表示されます。
-
新しい画像リソースを使用するようにフラグメントを更新します。
img要素のsrc="[resources:books.png]"属性からbook.pngを削除し、src="[resources:の後に新しい画像ファイルの名前を入力します。 画像ファイル名の属性値がカーソルの下に表示されます。 その属性値を選択します。
-
フラグメントが新しい画像をレンダリングすることを確認します。
フラグメント セット内のすべてのフラグメントがセットのリソースにアクセスできます。
これで、画像リソースのフラグメント セットの使用方法がわかりました。