Flex オブジェクトを使う

Flex オブジェクト は、使いやすく設計されています。ほとんど Twig テンプレートだけで、コレクションやグループをページへ表示できます。

[!Note]
TIP: Flex ディレクトリを有効化し、表示するためには、ディレクトリの有効化をお読みください。

flex-objects ページタイプの使用

directories/flex-objects.md ページで複数の Flex ディレクトリを表示するには：

title: Directories
flex:
  layout: default
  list:
  - contacts
  - services
---

# Directories

または、各 Flex ディレクトリにそれぞれのパラメータを渡すこともできます：

title: Directories
flex:
  layout: default
  directories:
    contacts:
      collection:
        title: '{{ directory.title }}'
        layout: default
        object:
          layout: list-default
      object:
        title: 'Contact: {{ object.first_name }} {{ object.last_name }}'
        layout: default
    services:
---

# Directories

contacts/flex-objects.md ページで、ひとつの Flex ディレクトリを表示するには：

title: Contacts
flex:
  directory: contacts
  collection:
    title: '{{ directory.title }}'
    layout: default
    object:
      layout: list-default
  object:
    title: 'Contact: {{ object.first_name }} {{ object.last_name }}'
    layout: default
---

# Contacts

my-contact/flex-objects.md ページで、ひとつの Flex オブジェクトを表示するには：

title: Contact
flex:
  directory: contacts
  id: ki2ts4cbivggmtlj
  object:
    title: 'Contact: {{ object.first_name }} {{ object.last_name }}'
    layout: default
---

# Contacts

デフォルトでは、 flex-objects ページタイプは、2つの URL パラメータ（ directory と id ）を取ります。これらは、ディレクトリへナビゲートするのに使われます。たとえば、 URL は次のようになります。

https://www.domain.com/directories/directory:contacts/id:ki2ts4cbivggmtlj

https://www.domain.com/contacts/id:ki2ts4cbivggmtlj

[!Note]
TIP: flex 内で独自のパラメータを渡すことができ、自身のコレクションのテンプレートファイルや、オブジェクトテンプレートファイルで利用できます。

コレクションとオブジェクトのレンダリング

コレクションとオブジェクトはどちらも、 HTML での出力に対応しています。出力は、レイアウトとコンテキストという2つのパラメータでカスタマイズされます。レイアウトにより、見た目をカスタマイズできます。たとえば、カードのリストを表示し、より詳しくは詳細ページを出力する、というように。そして、コンテキストにより、テンプレートファイルで利用する変数を渡すことができます。

{% render collection layout: 'custom' with { context_variable: true } %}

{% render object layout: 'custom' with { context_variable: true } %}

詳しくは、ドキュメントをお読みください：コレクションのレンダリングと、オブジェクトのレンダリング

テンプレートの基本

Flex テンプレートは、 templates/flex フォルダにあります：

templates/
  flex/
    contacts/
      collection/
        default.html.twig
      object/
        default.html.twig

各タイプには、2つのフォルダがあり、1つはコレクションのレンダリング用、もうひとつはオブジェクトのレンダリング用です。中のファイルはレイアウトで、ファイル名に基づいて名前が付けられています。上記の例では、コレクションとオブジェクトの両方に対する default レイアウトがあります。

コレクションのテンプレート

コレクションテンプレートの flex/contacts/collection/default.html.twig は、コレクション内のすべてのオブジェクトのレンダリングに対応します。レンダリング出力は、デフォルトでキャッシュされます。キャッシュキーは、コレクションと render() メソッドに渡すコンテキストによって定義されます。

[!Info]
WARNING: コンテキストにスカラー値以外の値が含まれている場合、キャッシュは無効になります。コンテキストはできるだけシンプルに保ってください！

以下は、 Contacts タイプの例です：

<div id="flex-objects">
  <div class="text-center">
    <input class="form-input search" type="text" placeholder="Search by name, email, etc" />
    <button class="button button-primary sort asc" data-sort="name">
      Sort by Name
    </button>
  </div>

  <ul class="list">
    {% for object in collection.filterBy({ published: true }) %}
      <li>
        {% render object layout: layout with { options: options } %}
      </li>
    {% endfor %}
  </ul>
</div>

<script>
    var options = {
        valueNames: [ 'name', 'email', 'website', 'entry-extra' ]
    };
    var flexList = new List('flex-objects', options);
</script>

[!Note]
TIP: レンダリングされた HTML に動的コンテンツを含む場合、Twig テンプレートで {% do block.disableCache() %} により、キャッシュを無効にすることができます。

オブジェクトのテンプレート

オブジェクトテンプレートの flex/contacts/object/default.html.twig は、1つのオブジェクトのレンダリングに対応します。レンダリング出力は、デフォルトでキャッシュされます。キャッシュキーは、オブジェクトと render() メソッドに渡すコンテキストによって定義されます。