在我们继续之前,让我们在页面上添加一张图片。每个人都喜欢图片!
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. 选择一张美丽的图片来搭配我们惊人的标题和不可思议的正文(如果是羊驼图片会有加分哦)