テンプレートの作成

ストラクチャーにはアイテムを表示し、スタイルするテンプレートが必要です。この作業ではFreeMarkerのテンプレート言語を使いテンプレートを作成します。

下記の手順でテンプレートを作成します。

メニューを開き、Liferayリゾート→［コンテンツ］→Webコンテンツに行きます。
画面右上のオプションを開き、［テンプレート］に行きます。

画面右下の［＋］を選択、テンプレートを作成します。
テンプレートを「Liferay　ガイドリスト」と記入します。
このテンプレートにリンクするストラクチャーを選択します。[詳細]を展開し、「ストラクチャー」の下にある[選択]ボタンを選択し、Liferayリゾートガイド（構造）を選択し、[OK]をクリックします。

次に、テンプレートの言語 Free Makerを選択します。 FreeMarkerは HTML、変数 (${...})、FTLタグを含む、FreeMarker Template Language (FTL)を使用します。FreeMarkerテンプレートにはCSSも含まれます。 FTLの更なる情報は、FreeMarkerからのドキュメンテーションを参照してください。 Liferay DXPはVelocityとExtensible Stylesheet Languageもサポートしています。

スクリプトを作成する準備が整ったので、次にCSSを挿入します。この例では4つのカラムと2行のグリッドレイアウトを使用して、フィールドを定義しています。コンテンツは2列目と4列目に表示され、他の列はスペースとして表示されます。この例では、テキスト見出しスタイルも定義します。スクリプトのセクションのコードを下記と書き換えます。

<style>
   .wrapper {
  display: grid;
  grid-template-columns: 300px, 300px, 300px, 300px;
  grid-gap: 10px;
  grid-auto-rows: minmax(auto, auto);
  text-align: center;
}

h1 {
    text-align: center;
}

h2 {
   position: relative;
   color: black;
}

.item-one {
  grid-column: 2;
  grid-row: 1;
  max-width: 355px;
}

.item-two {
  grid-column: 4;
  grid-row: 1;
  max-width: 355px;
}

.item-three {
  grid-column: 2;
  grid-row: 2;
  max-width: 355px;
}

.item-four {
  grid-column: 4;
  grid-row: 2;
  max-width: 355px;
}
</style>

これで、テンプレートの HTML作成ができます。ストラクチャーの時と同じように、エディターの左側にあるサイドバーから、フィールドを挿入します。こうすることで、適切な変数が自動的に入力されます。一般変数は、お使いのLiferay DXPインスタンスの一般的に使う情報（ユーザー情報、ThemeDisplayインスタンスなど）を提供します。Fieldsからは、ストラクチャーが定義する変数にアクセスします。フィールド上にマウスを置くと変数名を表示します。フィールドをクリックすると、そのフィールドのデータを取得するコードがエディターに追加されます。

ただしここでは、下記のコードをコピー＆ペーストします。このコードは、ユーザが入力したフィールド値を取得し、テキストと画像のスタイルを設定し、全ての情報をCSSに定義されたDIVに配置します。このコードをエディタの </style> タグの下に追加します。

<h1>${title.getData()}</h1>

<div class="wrapper">
  <a class="item-one" href="${name1.link1.getFriendlyUrl()}">
  <h2>${name1.getData()}</h2>
    <#if name1.image1.getData()?? && name1.image1.getData() != "">
      <img alt="${name1.image1.getAttribute("alt")}" src="${name1.image1.getData()}" />
    </#if>
  </a>

  <a class="item-two" href="${name2.link2.getFriendlyUrl()}">
  <h2>${name2.getData()}</h2>
    <#if name2.image2.getData()?? && name2.image2.getData() != "">
      <img alt="${name2.image2.getAttribute("alt")}" src="${name2.image2.getData()}" />
    </#if>
  </a>

<hr />

  <a class="item-three" href="${name3.link3.getFriendlyUrl()}">
  <h2>${name3.getData()}</h2>
    <#if name3.image3.getData()?? && name3.image3.getData() != "">
      <img alt="${name3.image3.getAttribute("alt")}" src="${name3.image3.getData()}" />
    </#if>
  </a>

  <a class="item-four" href="${name4.link4.getFriendlyUrl()}">
  <h2>${name4.getData()}</h2>
    <#if name4.image4.getData()?? && name4.image4.getData() != "">
      <img alt="${name4.image4.getAttribute("alt")}" src="${name4.image4.getData()}" />
    </#if>
  </a>

</div>

［保存］をクリック

テンプレートとストラクチャーと使用したコンテンツの作成＞＞

ヘルプセンター

製品

リソース

セキュリティ

サポート

ドキュメンテーション