フィードバックを送信

フラグメントエディターの使用

Liferay DXPには、コンテンツページフラグメントを開発するためのビルトインエディタ。エディターにアクセスするには、 Site Menu( ) を開き、 Design → Fragments に移動します。ここから、フラグメントとフラグメントセットの表示、管理、作成ができます。

フラグメントセットの作成
新しいフラグメントの作成

note

Liferay DXP 7.4+では、フラグメントコレクションはLiferay UIではフラグメントセットと呼ばれています。

フラグメントセットの作成

新しいフラグメントを作成する前に、それらを含む新しいフラグメントセットを作成する必要があります：

サイトメニュー()を開き、 デザイン → フラグメント に移動します。

Liferay DXP 7.1と7.2では、 プロダクトメニュー を開き、 サイト → サイトビルダー → ページフラグメント に進んでください。
フラグメントセットの横にある追加( )をクリックします。
新しいセットの名前と説明を入力します。

例えば、機能別やチームや部署別にフラグメントをグループ化したセットを作成することができます。
［Save］をクリックします。

一度保存すれば、フラグメントをセットに追加できる。

新しいフラグメントの作成

important

Reactフラグメントを作成するには、 Fragments Toolkit を使用します。

以下の手順でフラグメントを作成する：

目的のフラグメントセットに移動し、 Add（！ Addボタン）をクリックして、新しいフラグメントを作成します。

note

Liferay DXP 7.3以前では、フラグメントはセクションかコンポーネントのどちらかでした。 Liferay DXP 7.3+では、すべてのページフラグメントはコンポーネントです。
フラグメントのタイプ、Basic または Form のいずれかを選択し、 Next をクリックします。
フラグメントの名前を入力し、 Add をクリックする。

Codeタブで、HTML、CSS、JavaScriptフィールドを使用して、フラグメントのリソースを追加します。ここでは、異なるデバイスコンテキストでのフラグメントの外観のライブプレビューを見ることもできます。

ここでは、HTML編集のショートカットを紹介します。

開角括弧(<)を入力すると、標準的なHTMLタグとLiferayのフラグメント固有のタグにアクセスできます。
要素属性を data で始めると、Liferay の編集可能なフラグメント属性にアクセスできます。

以下の例では、編集可能なテキストを持つカード・コンポーネントを追加しています：

<div class="marketing-card-fragment-01">
  <div class="card">
    <data-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">
    </data-lfr-editable>
    <div class="card-body">
      <data-lfr-editable id="02-card-title" type="rich-text">
        <h5 class="card-title">Editable Card title</h5>
      </data-lfr-editable>
      <data-lfr-editable id="03-card-text" type="rich-text">
        <p class="card-text">Here is some editable text.</p>
      </data-lfr-editable>
      <data-lfr-editable id="04-card-link" type="link">
        [Editable link](#" class="btn btn-primary)
      </data-lfr-editable>
    </div>
  </div>
</div>

.marketing-card-fragment-01 .card img {
  max-width: 100%;
}

Add HTML, CSS, and Javascript resources to the fragment and see a live preview.

設定タブで、JSONフィールドを使い、設定オプションをページフラグメントに追加する。

tip

（JSONのfieldsオブジェクトと一緒に）どのフィールドセットにもconfigurationRole値を追加して、関連するフィールドがどのタブに表示されるかを指定することができます。値を styles に設定すると［スタイル］タブにフィールドが表示され、advanced に設定すると［詳細設定］タブに表示されます（Liferay DXP バージョン U23+ または GA23+ でのみ使用可能）。 configurationRoleが設定されていない場合、デフォルトで［一般］タブに表示されます。
Publish をクリックすると、フラグメントが保存され、コンテンツページで使用できるようになります。

フラグメントの開発中、フラグメントが公開されるまで、変更は自動的に下書きとして保存されます。一度セットに追加されたフラグメントは、フラグメントエディターでいつでもコピー、エクスポート、編集、削除ができます。ページフラグメントで利用可能なアクションの詳細については、フラグメントの管理を参照してください。

note

Liferay DXP 7.2 SP1+とLiferay Portal 7.2 GA2+以降では、Globalサイトにページフラグメントを作成して、すべてのサイトで利用できるようにすることができます。これらのバージョンの初期リリースでこの機能を公開するには、 com.liferay.fragment.web.internal.configuration.FragmentGlobalPanelAppConfiguration.config という名前の .config ファイルを作成し、 enabled=B "true" というプロパティを追加する必要があります。そして、Liferay DXPインスタンスの osgi/configs フォルダにコピーしてください。グローバル・ページ・フラグメントは子サイトに継承され、グローバル・サイトからしか編集できません。グローバルページフラグメントがグローバルサイトから参照するリソースはすべて、ページフラグメントを利用するサイトにコピーされます。

フラグメントエディターの使用

フラグメントセットの作成

新しいフラグメントの作成

関連トピック