oo

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

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

note

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

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

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

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

    Liferay DXP 7.1と7.2では、 プロダクトメニュー を開き、 サイトサイトビルダーページ フラグメント に進んでください。

  2. フラグメントセットの横にある 追加( 追加ボタン)をクリックします。

    Click the add button next to Fragment Sets.

  3. 新しいセットの 名前説明 を入力します。

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

  4. Save]をクリックします。

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

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

important

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

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

  1. 目的のフラグメントセットに移動し、 Add(! Addボタン )をクリックして、新しいフラグメントを作成します。

    note

    Liferay DXP 7.3以前では、フラグメントはセクションかコンポーネントのどちらかでした。 Liferay DXP 7.3+では、すべてのページフラグメントはコンポーネントです。

  2. フラグメントのタイプ、Basic または Form のいずれかを選択し、 Next をクリックします。

  3. フラグメントの名前を入力し、 Add をクリックする。

  4. 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.

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

    Add configuration options to a page fragment.

    tip

    (JSONのfieldsオブジェクトと一緒に)どのフィールドセットにもconfigurationRole値を追加して、関連するフィールドがどのタブに表示されるかを指定することができます。 値を styles に設定すると[スタイル]タブにフィールドが表示され、advanced に設定すると[詳細設定]タブに表示されます(Liferay DXP バージョン U23+ または GA23+ でのみ使用可能)。 configurationRoleが設定されていない場合、デフォルトで[一般]タブに表示されます。

  6. Publish をクリックすると、フラグメントが保存され、 コンテンツページ で使用できるようになります。

    The fragment can be used in content pages.

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

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 フォルダにコピーしてください。 グローバル・ページ・フラグメントは子サイトに継承され、グローバル・サイトからしか編集できません。 グローバルページフラグメントがグローバルサイトから参照するリソースはすべて、ページフラグメントを利用するサイトにコピーされます。

関連トピック

フラグメントツールキットの使用

フラグメントへの設定オプションの追加

Feature: