ダッシュボード

レイアウト(layout)

layoutは、フィールドをCMSの編集画面上でどのように配置するかを定義する2次元配列です。

基本構造 

{
	"layout": [["title", "subtitle"], ["coverImage"], ["content"]]
}

各行は配列で、その中にフィールド名を指定します。

例えば上記の例では、以下のような配置になります

レイアウトの例

配置ルール

配列に含めるフィールド数によって、カラム幅が自動的に決まります。

配列の要素数表示
1フル幅（1カラム）
22カラム（50% / 50%）
33カラム（33% / 33% / 33%）

1配列あたり最大3カラムまでです。

例 

{
	"layout": [["title", "subtitle"], ["coverImage"], ["content"]]
}

この例では：

  • 1行目: titleとsubtitleが50%ずつ横並び
  • 2行目: coverImageがフル幅
  • 3行目: contentがフル幅

レスポンシブ対応

画面幅に応じて自動的にカラム数が調整されます。

画面幅最大カラム数
広い（≥1024px）3カラム
中程度（≥768px）2カラム
狭い（<768px）1カラム

モバイル端末では、すべてのフィールドが縦積みで表示されます。

layoutに含まれないフィールド

layoutに含まれないフィールドは、自動的に末尾に1カラム（フル幅）で追加されます。

{
	"fields": [
		{ "name": "title", "type": "text" },
		{ "name": "subtitle", "type": "text" },
		{ "name": "coverImage", "type": "image" },
		{ "name": "content", "type": "richtext" }
	],
	"layout": [["title", "subtitle"], ["content"]]
}

この例では、coverImageはlayoutに含まれていないため、contentの後にフル幅で表示されます。

layoutを指定しない場合

layoutを指定しない場合、すべてのフィールドが定義順に1カラムで縦積み表示されます。

pitプロパティとの関係

pitで指定されたフィールドは、layout内の位置に関係なく特別な場所に表示されます。

pitプロパティ表示位置
createdAtタイトルの下に小さく表示
updatedAtタイトルの下に小さく表示
draft保存ボタンの横にトグル表示
orderドラッグ&ドロップで管理

これらのフィールドをlayoutで指定しても、その指定は無視され、pitプロパティが優先されます。

たとえば、以下の設定ではpublishedAtとisDraftはlayoutに含まれています。

{
	"layout": [["title", "isDraft"], ["publishedAt"], ["content"]],
	"pit": {
		"createdAt": "publishedAt",
		"draft": "isDraft"
	}
}

しかし、pitプロパティで指定されているため、これらはCMSのUI上決められた位置に表示されます。

さらにtitleが1カラムで表示され、layoutで指定した位置にpublishedAtは表示されず、contentが1カラムで表示されます。

pitプロパティが無視されるレイアウトの例

設定例

アバウトページ 

{
	"name": "aboutPage",
	"label": "アバウトページ",
	"description": "サイトの紹介ページを管理します",
	"singleton": true,
	"path": "src/content/pages/about",
	"extension": "md",
	"fields": [
		{
			"name": "title",
			"type": "text",
			"required": true,
			"label": "ページタイトル"
		},
		{
			"name": "subtitle",
			"type": "text",
			"required": false,
			"label": "サブタイトル"
		},
		{
			"name": "coverImage",
			"type": "image",
			"required": false,
			"label": "カバー画像"
		},
		{
			"name": "content",
			"type": "richtext",
			"required": true,
			"label": "本文"
		}
	],
	"layout": [["title", "subtitle"], ["coverImage"], ["content"]],
	"pit": {
		"body": "content"
	}
}

この例では：

  • 1行目: titleとsubtitleが50%ずつ横並び
  • 2行目: coverImageがフル幅
  • 3行目: contentがフル幅
レイアウトの例
Docs