gatsby.js - 高级初学者 - 实施 2 url 前缀（站点的 2 个不同部分）？

Question

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

问题

我使用了 gatsby 高级启动器 (https://github.com/Vagr9K/gatsby-advanced-starter)。它将所有内容文件不放在 pages/ 中，而是放在顶级 content/ 文件夹中，我无法弄清楚复制 foo/xxx、bar/xxx [=52] 的接线=]s 甚至在创建 content/foo/post1.md、content/bar/post2.md 个文件夹之后。

它确实有一个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 初学者特有的，这是 Gatsby 的默认行为。 src/pages 中的每个 js/jsx 个文件将是一个页面。

but in a top-level content/ folder

它仍然有用于普通页面的 src/pages 文件夹。但是 content 文件夹保存的文件将与 gatsby-node.js 中的 src/templates 一起转换为页面。或者换句话说：content 文件夹的内容是使用 gatsby-node.js 中定义的模板以编程方式创建的（模板位于 src/templates）。

path/url get 在此处的 createPage 函数中定义：gatsby-nodeL144. This line is referencing the edge.node.fields.slug which gets queried in the GraphQL above here. The field gets added in the onCreateNode function. More specificially the slug field in the 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就是我们在gatsby-config条目中定义的name。

然后您可以将 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
          }
        }
      }
  }
`

gatsby.js - 高级初学者 - 实施 2 url 前缀（站点的 2 个不同部分）？

gatsby.js - advanced starter - Implement 2 url prefixes (2 different sections of site)?

graphql

gatsby

问题

我试过的