Loving Tina? us on GitHub0.0k

文档

学习

v.Latest
Documentation
一千个字...

在我们继续之前,让我们在页面上添加一张图片。每个人都喜欢图片!

1. 在我们的模式中添加另一个属性:

fields: [
{
type: "string",
name: "title",
label: "标题",
isTitle: true,
required: true,
},
{
type: "rich-text", // 资产阶级
name: "body",
label: "正文",
isBody: true,
required: true,
},
{
type: "image", // 画出一千个字
name: "beautifulImage",
label: "美丽的图片",
required: false,
}

2. 修改 app/awesome-content.tsx 组件以渲染我们的美丽图片。

const beautifulImage = pageData.data.my_first_collection.beautifulImage;
...
return (
<>
<h1>{amazingTitle}</h1>
<img src={beautifulImage ? beautifulImage : null} />
<TinaMarkdown content={incredibleBody} />
</>
);

3. 进入可视化编辑器 (http://localhost:3000/admin/index.html) 并惊叹于新的上传图片输入框! 🖼️

4. 选择一张美丽的图片来搭配我们惊人的标题和不可思议的正文(如果是羊驼图片会有加分哦)

默认情况下,TinaCMS 使用来自您存储库的图像存储

您也可以配置为使用外部媒体提供商。
上次编辑: March 28, 2025