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 路径走下去。有什么明显我遗漏的吗?
我可以通过切换到 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 文件。
文件系统路由中的DSL正在使用
{type_name}.{path_to_field}
。
应该是
/src/pages/interviews/{MarkdownRemark.frontmatter__slug}.tsx
而不是/src/pages/interviews/{markdownRemark.frontmatter__slug}.tsx
。