使用Gatsby文件系统路由API生成Markdown页面失败求助

• 核对页面文件名格式
  确认你的页面文件名为{markdownRemark.frontmatter__slug}.tsx，重点是frontmatter和slug之间用双下划线__连接，单下划线会导致Gatsby无法识别路由变量。

• 验证页面组件的GraphQL查询
  文件系统路由API会自动把id作为页面上下文变量传入，而非slug，所以查询必须基于id来匹配数据。示例正确查询：

  query InterviewPageQuery($id: String!) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
        slug
        title
      }
      html
    }
  }
  

  如果你的查询用了slug变量，会因为上下文不匹配导致页面无法生成。

• 检查gatsby-config.js的插件配置
  确认gatsby-source-filesystem正确指向/src/content/interviews，且gatsby-transformer-remark已启用：

  module.exports = {
    plugins: [
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `interviews`,
          path: `${__dirname}/src/content/interviews/`,
        },
      },
      `gatsby-transformer-remark`,
    ],
  }
  

• 清理缓存后重新构建
  执行gatsby clean清除Gatsby的缓存文件，再运行gatsby develop。缓存残留可能导致路由规则不生效。

• 检查Markdown文件的frontmatter
  确保每个Markdown文件的slug字段格式合法，无空格或未转义的特殊字符：

  ---
  slug: "senior-engineer-interview"
  title: "资深工程师访谈"
  ---
  

  若slug包含特殊字符，必须用引号包裹。

• 查看开发终端日志
  启动开发服务后，留意终端输出的警告或错误信息，路由识别失败、查询语法错误等问题都会在这里给出提示。

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