Gatsby + Contentful URL 结构问题

Question

我在使用 Gatsby + Contentful 设置正确的 URL 结构时遇到问题。

我的文件夹结构如下所示：

├── src
├── pages
├──── Learn (folder)
│    ├── index.js (contentful learn-template queries all pages)
│    ├── guides (folder)
├────└────
├─────────├── index.js (contentful guide-template queries all guides)

我正在使用 gatsby-node.js 通过 createPages:

查询我的内容页面

const path = require('path')

exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions
    const result = await graphql(`
  query GetContent {
page: allContentfulPages(filter: {node_locale: {eq: "en-US"}}) {
    nodes {
      slug
    }
  }
guides: allContentfulGuides(filter: {node_locale: {eq: "en-US"}}) {
    nodes {
      slug
    }
  }
}
  `)

    result.data.page.nodes.forEach(page => {
        createPage({
            path: `${page.slug}`,
            component: path.resolve(`src/pages/guides/index.js`),
            context: {
                slug: page.slug
            },
        })
    })

    result.data.guides.nodes.forEach(guides => {
        createPage({
            path: `${guides.slug}`,
            component: path.resolve(`src/pages/guides/index.js`),
            context: {
                slug: guides.slug
            },
        })
    })
}

我遇到的问题是 URL 看起来像这样：

http://localhost:8000/learn/{contenfulGuides}/

但是我想实现这个：

http://localhost:8000/{contentfulPages}/{contentfulGuides}/

我找遍了所有地方，但没有找到关于此的主题。

我想知道如何删除 URL 中的文件夹名称并粘贴内容丰富的页面 slug。

希望有人能帮助我指明正确的方向。

编辑：

我想有些人不明白我的意思，所以我会在这里更简单地解释一下。

我有 2 个内容模型，contentfulPages 和 contentfulSubPages。他们每个人都有多个页面和子页面。现在，如果我使用模板文件夹和 URL 上方的 gatsby-node.js 看起来像这样：

http://localhost:8000/{contentfulPages}/ http://localhost:8000/{contentfulSubPages}/

两个分开的 URL。但我想实现这个：

http://localhost:8000/{contentfulPages/contentfulSubPages}/

Answer 1

pages 下的文件在您的输出中被视为 1:1。也就是说，当您运行构建时，src/pages/about.js(x) 的文件将在 /about 生成一个页面。

当您想生成具有动态路径的页面时，最好将模板文件放在 templates 文件夹中，例如 src/templates/guide.js 并将该路径提供给 createPage 调用在 gatsby-node.js。然后，输出 slug 将匹配您传递给 createPage.

的 path 参数

Answer 2

要解决此问题，最好使用在 Gatsby 中创建页面的标准方法，使用 gatsby-node.js 可以让您更灵活地操作代码。

由于您的 contentfulPage 链接到 contentfulSubPages（一对多关系），您可以使用嵌套循环创建嵌套路由作为 GraphQL 查询的结果。类似于：

const path = require('path')

exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions
    const result = await graphql(`
    query GetContent {
     pages: allContentfulPages(filter: {node_locale: {eq: "en-US"}}) {
       nodes {
         slug
         allGuides{
           slug
         }
       }
     }
   }
  `)

    result.data.pages.nodes.forEach(page => {
        createPage({
            path: `${page.slug}`,
            component: path.resolve(`src/templates/page-template.js`),
            context: {
                slug: page.slug
            },
        })
      if(page.allGuides){
         page.allGuides.forEach(guide =>{
            createPage({
            path: `${page.slug}/${guide.slug}`,
            component: path.resolve(`src/templates/guide-template.js`),
            context: {
                slug: guide.slug
            },
        })}
      }
    })
}

注意：这是一个近似值，您可能需要稍微更改一下查询和 GraphQL 节点的属性。

首先需要遍历allContentfulPages（别名为pages），为每个节点创建一个页面。完成后，您可以检查该页面是否有子页面，在本例中为 allGuides，并进行嵌套循环以创建嵌套路径 (path: `${page.slug}/${guide.slug}` ).

您可以为所有内容模型推断相同的方法。

Gatsby + Contentful URL 结构问题

Gatsby + Contentful URL Structure Problems

reactjs

contentful

gatsby