graphql - gatsby.js - 高级入门 - 实现 2 个 url 前缀(站点的 2 个不同部分)？

Question

看起来好像如果你把你的 jsx 文件放在大多数 gatsby starters 的“pages”文件夹中，urls 遵循开箱即用的目录结构，所以你可以实现你需要的任何 urls ( http://blah.com/ foo /post1, 607x91 bar /post2) 只需在源树中嵌套文件夹( pages/foo/post.jsx 、 pages/bar/post2.jsx )。

问题

我使用了 gatsby 高级启动器 ( http://blah.com/ )。它将所有内容文件放在 pages/ 中，而是放在顶级 content/ 文件夹中，即使在创建 content/foo/post1.md 、 content/bar/post2.md 文件夹后，我也无法弄清楚复制 foo/xxx、bar/xxx url 的接线。

它确实有一个设置单个路径前缀的 siteconfig.js，但我想要 两个 不同的前缀用于站点的 2 个不同部分，所以我现在只是将它设置为“/”(构建似乎忽略了我的任何值无论如何设置这个配置参数，所以......耸耸肩)。

我试过的

我尝试将 path 添加到 .md 文件的前端并将其设置为父文件夹名称。这完全被忽略了(无论如何，我认为这不是我想要的......我想将生成的 slug 作为 url 的一部分)。

为每个子文件夹单独使用 gatsby-source-filesystem 一个，希望它会改变 graphql 图以识别 2 个单独的数据源，但没有任何区别。

我究竟做错了什么？

Answer 1

It looks as though if you put your jsx files in the 'pages' folder of most gatsby starters, the urls follow the directory structure out of the box [...]

这不是 Gatsby starters 特有的，这是 Gatsby 的默认行为。 src/pages 中的每个 js/jsx 文件将是一个页面。

but in a top-level content/ folder

它还有 src/pages普通页面的文件夹。但是 content文件夹保存的文件将被转换为 src/templates在 gatsby-node.js到页面。或者换句话说: content的内容使用 gatsby-node.js 中定义的模板以编程方式创建文件夹(模板位于 src/templates 中)。

路径/url get 定义在 createPage 中函数在这里: gatsby-nodeL144 .此行引用 edge.node.fields.slug在上面的 GraphQL 中查询 here .该字段被添加到 onCreateNode 中功能。更具体地说， slug onCreateNodeField 中的字段功能。在那里你看到它通过了 slug上面定义的。

在您的 src/content 中创建两个文件夹文件夹，例如 blog和 projects .确保您在 gatsby-config.js 中定义了它们。 :

{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'blog',
    path: `${__dirname}/content/blog`,
  },
},
{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'projects',
    path: `${__dirname}/content/projects`,
  },
},

在您的 gatsby-node.js在 fileNode 后面添加定义行:

const pathPrefix = fileNode.sourceInstanceName

sourceInstanceName就是我们定义的 name在 gatsby-config条目。

然后你可以修改 line到:

createNodeField({ node, name: "slug", value: `/${pathPrefix}${slug}` });
createNodeField({ node, name: 'sourceInstanceName', value: pathPrefix });

如果您只想查询两个文件夹之一，第二行会很有帮助，例如:

export const pageQuery = graphql`
  query BlogQuery {
    allMarkdownRemark(filter: { fields: { sourceInstanceName: { eq: "blog } } }
    ) {
        edges {
          node {
            ... etc
          }
        }
      }
  }
`