フラグメントエディターの使用
Liferay DXP には、コンテンツページフラグメントを作成するための組み込みエディターが含まれています。 エディターにアクセスするには、 サイトメニュー() を開き、 [デザイン] → [フラグメント] に移動します。 ここから、フラグメントおよびフラグメントセットを表示、管理、および作成できます。
Liferay DXP 7.4以降の場合、フラグメントコレクションはLiferay UIではフラグメントセットと呼ばれます。
フラグメントセットの作成
新しいフラグメントを作成する前に、最初にそれらを配置する新しいフラグメントセットを作成する必要があります。
サイトメニュー を開き、 [デザイン] → [フラグメント] に移動します。
noteLiferay DXP 7.1 および 7.2 では、プロダクトメニュー を開き、サイト → サイトビルダー → ページフラグメント に移動します。
フラグメントセットの横にある プラス ボタン(
)をクリックします。
新しいセットの 名前 と 説明 を入力します。
tip機能ごと、またはチームや部門ごとにフラグメントをグループ化するセットを作成します。
[Save] をクリックします。
保存したら、フラグメントをセットに追加できます。
新しいフラグメントの作成
フラグメントを作成するには、次の手順に従います。
目的のフラグメントセットに移動し、 追加 ボタン(
)をクリックして、新しいフラグメントを作成します。
noteLiferay DXP 7.3 より前では、フラグメントはセクションまたはコンポーネントのいずれかでした。 Liferay DXP 7.3以降では、ページフラグメントはすべてコンポーネントです。
フラグメントの 名前 を入力し、 [保存] をクリックします。
[コード] タブで、CSS、HTML、および JavaScriptフィールドを使用してフラグメントのリソースを追加します。 ここでは、さまざまなデバイスコンテキストでのフラグメントの外観のライブプレビューを表示することもできます。
ここでは、HTML編集のショートカットを紹介します。
開角括弧 (
<
) を入力すると、標準の HTML タグと Liferay の フラグメント固有のタグにアクセスすることができます。要素属性を
data
で開始し、Liferayの 編集可能なフラグメント属性 にアクセスします。
以下の例では、編集可能なテキストを含むカードコンポーネントを追加しています。
<div class="marketing-card-fragment-01"> <div class="card"> <lfr-editable id="01-card-image" type="image"> <img src="https://cdn.dribbble.com/users/1408464/screenshots/9323535/media/a5b9a76256562e878ecc6dc5cd0fadf0.png" class="card-img-top" alt="2020 - Try New Things"> </lfr-editable> <div class="card-body"> <lfr-editable id="02-card-title" type="rich-text"> <h5 class="card-title">Editable Card title</h5> </lfr-editable> <lfr-editable id="03-card-text" type="rich-text"> <p class="card-text">Here is some editable text.</p> </lfr-editable> <lfr-editable id="04-card-link" type="link"> <a href="#" class="btn btn-primary">Editable link</a> </lfr-editable> </div> </div> </div>
.marketing-card-fragment-01 .card img { max-width: 100%; }
設定」タブで、
JSON
フィールドを使用して、 設定オプション をページフラグメントに追加します。tipJSONの
fields
オブジェクトと一緒に)どのフィールドセットにもconfigurationRole
値を追加して、関連するフィールドがどのタブに表示されるかを指定することができます。 値をstyles
に設定するとスタイルタブにフィールドが表示され、advanced
に設定すると詳細タブに表示されます(Liferay DXP バージョン U23+ または GA23+ でのみ使用可能)。 configurationRole`が設定されていない場合、デフォルトでGeneralタブに表示されます。[Publish] をクリックして、 コンテントページ で使用できるようにします。
フラグメントの作成中、変更内容はフラグメントが公開されるまで自動的にドラフトとして保存されます。 セットに追加すると、フラグメントエディターでいつでもフラグメントをコピー、エクスポート、編集、および削除できます。 ページ フラグメントで使用可能なアクションの詳細は、 フラグメントの管理 を参照してください。
Liferay DXP 7.2 SP1以降および Liferay Portal 7.2 GA2以降では、グローバル サイトでページ フラグメントを作成して、すべてのサイトで利用できるようにすることができます。 これらのバージョンの初期リリースでこの機能を公開するには、 com.liferay.fragment.web.internal.configuration.FragmentGlobalPanelAppConfiguration.config
という名前の .config
ファイルを作成し、 enabled=B "true"
というプロパティを追加する必要があります。 そして、Liferay DXPインスタンスの osgi/configs
フォルダにコピーしてください。 グローバル ページ フラグメントは子サイトに継承され、グローバル サイトからのみ編集できます。 グローバル ページ フラグメントがグローバル サイトから参照するすべてのリソースは、ページ フラグメントを利用するサイトにコピーされます。