繰り返し
グループ化したフィールドを増減させられるフィールドです。著者リスト、FAQ項目、ギャラリー画像など、繰り返し構造のデータに使用します。
基本例
{
"name": "authors",
"type": "loop",
"label": "著者",
"fields": [
{ "name": "name", "type": "text", "label": "名前", "required": true },
{ "name": "role", "type": "text", "label": "役割" }
]
} プロパティ
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
name | string | Yes | フィールドの識別子 |
type | "loop" | Yes | "loop"を指定 |
label | string | No | CMS上での表示名 |
note | string | No | 編集者向けの補足メモ |
required | boolean | No | 必須フィールドかどうか |
fields | array | Yes | 各アイテムが持つフィールドの定義 |
minItems | number | No | 最小アイテム数 |
maxItems | number | No | 最大アイテム数 |
itemLabel | string | No | アイテムの表示ラベルに使うフィールド名 |
layout | string[][] | No | 各アイテム内のフィールドレイアウト |
fieldsで使用可能なフィールドタイプ
fields内には、loop以外のすべてのフィールドタイプを使用できます。
text,textarea,richtextnumber,booleandate,imageselect,checkbox,relation
注意: loopのネストは許可されていません。
使用例
著者リスト
{
"name": "authors",
"type": "loop",
"label": "著者",
"minItems": 1,
"maxItems": 5,
"itemLabel": "name",
"fields": [
{ "name": "name", "type": "text", "label": "名前", "required": true },
{ "name": "role", "type": "text", "label": "役割" },
{ "name": "avatar", "type": "image", "label": "アバター" }
]
} FAQ(よくある質問)
{
"name": "faq",
"type": "loop",
"label": "よくある質問",
"itemLabel": "question",
"fields": [
{ "name": "question", "type": "text", "label": "質問", "required": true },
{ "name": "answer", "type": "textarea", "label": "回答", "required": true }
]
} ギャラリー
{
"name": "gallery",
"type": "loop",
"label": "ギャラリー",
"maxItems": 10,
"itemLabel": "caption",
"fields": [
{ "name": "image", "type": "image", "label": "画像", "required": true },
{ "name": "caption", "type": "text", "label": "キャプション" },
{ "name": "alt", "type": "text", "label": "代替テキスト" }
]
} 価格表
{
"name": "pricing",
"type": "loop",
"label": "価格プラン",
"minItems": 1,
"maxItems": 4,
"itemLabel": "name",
"layout": [["name", "price"], ["features"]],
"fields": [
{ "name": "name", "type": "text", "label": "プラン名", "required": true },
{ "name": "price", "type": "number", "label": "月額(円)", "required": true },
{
"name": "features",
"type": "textarea",
"label": "機能一覧"
}
]
} タイムライン・沿革
{
"name": "timeline",
"type": "loop",
"label": "沿革",
"itemLabel": "title",
"fields": [
{ "name": "date", "type": "date", "label": "日付", "required": true },
{ "name": "title", "type": "text", "label": "タイトル", "required": true },
{ "name": "description", "type": "textarea", "label": "詳細" }
]
} layoutの使い方
layoutを使うと、各アイテム内のフィールドを横並びにできます。書き方はコレクションのレイアウトと同じです。
itemLabelの使い方
itemLabelを指定すると、各アイテムのヘッダーにそのフィールドの値が表示されます。
{
"name": "faq",
"type": "loop",
"label": "FAQ",
"itemLabel": "question",
"fields": [
{ "name": "question", "type": "text", "label": "質問" },
{ "name": "answer", "type": "textarea", "label": "回答" }
]
} この例では、アイテムのヘッダーに質問の内容が表示されます。省略した場合は「#1」「#2」のような番号が表示されます。
保存形式
Markdown(YAML形式)
---
title: 'Svelteの始め方'
authors:
- name: '田中太郎'
role: '執筆'
avatar: '/images/tanaka.jpg'
- name: '鈴木花子'
role: '監修'
faq:
- question: 'Svelteとは?'
answer: 'コンパイラベースのフレームワークです'
- question: '学習コストは?'
answer: '比較的低いです'
---
本文がここに入ります... JSON形式
{
"title": "Svelteの始め方",
"authors": [
{ "name": "田中太郎", "role": "執筆", "avatar": "/images/tanaka.jpg" },
{ "name": "鈴木花子", "role": "監修" }
],
"faq": [
{ "question": "Svelteとは?", "answer": "コンパイラベースのフレームワークです" },
{ "question": "学習コストは?", "answer": "比較的低いです" }
]
} minItems / maxItems
アイテム数を制限できます。
{
"name": "authors",
"type": "loop",
"label": "著者",
"minItems": 1,
"maxItems": 5,
"fields": [...]
} minItems: 指定数未満のアイテムがある場合、保存時にエラーになりますmaxItems: 指定数に達すると「追加」ボタンが無効になります
制限事項
- ネスト禁止: loop フィールドの中に loop フィールドを入れることはできません
- pit指定不可: loop フィールドは
pit.title,pit.bodyには指定できません - 並び替え未対応: 現在はドラッグ&ドロップでの並び替えには対応していません
コレクションのlayoutとの関係
loop フィールドは、コレクションの layout 設定で他のフィールドと同様に配置できます。
{
"name": "blog",
"path": "content/blog",
"extension": "md",
"layout": [
["title"],
["authors", "category"],
["body"]
],
"fields": [
{ "name": "title", "type": "text", "label": "タイトル" },
{
"name": "authors",
"type": "loop",
"label": "著者",
"fields": [...]
},
{ "name": "category", "type": "select", "label": "カテゴリ", "options": [...] },
{ "name": "body", "type": "richtext", "label": "本文" }
]
} コレクションの layout は loop フィールド全体の配置を制御し、loop の layout は各アイテム内部のフィールド配置を制御します。