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}/

两个分开的网址。但我想实现这一点：

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

Answer 1

要解决此问题，最好使用在 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}` )。

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

Answer 2

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

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