FAQを表示するテンプレートの追加

FAQ用のテンプレートは、あなたが追加した各フィールドだけでなく、記事が持つ可能性のある質問と回答のすべての繰り返しも表示できる必要があります。

ここでは、 FreeMarker リスト を利用して、すべての質問と回答が表示されるようにします。

テンプレートの作成開始

1. パブリックサイトの管理者であるPreston Palmerとしてログインしてください（まだの場合）。

2. サイトメニューに移動する () → Content & Data → Webコンテンツ .

3. Templates タブを選択し、 Add() をクリックします。

4. プロパティ]メニュー()(画面右側)で、[構造]フィールドの横にある [構造の選択]をクリックし、FAQの構造を選択します。

   新しいテンプレートはFAQ構造と関連付けられる。 テンプレートを作成し、それを構造に関連付けるには、この別の方法か、前の練習で述べた方法を使います。

   

5. プロパティ]メニューの[説明]フィールドに次のように入力してください。

6. ページの一番上に、タイトルとして「シンプルFAQリスト」と入力する。

テンプレートのフィールドを設定する

次に、FAQ記事のリストをフォーマットする。

1. Elements（ Elementsアイコン ）をクリックして、Elementsメニューを再度開きます。

2. テンプレート本文をクリックし、プレースホルダー・テキストを削除する。

3. ElementsメニューからJournalの下のフィールドまでスクロールダウンし、 Title をクリックします。

   これにより、タイトル値を使用するコードが自動的に入力される。

4. 次のように、コードをH2見出しHTMLタグ（<h2>）で囲みます：

   <h2>${.vars["reserved-article-title"].data}</h2>
   

5. Enter キーを 2 回押して改行を 2 行追加し、改行用の HTML タグ (<br>) を追加して、タイトルと FAQ のリストを区切ります。

6. Enterキーを2回押して新しい行を2行追加し、「要素」メニューのフィールドリストから「FAQ」をクリックする。

   FAQグループは反復可能なフィールドであるため、これは表示されたコンテンツ内の各インスタンスを反復するFreeMarkerリストを追加します。

   

7. このセグメントをFreeMarker <#list></#list>タグの中間にコピーする：

   <#if (cur_FAQ.QuestionText.getData())??>
      ${cur_FAQ.QuestionText.getData()}
   </#if>
   
   <#if (cur_FAQ.AnswerText.getData())??>
      ${cur_FAQ.AnswerText.getData()}
   </#if>
   

   これは、フィールドリストから Question フィールドと Answer フィールドの両方をクリックするのと似ていますが、cur_FAQを使用して、繰り返し実行するたびに、リスト内の各特定の質問と回答を参照します。

8. 次の例のように、行全体を質問フィールドのテキスト（${cur_FAQ.QuestionText.getData()}）で太字*のHTMLタグ（<b>）で囲みます：

   <b>${cur_FAQ.QuestionText.getData()}</b>
   

9. Enter キーを 2 回押して新しい行を 2 行追加し、FreeMarker のタグの質問と回答のブロックのそれぞれの後に、改行用の HTML タグ (<br>) を追加します。 もう一度Enterキーを押して終了する。

   

10. ［保存］をクリックします。

これで、FAQの記事を表示する場所であればどこでも、それぞれの質問と回答を表示するテンプレートができ、新しいタイプのウェブコンテンツの両方をサイトに適切に表示することができます。

次に、FAQ構造用の2番目のテンプレートをインポートする。

別のテンプレートをインポートする

Templates "ページにいる間に、ページの一番上に "Templates for Structure “と表示されていることを確認してください：よくある質問”

1. Templatesページで、 Add() をクリックし、別の新しいテンプレートを作成します。

   Note

   テンプレート」ページの上部には、「構造用テンプレート」と表示されています：新しいテンプレートを追加しても、FAQsテンプレートと関連付けられることを忘れないようにするためです。 もし（構造の Manage Templates をクリックせずに）普通にTemplatesタブにアクセスした場合、構造を作成するときに手動で構造を設定する必要があります。

2. テンプレートリソースをダウンロードし、解凍します：

   curl https://resources.learn.liferay.com/courses/latest/en/liferay-c8m2.zip -O
   

   unzip liferay-c8m2.zip
   

3. ページ上部で、 Actions() をクリックします。 → Import Script をクリックします。

   

4. ダウンロードしたFreeMarkerテンプレート（faq-web-content-template.ftl）をアップロードし、 開く をクリックします。

   テンプレートの本文は、新しいテンプレートのFreeMarkerコードで埋められます。 このテンプレートは、前に追加したテンプレートと同じテクニックを使用していますが、 Clayタグライブラリ と埋め込みボタンコンポーネントも含まれています。

5. 新しいテンプレートの名前として「折りたたみ可能なFAQ」を入力します。

6. ［保存］をクリックします。

これで、デフォルトで回答が折りたたまれるテンプレートができ、見た目がすっきりしました。

次: 新しいコンテンツ・タイプでいくつかの記事 を追加する。

関連コンセプト

• Webコンテンツテンプレートの作成

• Webコンテンツテンプレートのフラグメントへのマッピング