フラグメント固有のタグ
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
HTML、CSS、およびJavaScriptはWebサイトを構築するための普遍的なツールですが、Liferay DXPにはフラグメントをより強力にするための追加のツールがいくつか含まれています。 1つのタグは、HTMLエディターだけでなく、発行時にもテキストを編集可能にすることができます。 もう1つは、Liferayポートレットを「ウィジェット」の形でフラグメントに埋め込むことができます。
テキストを編集可能にする
テキストを編集可能にすると、マーケティング担当者またはWeb管理者は、テキストを公開する前に変更できます。 これにより、ページごとに異なる見出しまたは異なるテキストを持つ単一のフラグメントを再利用できます。 フラグメントを使用すると、コンテンツの作成が簡単になり、この機能により、テキストを変更するだけで作業を複製する作業を節約できます。
次のように <lfr-editable> タグで囲むことにより、フラグメントのテキストを編集可能にすることができます。
<lfr-editable id="unique-id" type="text">
This is editable text!
</lfr-editable>
lfr-editable タグは、一意の idなしではレンダリングされません。
次の3つの タイプ オプションは、 lfr編集可能な タグ内で使用できます。
テキスト：公開前に編集できるプレーンテキスト用のスペースを作成します。
画像：有効な <img> タグを含める必要があります。このタグは、公開する前に任意の画像に置き換えることができます（ドキュメントおよびメディアからのタグを含む）。
リッチテキスト：太字、斜体、下線、リンク、事前定義スタイルなどのリッチテキスト形式を提供します。
編集可能なテキストをフラグメントに追加し、コンテンツページにフラグメントを追加してから、公開する前にテキストを編集します。
-
前に作業していたフラグメントに戻ります。
-
HTMLペインの
<h1>内で、テキストを<lfr-editable>タグで囲み、次のようにします。このテキストはスタイル設定されているので、きれいに見えます！ -
[ 公開クリックし* 。
これで、フラグメントには編集可能なテキストが含まれます。 公開するコンテンツページに追加します。
-
ナビゲーション → サイトページます。
-
上部の[ ページテンプレート ]タブを選択します。
-
フラグメント を開発するための *テンプレートという名前の新しいコレクションと、その中に 編集可能なページテンプレートという名前の新しいページテンプレートを作成します。
4
右側のメニューから、フラグメントをページに追加します。
5
編集可能として定義したテキストをクリックして変更します。
同様に、 リッチテキスト タイプは、エディターの追加機能で同じ機能を提供します。
テンプレートは自動的に保存され、ページに変換されると新しいテキストが表示されます。
画像を編集可能にする
テキストと同様に、画像を編集可能として設定できます。 編集可能な画像は、ユーザーのローカルファイルまたはドキュメントとメディアライブラリから選択できます。 編集可能な画像のスタイルの定義には注意する必要があります。適切なサイズを持たない画像やサイズの小さいスペースに押し込まれた画像は、レイアウトに大きな悪影響を与える可能性があるためです。
画像はテキストと同じ <lfr-editable> タグを使用しますが、次のように 画像 タイプを使用します。
<lfr-editable id="unique-id" type="image">
<img src="...">
</lfr-editable>
タイプ 画像 の lfr-editable タグをフラグメントに追加した後、そのフラグメントをページに追加すると、編集可能な画像をクリックして置換を選択できます。
フラグメント内にウィジェットを含める
ウィジェットを含めることで、より動的な動作をフラグメントに追加できます。 現在、ウィジェットとして埋め込むことができるのはウィジェットのみですが、将来的には他のタイプのウィジェットも利用可能になります。
ウィジェットを含めるには、その登録名を知る必要があります。 たとえば、Site Navigation Menuポートレットは navとして登録されています。 登録されている各ポートレットには、埋め込みに使用される lfr-widget-[name] タグがあります。 たとえば、ナビゲーションメニュータグは <lfr-widget-nav />です。 次のようなブロックに埋め込むことができます。
<div class="nav-widget">
<lfr-widget-nav>
</lfr-widget-nav>
</div>
これをフラグメントに実装します。
-
Fragments ページに移動します。
-
開発フラグメント コレクションに移動し、その中に ウィジェットフラグメントという名前の新しいフラグメントを追加します。
-
HTMLペインのメイン
<div>に次のコードを挿入します。 -
[ 公開クリックし* 。
次に、コンテンツページに追加して表示する必要があります。
-
ナビゲーション → サイトページます。
-
上部の[ ページテンプレート ]タブを選択します。
-
行く フラグメントコレクションの開発のためのテンプレートの。
-
Widget Page Templateという名前の新しいページテンプレートを作成します。
-
新しいページテンプレートで、右側のメニューからフラグメントをページに追加します。
-
テンプレートエディタを終了すると、自動的に保存されます。
-
ページ タブに移動します。
-
+アイコンをクリックして、新しいページを作成します。 -
ウィジェットページテンプレート を選択して保存します。
-
次にサイトに戻り、新しいページを選択します。
埋め込み可能なウィジェットの完全なリストについては、リファレンスページ「ページフラグメント ウィジェットを埋め込む
参照してください。
フラグメントにウィジェットを埋め込む
フラグメントに埋め込むカスタムウィジェットがある場合は、そのウィジェットを埋め込み可能に構成できます。 ウィジェットを埋め込むには、OSGiコンポーネントである必要があります。 埋め込むポートレットクラスの @Component アノテーション内に、このプロパティを追加します。
"com.liferay.fragment.entry.processor.portlet.alias=app-name"
ウィジェットをデプロイすると、追加できるようになります。 プロパティで指定する名前は、次のように lfr-widget タグに追加する必要があります。
<lfr-widget-app-name>
</lfr-widget-app-name>
フラグメントにウィジェットを埋め込むと、オプションの世界が広がります。 Fragmentsのパワーのいくつかを調査したので、次に、開発のベストプラクティスについて学びます。