跳转到内容
文档

在 Framer 中构建知识库布局

在成功将 Hinto AI 的知识库内容导入 Framer CMS 后，下一步就是构建用于展示这些内容的界面 (UI)。这一过程涉及创建 CMS 驱动的页面，并将 Framer 组件链接到你导入的“文章” (Articles) 和“文件夹” (Folders) 集合中。

创建页面结构

典型的文档网站至少需要两种页面类型。首先是主页面（例如 /docs），它包含整体布局，包括导航侧边栏和内容区域。其次是动态 CMS 页面（例如 /articles/[slug]），用作展示每篇单独文章内容的模板。

Documentation image

构建侧边栏导航

侧边栏提供了浏览知识库的导航功能。它应该列出所有文件夹（分类）以及嵌套在其中的文章。实现方法是创建一个文件夹列表，并在每个文件夹内嵌套对应的文章列表。

  • 文件夹列表：添加一个组件，用于显示来自 Folders 集合的项目。这将在侧边栏中创建主要分类标题。
  • 文章列表：在每个文件夹项目内，添加第二个组件，列出来自 Articles 集合的项目。此列表必须经过过滤，仅显示属于该父文件夹的文章。
Documentation image

过滤与排序导航

为确保正确的文章出现在对应的文件夹下，你必须设置过滤器。文章列表组件应进行过滤，条件是文章的“分类”(Category) 字段必须与当前文件夹的“标题”(Title) 相匹配。为了保持从 Hinto AI 导入时的原始顺序，两个列表都应按“排序索引”(Sort Index) 字段进行升序（从小到大）排列。

Documentation image

展示文章内容

在 CMS 页面主内容区域，你需要将组件链接到“文章”集合中的字段，以显示当前查看的文章信息。

  • 文章标题：添加一个文本元素，并将其内容设置为 Articles 集合中的 Title 变量。
  • 文章正文：添加另一个文本元素，并将其内容设置为 Content 变量。该变量包含文章的完整 HTML 正文，包括标题、段落、列表和图像。
Documentation image

构建布局的小贴士

  • 使用 Framer 的全局样式选项来定义 HTML 标签（H1, H2, P, A 等）的样式。这样你无需直接编辑内容，即可自定义导入内容的外观。
  • 请务必使用 Hinto AI 集成提供的 Sort Index 字段，以确保文件夹和文章按预期顺序显示。
  • 每篇文章的链接应设置为其对应的 CMS 页面。通常当你链接到 CMS 集合时，Framer 会自动处理这一点。

通过将 Framer 强大的布局工具与来自 Hinto AI CMS 集合的结构化内容相结合，你可以快速高效地构建并发布功能完备的专业知识库。