Flex オブジェクトの使用方法

Flex Objects は、コレクションやグループ、Twigテンプレートから簡単に表示できます。

flex-objects のページ・タイプ

directories/flex-objects.md ページに、複数のディレクトリを表示します

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

# Directories

各ディレクトリに別々のパラメータを渡すこともできます。

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 ページに、ディレクトリを１つ表示します。

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 ページに、オブジェクトを1つ表示します。

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

# Contacts

By default, flex-objects page type takes two URL parameters, directory and id. They are used to navigate directories. Example URLs look like this:
フォルトでは、フレックス・オブジェクトのページ・タイプは 2 つの URL パラメータ、directory と id を取ります。これらはディレクトリの表示を制御するために使用されます。URL の例は次のようになります。

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

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

コレクションとオブジェクトの表示

コレクションとオブジェクトの両方が、HTML 出力をサポートしています。出力は、レイアウトとコンテキストの2つのパラメータでカスタマイズ可能です。レイアウトでは、例えば、カードのリストを表示し、そこからより詳細な出力を行うなど、見え方を設定することができます。コンテキストは、テンプレートファイルで使用される変数を渡すことができます。

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

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

より詳細な情報は、Render Collection and Render Object を参照ください.

テンプレートの基本

Flex 用のテンプレートは、templates/flex フォルダに置きます。

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

コレクション用とオブジェクト用の2つのフォルダがあり、この例では、コレクションとオブジェクトの両方にデフォルトのレイアウトがあります。

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

コレクション・テンプレート flex/contacts/collection/default.html.twig は、コレクション内のすべてのオブジェクトを表示する役割を担っています。デフォルトでキャッシュされます。キャッシュ・キーは、コレクションと render() メソッドに渡される context で定義されます。

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

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

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

オブジェクト・テンプレート flex/contacts/object/default.html.twig は、１つのオブジェクトを表示する役割を担っています。キャッシュ・キーは、コレクションと render() メソッドに渡される context で定義されます。

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

<div class="entry-details">
    {% if object.website %}
        <a href="{{ object.website|e }}"><span class="name">{{ object.last_name|e }}, {{ object.first_name|e }}</span></a>
    {% else %}
        <span class="name">{{ object.last_name|e }}, {{ object.first_name|e }}</span>
    {% endif %}
    {% if object.email %}
        <p><a href="mailto:{{ object.email|e }}" class="email">{{ object.email|e }}</a></p>
    {% endif %}
</div>
<div class="entry-extra">
    {% for tag in object.tags %}
        <span>{{ tag|e }}</span>
    {% endfor %}
</div>

カスタム・レイアウト

カスタム・レイアウトを使用することで、コレクションとオブジェクトの両方に無限の異なるビューを作成することができます。

default.html.twig ファイルの隣に新しいファイルを追加するだけで、カスタムレイアウトを作成することができます。ファイルのベースネームは、レイアウト名と同じになります。