使用 TinaCMS 作为网站构建器

TinaCMS 支持基于块的编辑，因此您的编辑者可以使用您预定义的块（即 页面部分）构建完整的页面。

假设您希望编辑者构建一个页面，并且您有 3 种主要的“块”类型可以开始：

• 一个“英雄”块
• 一个“功能”块
• 一个“主要内容”块

我们希望允许编辑者在每个页面上使用各种块。

定义我们的模式

我们将使用 object 类型，并提供一个 templates 列表，其中每个“模板”代表一个独特的块类型。

我们已经定义了 3 个块（content、features、hero）的结构，以及我们的主要块字段：blocks。

查询块数据

因为块列表中的每个项目可以有一个独特的模式，所以查询这些数据不像其他类型的字段那么简单。我们需要使用 GraphQL 的片段语法来查询每种块类型的适当数据形状。

片段名称是根据集合名称和父字段名称自动生成的。例如，如果集合是 pages，字段是 blocks，块的名称是 hero，则片段将命名为 PagesBlocksHero。

有关如何使用 TinaCMS 的 GraphQL API 查询数据的更多信息，请查看 查询文档

渲染我们的块

我们可以通过创建一个新的 Blocks 组件来渲染页面上的块，该组件将在 switch 语句中有条件地渲染每种块类型。

注意，每个块上的 __typename 是 {CollectionName}{FieldName}{BlockTemplateName}。

在我们的例子中：

• CollectionName: "Pages"
• FieldName: "Blocks"
• BlockTemplateName: "Content" | "Hero" | "Features"

添加可视化块选择器（实验性）

这是一个实验性功能，API 可能会发生变化。有任何想法吗？请在聊天中告诉我们，或者通过我们的社区渠道之一联系我们

这个可视化块选择器允许编辑者从一组图像中选择块，而不是文本。

首先，要启用可视化块选择器，必须在 UI 键中将 visualSelector 属性设置为 true。

要设置块选择器，必须为您希望预览图像的每个块提供预览图像。每个块的基本结构如下所示。

previewSrc 是将在可视化选择器中渲染的图像 URL。如果没有提供预览，块仍然可以通过点击标题来使用，只是不会显示预览图像。

可选地 可以提供一个 category，允许块分组到不同的类别中。

视频教程

对于那些更喜欢从视频中学习的人，可以查看我们 "TinaCMS 深入探讨" 系列中的“设置块”片段。