文档

学习

v.Latest

入门指南

配置TinaCMS

内容查询

TinaCloud

自托管

高级

新手入门系列

什么是新手入门系列？

1. 创建你的TinaCMS站点

2. 实时编辑功能

3. 内容模型

4. 网站构建体验

技术指南

什么是Markdown？

使用Tina作为网站构建器

运行时查询Tina内容

配置内容集合

框架专项指南

文档

学习

v.Latest

Documentation

对象字段

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

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

类型定义

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

REQUIRED

type

string

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

REQUIRED

name

string

供内部使用的字段名称。

fields

Field[]

要在对象中显示的字段。

templates

Template[]

要在对象中显示的模板。

当 list: true 时可用。

templatesKey

string

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

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

fields或templates中只能定义一个。

对象类型的概念化

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

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

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

可视选择器

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

要启用可视块选择器，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 }。
列表中的每个功能项都有一个唯一标签，由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

Reference Fields

产品

资源

文档

学习

文档

学习

ui

Reference Fields

Custom List Rendering

Join the Herd!