我们的惊人标题非常惊人,但一个标题并不能构成一个网站。让我们稍微扩展一下模式,以便显示一些更有趣的内容。
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
,你会看到一个新字段神奇地出现在你的可视化编辑器中。太棒了!🙌 🎉