文档
学习
v.Latest
Documentation
渲染您的模板
在此页面上
现在我们已经完成了大部分的基础工作，最后一步是让 app/awesome-content.tsx 组件将块渲染到我们的视图中。
记住... 块的强大之处在于它使非开发人员能够决定页面上内容的显示顺序，因此我们不能再硬编码内容了。
检查我们获取的数据
导航到 app/awesome-content.tsx 并进行以下更改：
const awesomeTitle = pageData.data.my_first_collection.title;const incredibleBody = pageData.data.my_first_collection.body;const beautifulImage = pageData.data.my_first_collection.beautifulImage;const blocks = pageData.data.my_first_collection.blocks;console.log(blocks); // TODO: 稍后移除 🙃
我们现在不是提取特定的值，而是提取块的数组。
为了查看我们正在处理的内容，我们在组件中添加了一行 console.log，以便我们可以检查数据的结构。
为了更新我们的模板，我们想要：
- 遍历块
- 检查我们正在查看的块的类型
- 为该特定块渲染适当的HTML
我们可以通过几种方式来实现这一点，但现在我们将采用快速而简单的解决方案。
显示我们的数据
将 app/awesome-content.tsx 更改为以下内容：
//const awesomeTitle = pageData.data.my_first_collection.title;//const incredibleBody = pageData.data.my_first_collection.body;//const beautifulImage = pageData.data.my_first_collection.beautifulImage;const blocks = pageData.data.my_first_collection.blocks;console.log(blocks);return (<>{blocks?.map((block, index) => {switch (block.__typename) {case "My_first_collectionBlocksTitleBlock":return <h1 key={index}>{block.title}</h1>;case "My_first_collectionBlocksBodyBlock":return <TinaMarkdown key={index} content={block.body} />;case "My_first_collectionBlocksImageBlock":return <img key={index} src={block.image} />;}})}</>);
blocks数组的顺序由 Tina 保持，因此它尊重用户在通过可视化编辑器构建内容时选择的顺序，因此只需要一个简单的map+switch语句来渲染适当的 HTML 片段。
尝试使用可视化编辑器重新排序您的模板，甚至添加更多！您可以拥有任意多的每个模板实例！
