navigation - Gatsby + Kontent - 导航和面包屑

Question

更新

深入研究 Gatsby 文档，我发现了一些潜在的解决方案:

• https://www.gatsbyjs.org/packages/gatsby-plugin-breadcrumb/#breadcrumb-props
• https://www.gatsbyjs.org/docs/creating-dynamic-navigation/#using-the-header-component-to-display-the-navigation

仍在修复 Kontent 中的内容类型并找出 GraphQL 位。

============

原件:

我正在从更传统的开箱即用 CMS 解决方案过渡到使用 JAMStack 和 headless CMS。

在与 Gatsby 和 Kontent 一起尝试构建迁移的概念验证时，我陷入了如何生成导航和面包屑的困境，我认为传统 CMS 内容层次结构是理所当然的。

我阅读了一些文章，并逐渐了解了使用内容类型构建导航的概念。

如何从扁平的内容层次结构中整合并生成链接？

例如www.example.com/some/deep/linked/page

谢谢

Answer 1

我刚刚从传统的 CMS 框架转向 Kontent，所以我知道您的感受!我想您已经阅读了 Kontent tutorial on navigation ？选项 C 为您提供传统的分层 CMS 内容树，其中包含导航项内容类型上的链接项。这使得菜单的构建变得足够容易。

在 Gatsby 中，我个人只是使​​用 URL slugs 作为要创建的页面的路径。这是在 gatsby-node.js 文件中完成的，您可以在其中使用 GraphQL 查询内容，然后创建如下节点:

_.each(result.data.allArticles.nodes, node => {
  createPage({
    path: `/articles/${node.elements.article_url_slug.value}/`,
    component: slash(articleTemplate),
    context: { slug: `${node.elements.article_url_slug.value}` },
  })
})

只要您的内容编辑者维护这些 slugs，这就会起作用。如果您想根据菜单结构自动生成路径，您可以通过为内容项添加链接项(也许可以代替 URL 字段)来扩展导航项内容类型。然后，在创建节点时，您可以循环浏览导航树，并根据项目标题构造一条路径，查找内容项目的类型，以便您可以使用适当的组件并向其传递所需的上下文。

然后，您可以在面包屑组件中使用相同的层次结构 - 您只需在导航项中搜索当前项，然后返回树。有道理吗？

虽然一开始必须构建所有这些基础设施可能会令人沮丧，但我喜欢完全的自由和根据项目的特定需求选择正确方法的能力。