时间戳

首页 > 解决方案 > 使用 File System Route API 花括号以编程方式创建页面时，Gatsby 静态 HTML 构建错误

gatsby - 使用 File System Route API 花括号以编程方式创建页面时，Gatsby 静态 HTML 构建错误

问题描述

运行时收到以下错误gatsby build（gatsby develop工作正常）：

ERROR #95313 
Building static HTML failed for path "/services/blog-post-1/"

这是我网站的结构：

- pages
  - blog
   - {mdx.slug}.js
  - services
   - {mdx.slug}.js

看来 gatsby 正在尝试使用我的/services/{mdx.slug}.js模板构建我的博客文章降价文件之一。

我的 gatsby-config.js 看起来像这样：

    {
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/blog`,
    name: `blog`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/services`,
    name: `services`,
  },
},
{
  resolve: `gatsby-plugin-mdx`,
  ...

这些是每个 {mdx.slug}.js 文件中的查询：

服务：

export const query = graphql`
  query ($id: String) {
    site {
      siteMetadata {
        title
        author
      }
     }
    mdx(id: {eq: $id}) {
      frontmatter {
        title
...

博文：

export const pageQuery = graphql`
  query BlogPostById($id: String) {
    site {
      siteMetadata {
        title
        author
      }
    }
    mdx(id: {eq: $id}) {
      id
      excerpt(pruneLength: 160)
...

正如我所说，该网站可以正常使用gatsby develop，但gatsby build会引发此错误。

任何想法将不胜感激。

标签： gatsby

解决方案

尽管谷歌搜索很多，但我可以解决这个问题的唯一方法是恢复使用Gatbsy Node APIcreatePages扩展。

我是怎么做到的：

  1. 将我的旧 {mdx.slug}.js 文件移动到并分别/src/templates/重命名它们。service.jsblog-post.js

  2. 更新我的gatsby-node.js文件看起来像这样

  3. services将我的和blog-post模板中的查询更新为：

    export const pageQuery = graphql`
query BlogPostById($slug: String!) {
    site {
         siteMetadata {
    title
    author
  }
}
mdx(slug: {eq: $slug}) {
  excerpt(pruneLength: 160)
  body
  frontmatter {
    title
    date(formatString: "MMMM DD, YYYY")
    description
    image {
      relativePath
      childImageSharp {
        gatsbyImageData(
          width: 1200
          height: 675 
          placeholder: BLURRED
        )
      }
    }
  }
}`

推荐阅读