仅显示字段

Loading last updated info...

在此页面上

displayOnly字段在编辑器表单中渲染UI，而不存储任何数据。使用它可以在编辑者填写字段时显示说明、上下文帮助、文档链接或警告。

由于没有任何内容被持久化，displayOnly字段不会出现在你的内容文件或GraphQL模式中……它们纯粹是为了塑造编辑体验而存在。

类型定义

有关所有字段类型通用的其他属性，请查看字段类型定义。

REQUIRED

type

string

将此设置为"displayOnly"以使用仅显示字段。

REQUIRED

name

string

供内部使用的字段名称。必须在集合中仍然是唯一的。

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

仅显示字段仅用于展示，因此list、required和indexed不支持此字段类型。label会被静默忽略——组件处理所有渲染。

示例

信息框（内置助手）

Tina提供了一个InfoBox助手，用于显示简短消息，选择性地带有链接。从tinacms中导入它并将其作为ui.component传递。

import { InfoBox } from 'tinacms';

{
  type: 'displayOnly',
  name: 'authorGuidelines',
  ui: {
    component: InfoBox({
      message: '将作者简介保持在280个字符以内——它们会出现在文章页脚。',
    }),
  },
}

作者表单中在简介字段上方的InfoBox提醒

Figure: 作者表单中在简介字段上方的InfoBox提醒

带链接的信息框

InfoBox接受一个可选的links数组，以便编辑者可以直接跳转到相关文档或风格指南。

import { InfoBox } from 'tinacms';

{
  type: 'displayOnly',
  name: 'imageHelp',
  ui: {
    component: InfoBox({
      message: '主图必须至少1600px宽，并使用批准的主题。',
      links: [
        { text: '图像风格指南', url: 'https://example.com/style/images' },
        { text: '批准的图库', url: 'https://example.com/stock' },
      ],
    }),
  },
}

博客文章表单中在主图字段上方显示图像指南和两个链接的InfoBox

Figure: 博客文章表单中在主图字段上方显示图像指南和两个链接的InfoBox

自定义组件

对于超出消息+链接的内容，传递你自己的React组件。仅显示组件不接收input值……它们纯粹是展示性的。

import type { FC } from 'react';

const SeoChecklist: FC = () => (
  <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm">
    <strong>发布前：</strong>
    <ul className="list-disc pl-5 mt-1">
      <li>填写元描述</li>
      <li>添加至少一个内部链接</li>
      <li>确认主图有替代文本</li>
    </ul>
  </div>
);

{
  type: 'displayOnly',
  name: 'seoChecklist',
  ui: {
    component: SeoChecklist,
  },
}