文档
学习
v.Latest
Documentation
可视化编辑设置
目录
当您定义一个集合时，TinaCMS为您提供一个全页面编辑器窗口来添加内容。
Tina在与React一起使用时还允许进行“可视化编辑”。这种设置允许您的网站和编辑器窗口并排显示，实时展示您的更改。
可视化编辑要求 – 在页面可以设置为可视化编辑之前，它首先需要使用Tina的数据获取。
用法
为了在编辑时更新页面，您需要重新水合页面数据。在React（或基于React的框架如NextJS）中，您可以使用useTina钩子为页面配置可视化编辑。
此钩子可以与代码中的内容区域关联，并在侧边栏中注册相应的字段以进行重新水合。
在生产环境中，此钩子将仅传递其初始数据值。
useTina应提供三个参数：
data：这是您从Tina API收到的GraphQL响应。
如果您使用Tina客户端函数进行数据获取，三个返回值可以直接插入到useTina钩子中。
示例
NextJS的可视化编辑
// ...import { useTina } from 'tinacms/dist/react';export default function Home(props) {// 通过"useTina"钩子传递我们的数据以使其可编辑const { data } = useTina({query: props.query,variables: props.variables,data: props.data,});// 注意我们的页面标题如何使用"data"，而不是原始的"props.data"。// 这确保了内容在编辑模式下会随着用户输入而更新return <h1>{data.page.title}</h1>;}export const getStaticProps = async () => {const pageResponse = await client.queries.page({ relativePath: 'home.mdx' });return {props: {data: pageResponse.data,query: pageResponse.query,variables: pageResponse.variables,},};};
使用指定表单的可视化编辑（实验性）
Tina的实验性按ID选择表单功能允许开发人员在页面上存在多个useTina钩子（或查询）时选择在可视化编辑侧边栏中显示哪个表单。默认情况下，使用第一个请求的查询来确定表单。然而，通过使用此功能，您可以确保在Tina侧边栏中使用特定表单——例如，与页面集合而不是全局配置相关联的表单。这在处理多个域时特别有用，因为您网站的不同部分或区域需要不同的表单配置。
工作原理
在初始化useTina钩子时，您可以传递一个名为experimental___selectFormByFormId()的实验性回调。此回调应返回一个唯一的表单标识符，告诉Tina在可视化编辑中应显示哪个文档的表单。
示例
export default function PageComponent(props: PageComponentProps) {const { data } = useTina({query: props.query,variables: props.variables,data: props.data,experimental___selectFormByFormId() {return `content/pages/${props.variables.relativePath}`;},});// ...组件代码的其余部分}
在上面的示例中，回调使用页面的relativePath生成一个表单ID，确保在侧边栏中使用适当的表单进行编辑。
