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

Posted 2023-03-08

【中文标题】gatsby.js - 高级入门 - 实现 2 个 url 前缀（站点的 2 个不同部分）？

【英文标题】：gatsby.js - advanced starter - Implement 2 url prefixes (2 different sections of site)?

【发布时间】：2019-03-02 19:20:54

【问题描述】：

看起来好像你把你的 jsx 文件放在大多数 gatsby starters 的“pages”文件夹中，url 遵循开箱即用的目录结构，所以你可以实现你需要的任何 url (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/ 文件夹中，即使在创建content/foo/post1.md、content/bar/post2.md 之后，我也无法弄清楚复制 foo/xxx、bar/xxx url 的布线文件夹。

它确实有一个siteconfig.js，它设置了一个路径前缀，但我想要两个为站点的2个不同部分设置不同的前缀，所以我只是设置现在它改为“/”（构建似乎忽略了我为此配置参数设置的任何值，所以......耸耸肩）。

我尝试了什么

我尝试将path 添加到.md 文件的frontmatter 并将其设置为父文件夹名称。这完全被忽略了（无论如何我认为这不是我想要的......我想将生成的 slug 保留为 url 的一部分）。 为每个子文件夹单独使用 gatsby-source-filesystem 一个，希望它会更改 graphql graph 以识别 2 个单独的数据源，但没有任何区别。

我做错了什么？

【参考方案1】：

看起来好像您将 jsx 文件放在大多数 gatsby 初学者的“页面”文件夹中，网址遵循开箱即用的目录结构 [...]

这并不特定于 Gatsby 初学者，这是 Gatsby 的默认行为。 src/pages 中的每个 js/jsx 文件都会是一个页面。

但在*** content/ 文件夹中

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

---

路径/url 在此处的createPage 函数中定义：gatsby-nodeL144。这一行引用了edge.node.fields.slug，它在here 上方的GraphQL 中被查询。该字段被添加到 onCreateNode 函数中。更具体地说，onCreateNodeField 函数中的 slug 字段。在那里你看到它通过了上面定义的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 并且感谢您提供了这个很棒的首发！

如何编辑它以在“/blog”而不是“/”生成页面？我设法通过编辑this line 将它们移动到“/blog”，在“/”之后添加“blog”，但这会在尝试导航到以前的博客页面时破坏导航（单击“previous”或“1”）跨度>