没有 gatsby-node.js 的 Gatsby markdown 页面

问题描述 投票:0回答:2

gatsby 文档对于何时使用文件系统路由 API 使用页面以及何时使用带有 createPages 函数的 gatsby-node 文件有点令人困惑。

我正在尝试走仅使用文件系统路线的路线。如果我正确理解文档,您不会在模板文件夹中创建文件。相反,您可以在页面文件夹中创建一个根据某些变量命名的文件。

我在 /src/content/interviews 中有一些 markdown 文件。 Markdown 文件包含带有

slug
字段的 frontmatter。

在 gatsby-config 中,我的 Interviews 文件夹设置如下:

        {
            resolve: 'gatsby-source-filesystem',
            options: {
                "name": "interviews",
                "path": "./src/content/interviews/"
            },
            __key: "interviews"
        },
        'gatsby-transformer-remark',

然后我创建了一个名为

/src/pages/interviews/{markdownRemark.frontmatter__slug}.tsx

的页面

该页面有以下代码:

import React, {FC} from "react";
import {graphql} from "gatsby";

export const InterviewPage: FC<any> = ({data})=>{
    return <div>
        <h1>{data.frontmatter.title}</h1>
    </div>
}

const pageQuery = graphql`
  query($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
    }
  }
`

如果我在 GraphQL 测试器中运行此查询,我会看到我的文件:

query MyQuery {
  markdownRemark {
    wordCount {
      paragraphs
      sentences
      words
    }
    html
  }
}

但是,我看到 sitePage 集合中没有创建任何页面。由于某种原因,它们没有被拾取。

我不确定我做错了什么。从我在文档中看到的内容来看,我应该让一切正确,而无需尝试沿着 gatsby-node 路径走下去。有什么明显我遗漏的吗?

gatsby
2个回答
0
投票

我可以通过切换到 MDX 插件而不是使用

gatsby-transformer-remark
来解决这个问题。这是我现在配置的相关部分:

        {
            resolve: `gatsby-plugin-mdx`,
            options: {
                extensions: [`.mdx`, `.md`],
                gatsbyRemarkPlugins: [
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            maxWidth: 1000,
                            quality: 80,
                        },
                    },
                ],
            },
        },
        "gatsby-plugin-sharp",
        "gatsby-transformer-sharp",
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                "name": "content",
                "path": "./content"
            },
            __key: "interviews"
        },
        {
            resolve: `gatsby-plugin-page-creator`,
            options: {
                path: `./content`,
            },
        },

然后我的页面文件(

/src/pages/interviews/page.tsx
)看起来像这样:

const InterviewPage: FC<any> = (props, context) => {
    console.log(props)
    console.log(context)
    const data = props.data
    const first = data.allMdx.edges[1].node
    return <div>
        <h1>{first.frontmatter.title}</h1>
        <MDXProvider>{first.body}</MDXProvider>
    </div>
}

export default InterviewPage

export const pageQuery = graphql`
 query InterviewPageQuery {
  allMdx(filter: {frontmatter: {type: {eq: "interview"}}}) {
    edges {
      node {
        id
        frontmatter {
          date
          slug
          title
          type
        }
        tableOfContents
        body
      }
    }
  }
}
`

`

我还没弄清楚路径参数。但到目前为止这是有效的!不需要gastby-node.js 文件。


0
投票

文件系统路由中的DSL正在使用

{type_name}.{path_to_field}

应该是

/src/pages/interviews/{MarkdownRemark.frontmatter__slug}.tsx
而不是
/src/pages/interviews/{markdownRemark.frontmatter__slug}.tsx

© www.soinside.com 2019 - 2024. All rights reserved.