Gatsby中文章跨目录错误显示问题求助

方案1：通过Frontmatter类型字段过滤（直观易维护） #

给所有MDX文件的frontmatter添加类型标识，然后在模板的GraphQL查询中只筛选对应类型的内容：

1. 修改MDX文件的Frontmatter
   在blog/下的所有index.mdx中添加：

   ---
   slug: "blog1"
   type: "blog"
   # 其他字段...
   ---
   

   在projects/下的所有index.mdx中添加：

   ---
   slug: "project1"
   type: "project"
   # 其他字段...
   ---
   

2. 更新模板的GraphQL查询
   在src/pages/blog/{mdx.frontmatter___slug}.js的查询中添加过滤条件：

   query($id: String!) {
     mdx(id: { eq: $id }, frontmatter: { type: { eq: "blog" } }) {
       frontmatter {
         slug
         # 其他字段...
       }
       # 其他查询内容...
     }
   }
   

   同理，在src/pages/projects/{mdx.frontmatter___slug}.js中过滤type: "project"：

   query($id: String!) {
     mdx(id: { eq: $id }, frontmatter: { type: { eq: "project" } }) {
       frontmatter {
         slug
         # 其他字段...
       }
       # 其他查询内容...
     }
   }
   

这样模板只会生成对应类型的路由，不会出现交叉。

方案2：通过文件系统实例名过滤（无需修改MDX） #

利用gatsby-source-filesystem的sourceInstanceName区分不同目录的内容，无需修改任何MDX文件：

1. 配置gatsby-config.js
   修改文件系统源插件的配置，给blog和projects目录分别设置名称：

   module.exports = {
     plugins: [
       {
         resolve: `gatsby-source-filesystem`,
         options: {
           name: `blog`,
           path: `${__dirname}/blog/`,
         },
       },
       {
         resolve: `gatsby-source-filesystem`,
         options: {
           name: `projects`,
           path: `${__dirname}/projects/`,
         },
       },
       // 保留其他插件配置...
     ],
   }
   

2. 更新模板的GraphQL查询
   在blog模板中只查询来自blog实例的内容：

   query($id: String!) {
     mdx(id: { eq: $id }, sourceInstanceName: { eq: "blog" }) {
       frontmatter {
         slug
         # 其他字段...
       }
       # 其他查询内容...
     }
   }
   

   在projects模板中过滤sourceInstanceName: { eq: "projects" }即可。

这个方案更简洁，适合按目录严格区分内容的场景。

方案3：使用不同的Slug字段（可行但冗余） #

你提到的修改slug字段名的方法是可行的，但需要维护两套slug字段：

• 给projects下的MDX使用project_slug字段，比如：

  ---
  project_slug: "project1"
  # 其他字段...
  ---
  

• 将projects模板文件名改为{mdx.frontmatter___project_slug}.js，并在查询中使用project_slug。

但这个方案会增加字段维护的复杂度，不如前两个方案推荐。

注意事项 #

修改完成后，执行gatsby clean清除缓存，再重启开发服务器，确保新的查询规则生效。

内容的提问来源于stack exchange，提问作者GoodErnest64