有什么方法可以使用模板组件/页面通过 Gatsby 创建动态 slugs 吗？

Question

我对 Gatsby 还很陌生，我想知道我是否可以创建自定义路由（slugs）作为模板。用例是：

访问/articles/name-of-the-article路线
服务组件 Article.js 填充了使用 name-of-the-article slug 从 API（即 Strapi 无头 CMS）检索的信息。

Answer 1

是的，你可以。 Gatsby 有这方面的文档：Creating pages from data programmatically. You need to create page slugs: Creating slugs for pages. You need to add gatsby-source-strapi to your gatsby-config.js.

我对 Strapi 没有什么经验，所以您需要研究一下如何使用 Strapi 处理 slug 的创建。

示例代码：

gatsby-node.js

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;
  if (node.internal.type === "The Nodes as defined by Strapi") {
    const slug = createFilePath({ node, getNode, basePath: "The base paths as defined by Strapi" });
    createNodeField({ node, name: "slug", value: slug });
  }
};

exports.createPages = async function({ actions, graphql }) {
  const { data } = await graphql(`
{
  allStrapiArticle {
    edges {
      node {
        id
        title
        content
      }
    }
  }
}
  `)
  data.allMarkdownRemark.edges.forEach(edge => {
    const slug = edge.node.fields.slug
    actions.createPage({
      path: slug,
      component: require.resolve(`./src/templates/article-template.js`),
      context: { slug: slug },
    })
  })
}

Answer 2

经过一些调查，我发现使用 gatsby-plugin-create-client-paths 有一种更简单的方法。您需要做的就是使用 yarn 或 npm 安装它，然后在 gatsby-config.js 中添加这些：

{
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/articles/*`] },
},

这意味着每个像这样的请求 slug：/articles/the-slug 将请求 articles.js 页面并使用 Gatsby 提供的 Link，您可以通过 state 传递道具像这样的道具：

<Link to="/articles/the-slug" state={{ slug: "the-slug", ...etc }}>Anchor Text</Link>

这样，src/pages/articles.js就变成了前缀为/articles的slug的模板页面。

有什么方法可以使用模板组件/页面通过 Gatsby 创建动态 slugs 吗？

Is there any way to create dynamic slugs with Gatsby using a template component / page?

slug

reactjs

strapi

gatsby