Gatsby + Kontent - 导航和面包屑
Gatsby + Kontent - navigation and breadcrumbs
更新
深入研究 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 和无头 CMS。
在使用 Gatsby 和 Kontent 尝试构建迁移的概念证明时，我对如何生成导航和面包屑感到困惑，我认为这是理所当然的传统 CMS 内容层次结构.
我阅读了一些文章并逐渐了解了使用内容类型构建导航的概念。
这如何从原本平坦的内容层次结构中整合并生成链接？
例如www.example.com/some/deep/linked/page
谢谢
我刚从传统的 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}` },
})
})
只要您的内容编辑器维护 slug，这就会起作用。如果您想根据菜单结构自动生成路径，您可以通过为内容项添加一个链接项来扩展导航项内容类型，或许可以代替 URL 字段。然后在创建节点时，您可以遍历导航树并根据项目标题构建路径，查找内容项目的类型，以便您可以使用适当的组件并将所需的上下文传递给它。
然后您可以在面包屑组件中使用相同的层次结构 - 您只需要在导航项中搜索当前项，然后返回到树中。有道理吗？
虽然一开始不得不构建所有这些基础设施可能会令人沮丧，但我喜欢完全的自由以及为项目的特定需求选择正确方法的能力。
更新
深入研究 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 和无头 CMS。
在使用 Gatsby 和 Kontent 尝试构建迁移的概念证明时，我对如何生成导航和面包屑感到困惑，我认为这是理所当然的传统 CMS 内容层次结构.
我阅读了一些文章并逐渐了解了使用内容类型构建导航的概念。
这如何从原本平坦的内容层次结构中整合并生成链接？
例如www.example.com/some/deep/linked/page
谢谢
我刚从传统的 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}` },
})
})
只要您的内容编辑器维护 slug，这就会起作用。如果您想根据菜单结构自动生成路径，您可以通过为内容项添加一个链接项来扩展导航项内容类型，或许可以代替 URL 字段。然后在创建节点时，您可以遍历导航树并根据项目标题构建路径，查找内容项目的类型，以便您可以使用适当的组件并将所需的上下文传递给它。
然后您可以在面包屑组件中使用相同的层次结构 - 您只需要在导航项中搜索当前项，然后返回到树中。有道理吗？
虽然一开始不得不构建所有这些基础设施可能会令人沮丧，但我喜欢完全的自由以及为项目的特定需求选择正确方法的能力。