object
字段是一种动态字段类型,它使用其包含的数据在CMS中创建一个嵌套页面。
这可以用于创建重复的数据结构或在CMS中分组相关数据。
有关所有字段类型通用的附加属性,请参阅字段类型定义。
将此设置为 "object"
以使用对象字段。
供内部使用的字段名称。
要在对象中显示的字段。
要在对象中显示的模板。
当 list: true 时可用。
为模板选择一个不同的引用键。
All properties marked as REQUIRED must be specified for the field to work properly.
fields
或templates
中只能定义一个。
重要的是,有两种关键方式使用对象类型...
fields
时,对象将其内部字段包装在一个子窗口中。如上所示,但按下+
时,您可以选择一组选项之一。
此可视块选择器允许编辑者选择带有图像和文本的模板。
要启用可视块选择器,visualSelector
属性必须为true。在编辑器中,这还会打开一个新窗口以选择模板。
要为某个模板获取图像,您需要通过模板的ui.previewSrc
属性提供图像。这是一个URL,或相对于您的TinaCMS配置中定义的公共文件夹。
const showcaseTemplate: Template = {label: '展示',name: 'showcase',ui: {previewSrc: '/img/blocks/features.png',},fields: [//...],};
默认情况下,对象列表使用模板的label
或对象的label
+ " Item"
为每个元素标记。
如果列表中有多个对象,可以通过itemProps
函数属性为每个元素自定义标签。
fields
,在对象上设置此属性templates
,在每个模板上设置此属性使用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 }
。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: Tinatype: llama- name: Napoleontype: farmer---