Question

我对盖茨比很陌生，我想知道是否可以创建自定义路线（段）作为模板。用例将是：

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

Answer 1

可以。盖茨比（Gatsby）为此提供了文档：Creating pages from data programmatically。您需要创建页面标签：Creating slugs for pages。您需要将gatsby-source-strapi添加到gatsby-config.js中。

我对Strapi的经验很少，因此您需要进行一些研究，以了解如何使用Strapi处理弹头的创建。

示例代码：

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/*`] },
},

这意味着每个请求都像这样：/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为前缀的子弹的模板页面。

有什么方法可以使用模板组件/页面使用Gatsby创建动态子弹？

2 个答案: