Loving Tina? us on GitHub0.0k

文档

学习

v.Latest
Documentation
我们的新字段

我们的惊人标题非常惊人,但一个标题并不能构成一个网站。让我们稍微扩展一下模式,以便显示一些更有趣的内容。

1. 编辑 tina/config.ts,并在 my_first_collection 模式中添加一个新字段。

schema: {
collections: [
{
name: "my_first_collection",
label: "我的第一个集合",
path: "content/first",
fields: [
{
type: "string",
name: "title",
label: "标题",
isTitle: true,
required: true,
},
// 👇 新字段! 👇
{
type: "string",
name: "body",
label: "正文",
isBody: true, // <--- 新属性!
required: true
}
],
ui: {
router: ({ document }) => {
if (document._sys.filename == "Hello-World") {
return "/";
}
},
},
}
],
},

2. 现在,为了做一些不同的事情,继续在你的IDE中直接编辑 Hello-World.md 文件。

3. 向markdown文件的正文添加一些文本,如下所示:

---
title: 你好,世界!看看我惊人的标题!
---
看看我不可思议的正文 🦙
isBody 属性正如其名 - 它告诉 Tina 这个属性是markdown内容的“正文”(即,在前置元数据中)。

4. 编辑 app/awesome-content.tsx 组件以渲染正文内容:

"use client";
import { useTina } from "tinacms/dist/react";
export default function AwesomeContent({data}) {
const pageData = useTina({
data: data.data,
query: data.query,
variables: data.variables,
});
const amazingTitle = pageData.data.my_first_collection.title;
const incredibleBody = pageData.data.my_first_collection.body;
return (
<>
<h1>{amazingTitle}</h1>
<p>{incredibleBody}</p>
</>
);
}

5. 启动你的应用,导航到 http://localhost:3000,你将看到屏幕上显示了你不可思议的正文。

那编辑呢?试着访问 http://localhost:3000/admin/index.html,你会看到一个新字段神奇地出现在你的可视化编辑器中。太棒了!🙌 🎉

上次编辑: March 28, 2025