ページ フラグメントエディタのインターフェースリファレンス
ページ フラグメント エディターのインターフェースは、次の 2 つのタブで構成されています。
以下のセクションでは、インターフェイスのこれらの部分の使用方法について説明します。 ページ フラグメントの開発方法については、「 ページ フラグメントの開発 」を参照してください。
コードエディタ
コードエディタは 4 つのペインに分割されます。
HTML: 標準の HTML に加えて、Liferay 固有のタグと FreeMarker ( 代替 (角括弧) 構文を使用) をサポートし、動的な動作を追加できます。
$( と入力して、自動補完を使用して変数名を検索します。 自動補完を使用してタグライブラリ名を検索するには、 [@ と入力します。
CSS: 標準 CSS をサポートします。
JavaScript: 標準の JavaScript をサポートします。 JavaScript ペインの FreeMarker コンテキストで構成値にアクセスすることもできます。
プレビュー: コードを記述すると更新されるコンポーネントのライブ プレビューを提供します。 デスクトップ、モバイル、タブレット、および拡張ビューを切り替えることができます。
設定
ページフラグメントの構成の定義は、Liferay DXP 7.2 SP1以降および Liferay Portal GA2以降で利用できます。
構成タブでは、フラグメントの構成メニューに構成オプションを追加するための入力が提供されます。 たとえば、フラグメントの構成オプションにセレクターを追加して、フラグメントの見出しの色を選択できます。 フラグメントの構成オプションを定義すると、柔軟性が向上し、維持する必要があるフラグメントの数が減ります。
構成の変更はコード エディターに自動的に表示されます。 設定が無効な場合、フラグメントを公開することはできません。 フラグメントをプレビューまたは公開する前に、必ず JSON 構成が有効であることを確認してください。
構成値は、HTML ペインの FreeMarker コンテキストを通じてフラグメントで使用できるようになります。 設定オプションを HTML の条件値と組み合わせて、ユーザーに動的なエクスペリエンスを作成できます。 JavaScript を介してこれらの値にアクセスすることもできます。 詳細については、 ページ フラグメントを構成可能にする を参照してください。