文档

学习

v.Latest

入门指南

配置TinaCMS

内容查询

TinaCloud

自托管

高级

新手入门系列

什么是新手入门系列？

1. 创建你的TinaCMS站点

2. 实时编辑功能

3. 内容模型

4. 网站构建体验

技术指南

什么是Markdown？

使用Tina作为网站构建器

运行时查询Tina内容

配置内容集合

框架专项指南

文档

学习

v.Latest

Documentation

点击编辑API

Tina的“点击编辑”功能允许编辑者选择他们想要点击的HTML元素，以便在侧边栏中查看相应的字段。

我们可以通过data-tina-field API来实现这一点。

[data-tina-field]必须应用于HTML元素，而不是像TinaMarkdown这样的React组件。

API参考

REQUIRED

object

包含您正在访问的字段的对象。

property

string

您正在访问的对象中的属性，省略此项将返回对象字段的元数据。

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

注意: object属性只需要包含您尝试访问的字段的最近祖先。

基本用法

// components/blocks/hero
import { tinaField } from 'tinacms/dist/react';

export const HeroComponent = (props) => {
  return (
    <div>
      <h4 data-tina-field={tinaField(props, 'heading')}>{props.heading}</h4>
      <p data-tina-field={tinaField(props, 'message')}>{props.message}</p>
      <ul data-tina-field={tinaField(props, 'links')}>
        {props.links.map((link) => (
          <li>
            <a data-tina-field={tinaField(link)} href={link.url}>
              {link.label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

自定义组件和[data-tina-field]

React组件不能接受像data-tina-field这样的任意HTML属性。为了解决这个问题，定义一个属性（例如tinaField）并将其传递给组件内部的HTML元素：

const Section = ({ children, tinaField }) => {
  return <section data-tina-field={tinaField}>{children}</section>;
};

<Section tinaField={tinaField(data, 'body')}>
  <TinaMarkdown content={data.body} />
</Section>

TinaMarkdown和tinaField

当使用TinaMarkdown与自定义组件时，传递给每个组件的props对象已经包含了_content_source元数据。这个元数据通过Tina的useTina钩子在编辑模式下自动注入。

要使组件可编辑，您只需将props对象直接传递给tinaField助手：

<div data-tina-field={tinaField(props)}>
  <MyComponent {...props} />
</div>

这链接到TinaCMS内部的模板组件，但不针对特定字段。

如果您想要针对组件内的特定字段。例如，仅针对format属性而不是整个块。使用tinaField的第二个参数来指定字段名称：

<div data-tina-field={tinaField(props, 'format')}>
  Format: {props.format}
</div>

这为Tina提供了一个更精确的字段映射，基于您在集合中定义的模板定义。

示例：在TinaMarkdown中使用tinaField

这是一个稍微高级一点的示例，展示了如何使用tinaField在富文本内容中暴露字段，甚至在自定义组件内：

import { useTina, tinaField } from 'tinacms/dist/react';
import { TinaMarkdown } from 'tinacms/dist/rich-text';

export default function Post(props) {
  const { data } = useTina({
    query: props.query,
    variables: props.variables,
    data: props.data,
  });

  return (
    <div data-tina-field={tinaField(data.post, 'body')}>
      <TinaMarkdown
        content={data.post.body}
        components={{
          DateTime: (props) => {
            return (
              <div data-tina-field={tinaField(props)}>
                <TestComp {...props} />
              </div>
            );
          },
        }}
      />
      <code>
        <pre>{JSON.stringify(data.post, null, 2)}</pre>
      </code>
    </div>
  );
}

const TestComp = (props) => {
  return (
    <>
      <div data-tina-field={tinaField(props, 'format')}>
        Date Time Format: {props.format}
      </div>
      <div data-tina-field={tinaField(props, 'stringTest')}>
        <TinaMarkdown content={props.stringTest} />
      </div>
    </>
  );
};

这样编辑者可以点击自定义组件内的任何嵌套字段，并直接跳转到该模板字段。

元数据结构

当Tina处于编辑模式时，它会为每个可编辑字段增强数据的元数据。例如，一个富文本模板字段可能看起来像：

{
  "type": "root",
    "children": [
      {
        "type": "DateTime",
        "format": "MMM yyyy",
        "stringTest": "...",
        "_content_source": { // 元数据
          "queryId": "6rix9",
          "path": [
            "post",
            "body",
            "children",
            0
          ]
        }
      }
    ]
}

tinaField助手读取这个_content_source元数据，以构建正确的路径，使编辑器UI能够将字段与表单连接。

样式化可视化编辑界面

当编辑模式激活时，Tina会自动为任何[data-tina-field]元素应用轮廓。

如果需要，您可以覆盖这些样式：

.__tina-quick-editing-enabled [data-tina-field] {
  outline: 2px dashed rgba(254, 34, 56, 0.5);
}
.__tina-quick-editing-enabled [data-tina-field]:hover {
  outline: 2px dashed rgba(254, 34, 56, 1);
}