渲染您的模板

现在我们已经完成了大部分的基础工作，最后一步是让 app/awesome-content.tsx 组件将块渲染到我们的视图中。

请记住... 块的强大之处在于它使非开发人员能够决定页面上内容显示的顺序，因此我们不能再硬编码内容。

检查我们获取的数据

导航到 app/awesome-content.tsx 并进行以下更改：

我们现在不是提取特定的值，而是提取块的数组。 为了查看我们正在处理的内容，我们在组件中添加了一行 console.log，以便检查数据的结构。

要更新我们的模板，我们需要：

• 遍历块
• 检查我们正在查看的块的类型
• 为该特定块渲染适当的HTML

我们可以通过几种方式来实现这一点，但现在我们将采用快速简单的解决方案。

显示我们的数据

将 app/awesome-content.tsx 更改为以下内容：

blocks 数组的顺序由 TinaCMS 保持，因此它尊重用户在通过可视化编辑器构建内容时选择的顺序，因此只需一个简单的 map + switch 语句即可渲染适当的HTML片段。

尝试使用可视化编辑器重新排序您的模板，甚至添加更多！您可以拥有任意多的每个模板实例！