文档

学习

v.Latest
Documentation
对象字段
Table of Contents

object字段是一种动态字段类型,它使用其包含的数据在CMS中创建一个嵌套页面

这可以用于创建重复的数据结构在CMS中分组相关数据

类型定义

有关所有字段类型通用的附加属性,请参阅字段类型定义。
REQUIRED
type
string

将此设置为 "object" 以使用对象字段。


REQUIRED
name
string

供内部使用的字段名称。


fields
Field[]

要在对象中显示的字段。


templates
Template[]

要在对象中显示的模板。

当 list: true 时可用。


templates​Key
string

为模板选择一个不同的引用键。

All properties marked as REQUIRED must be specified for the field to work properly.

fieldstemplates中只能定义一个

对象类型的概念化

重要的是,有两种关键方式使用对象类型...

  1. 使用fields时,对象将其内部字段包装在一个子窗口中。
  2. 使用templates时,用户可以在关联的模板之间进行选择。

如上所示,但按下+时,您可以选择一组选项之一。

可视选择器

此可视块选择器允许编辑者选择带有图像和文本的模板。

要启用可视块选择器,visualSelector属性必须为true。在编辑器中,这还会打开一个新窗口以选择模板。

要为某个模板获取图像,您需要通过模板的ui.previewSrc属性提供图像。这是一个URL,或相对于您的TinaCMS配置中定义的公共文件夹

const showcaseTemplate: Template = {
label: '展示',
name: 'showcase',
ui: {
previewSrc: '/img/blocks/features.png',
},
fields: [
//...
],
};

自定义列表标签

默认情况下,对象列表使用模板的label或对象的label + " Item"为每个元素标记。

列表UI

如果列表中有多个对象,可以通过itemProps函数属性为每个元素自定义标签。

  • 如果使用fields,在对象上设置此属性
  • 如果使用templates,在每个模板上设置此属性

带标签属性的列表UI

自定义模板标识符

使用templates属性时,您的文档会使用键_template存储每个选择的模板。

---
farm:
- name: Tina
_template: llama
- name: Napoleon
_template: farmer
---

您可以通过templatesKey属性自定义此键——使用给定的键代替。

示例

简单字段

{
label: "推荐",
name: "testimonial",
type: "object",
fields: [
{
label: "作者",
name: "author",
type: "string"
},
{
label: "引用",
name: "quote",
type: "string",
ui: {
component: "textarea"
}
}
]
}

简单字段(模板)

{
label: "页面块",
name: "pageBlocks",
type: "object",
list: true,
templates: [
{
label: "CTA",
name: "cta",
fields: [...]
},
{
label: "推荐",
name: "testimonial",
fields: [...]
}
]
}

简单包装字段

数字、布尔值、日期时间、引用和富文本字段类型可以用作对象的唯一字段,以创建这些类型的列表。

{
label: "作者列表",
name: "authorList",
type: "object",
list: true,
fields: [
{
label: '作者',
name: 'author',
type: 'reference',
collections: ['author'],
},
]
}

嵌套对象字段

此示例同时使用模板和字段。

  • featureItem对象存储一个对象数组{ headline, description, buttons }
  • 列表中的每个功能项都有一个唯一标签,由itemProps函数设置。
  • featureBlock数组的buttons元素也是一个对象列表,有3个选项可供选择(模板)。
import type { Template, TinaField } from 'tinacms';
export const featuresTemplate: Template = {
label: '功能块',
name: 'featureBlock',
fields: [
{
name: 'featureItem',
label: '功能项',
type: 'object',
list: true,
ui {
itemProps: (item) => {
return { label: item?.headline };
},
},
fields: [
{ name: 'headline', label: '标题', type: 'string' },
{
name: 'description', label: '描述',
type: 'string', ui: { component: 'textarea' }
},
{
name: 'buttons',
label: '按钮',
list: true,
type: 'object',
ui: {
visualSelector: true,
itemProps: (item) => {
return { label: item?.label };
},
},
templates: [
actionsButtonTemplate as Template,
codeButtonTemplate as Template,
modalButtonTemplate as Template
],
},
] as TinaField[],
},
],
};

带默认值的字段

当向列表添加新项时,它将使用这些defaultItem值创建。

{
label: "推荐",
name: "testimonials",
type: "object",
list: true,
defaultItem: {
author: "Judith Black",
role: "CEO",
quote: "Lorem ipsum dol..."
}
fields: [
{
name: "author",
type: "string"
},
{
name: "role",
type: "string"
},
{
name: "quote",
type: "string"
ui: {
component: "textarea"
}
}
]
}

带有自定义引用键的字段

在此处设置templateKey会更改我们的保存数据,如下所示,其中定义模板的键已设置为"type"

{
name: "farm",
type: "object",
list: true,
templateKey: "type",
templates: [
{
name: "llama",
fields: [
{
name: "name",
type: "string",
},
],
},
{
name: "farmer",
fields: [
{
name: "name",
type: "string",
},
],
},
],
},
---
farm:
- name: Tina
type: llama
- name: Napoleon
type: farmer
---
上次编辑: March 26, 2025