盖茨比创建页面
Gatsby Create Pages
我正在尝试创建一个 gatsby 站点,其中我有项目 posted,每个项目都有标签。我遵循了关于创建 gatsby 博客的基本教程,现在正在使用他们网站上记录的 gatsby 标签。在将变量名从路径更改为 slug 以避免保留字的过程中,我似乎搞砸了,因为我无法再创建 blogpost 页面,也无法创建标签页面。每个 post 都包含在一个以 post 标题命名的文件夹中,其中包含一个定义其内容、日期、标签等的 index.md 文件。
尝试运行 gatsby develop时输出如下错误,
错误 #11323
Your site's "gatsby-node.js" must set the page path when creating a page.
The page object passed to createPage:
{
"slug": "/an-example-post",
"component": "C:\Users\Monolith\Documents\programming\webdev\Gatsby-Portfolio\src\templates\post.js",
"context": {
"slug": "/an-example-post"
}
}
我的gatsby-node.js
const path = require('path');
exports.createPages = ({actions, graphql}) => {
const {createPage} = actions;
const postTemplate = path.resolve('src/templates/post.js');
const tagTemplate = path.resolve("src/templates/tags.js")
//const postTemplate = require.resolve('src/templates/post.js');
//const tagTemplate = require.resolve("src/templates/tags.js")
return graphql(`{
allMarkdownRemark{
edges{
node {
html
id
frontmatter{
slug
title
}
}
}
}
tagsGroup: allMarkdownRemark(limit: 2000) {
group(field: frontmatter___tags) {
fieldValue
}
}
}`)
.then(res => {
if(res.errors){
return Promise.reject(res.errors);
}
res.data.allMarkdownRemark.edges.forEach( ({node}) => {
createPage({
slug: node.frontmatter.slug,
component: postTemplate,
context: {
slug:node.frontmatter.slug
},
})
})
// Extract tag data from query
const tags = res.data.tagsGroup.group
// Make tag pages
tags.forEach(tag => {
createPage({
// path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
slug: `/tags/${(tag.fieldValue)}/`,
component: tagTemplate,
context: {
tag: tag.fieldValue,
},
})
})
})
}
如前所述,我担心路径变量是一个保留字可能是个问题,但我进一步使用它而不是省略它,所以现在它保留了下来。
示例post.js
import React from 'react';
import { graphql } from 'gatsby';
import Layout from "../components/layout"
export default function Template({data}) {
const {markdownRemark: post} = data;
return(
<Layout>
<div>
<h1 className="postTitle">{post.frontmatter.title}</h1>
<div className="tagGroup">
{post.frontmatter.tags.map((tag, index) => (
<div key={index}>
<h2 className = "tagStyle">{tag}</h2>
</div>
))}
</div>
<p>{post.frontmatter.description}</p>
<p>{post.frontmatter.date}</p>
{/* <h2 className="tagStyle">{post.frontmatter.tags + " "}</h2> */}
<div dangerouslySetInnerHTML={{__html: post.html}} />
</div>
</Layout>
)
}
export const postQuery = graphql`
#query BlogPostByPath($slug: String!) {
query($slug: String!) {
markdownRemark(frontmatter: { slug: {eq: $slug} }) {
html
frontmatter {
slug
title
description
date
tags
}
}
}
`
tags.js 与 gatsby 的默认设置非常相似,只是内容略有改动。这是我正在使用的 Graphql 查询。
Tags.propTypes = {
pageContext: PropTypes.shape({
tag: PropTypes.string.isRequired,
}),
data: PropTypes.shape({
allMarkdownRemark: PropTypes.shape({
totalCount: PropTypes.number.isRequired,
edges: PropTypes.arrayOf(
PropTypes.shape({
node: PropTypes.shape({
frontmatter: PropTypes.shape({
title: PropTypes.string.isRequired,
// slug: PropTypes.string.isRequired,
}),
fields: PropTypes.shape({
slug: PropTypes.string.isRequired,
}),
}),
}).isRequired
),
}),
}),
}
export default Tags
export const pageQuery = graphql`
query($tag: String) {
allMarkdownRemark(
limit: 2000
sort: { fields: [frontmatter___date], order: DESC }
filter: { frontmatter: { tags: { in: [$tag] } } }
) {
totalCount
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`
如果有人有任何信息可以帮助我指明正确的方向,我将不胜感激。我已经 运行 阅读 gatsby 的文档几个小时了,但尚未取得实质性进展。
您在您的上下文中传递 tag
但期望 slug
:
createPage({
slug: `/tags/${(tag.fieldValue)}/`,
component: tagTemplate,
context: {
tag: tag.fieldValue,
},
})
并且:
query($slug: String!) {}
上下文是一种将数据传递到组件模板以使用它来过滤数据的方法。理想情况下应该是一个唯一的参数(如 slug
、id
等)。这样,在您的 gatsby-node.js
中,您应该获取所有 post,通过上下文传递一个唯一字段,并在您的模板中使用该变量来获取每个 post 所需的所有数据.
此外,您必须为您的函数提供 path
,而不是 slug
。
您应该将 createPage
函数更改为:
createPage({
path: `/tags/${tag.fieldValue}/`,
component: tagTemplate,
context: {
slug: tag.fieldValue,
},
})
请记住,尽管命名不同,fieldValue
应该是一个 slug(或某种)。
我建议阅读 Gatsby 的教程:https://www.gatsbyjs.com/tutorial/part-seven/
我正在尝试创建一个 gatsby 站点,其中我有项目 posted,每个项目都有标签。我遵循了关于创建 gatsby 博客的基本教程,现在正在使用他们网站上记录的 gatsby 标签。在将变量名从路径更改为 slug 以避免保留字的过程中,我似乎搞砸了,因为我无法再创建 blogpost 页面,也无法创建标签页面。每个 post 都包含在一个以 post 标题命名的文件夹中,其中包含一个定义其内容、日期、标签等的 index.md 文件。
尝试运行 gatsby develop时输出如下错误,
错误 #11323
Your site's "gatsby-node.js" must set the page path when creating a page.
The page object passed to createPage:
{
"slug": "/an-example-post",
"component": "C:\Users\Monolith\Documents\programming\webdev\Gatsby-Portfolio\src\templates\post.js",
"context": {
"slug": "/an-example-post"
}
}
我的gatsby-node.js
const path = require('path');
exports.createPages = ({actions, graphql}) => {
const {createPage} = actions;
const postTemplate = path.resolve('src/templates/post.js');
const tagTemplate = path.resolve("src/templates/tags.js")
//const postTemplate = require.resolve('src/templates/post.js');
//const tagTemplate = require.resolve("src/templates/tags.js")
return graphql(`{
allMarkdownRemark{
edges{
node {
html
id
frontmatter{
slug
title
}
}
}
}
tagsGroup: allMarkdownRemark(limit: 2000) {
group(field: frontmatter___tags) {
fieldValue
}
}
}`)
.then(res => {
if(res.errors){
return Promise.reject(res.errors);
}
res.data.allMarkdownRemark.edges.forEach( ({node}) => {
createPage({
slug: node.frontmatter.slug,
component: postTemplate,
context: {
slug:node.frontmatter.slug
},
})
})
// Extract tag data from query
const tags = res.data.tagsGroup.group
// Make tag pages
tags.forEach(tag => {
createPage({
// path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
slug: `/tags/${(tag.fieldValue)}/`,
component: tagTemplate,
context: {
tag: tag.fieldValue,
},
})
})
})
}
如前所述,我担心路径变量是一个保留字可能是个问题,但我进一步使用它而不是省略它,所以现在它保留了下来。
示例post.js
import React from 'react';
import { graphql } from 'gatsby';
import Layout from "../components/layout"
export default function Template({data}) {
const {markdownRemark: post} = data;
return(
<Layout>
<div>
<h1 className="postTitle">{post.frontmatter.title}</h1>
<div className="tagGroup">
{post.frontmatter.tags.map((tag, index) => (
<div key={index}>
<h2 className = "tagStyle">{tag}</h2>
</div>
))}
</div>
<p>{post.frontmatter.description}</p>
<p>{post.frontmatter.date}</p>
{/* <h2 className="tagStyle">{post.frontmatter.tags + " "}</h2> */}
<div dangerouslySetInnerHTML={{__html: post.html}} />
</div>
</Layout>
)
}
export const postQuery = graphql`
#query BlogPostByPath($slug: String!) {
query($slug: String!) {
markdownRemark(frontmatter: { slug: {eq: $slug} }) {
html
frontmatter {
slug
title
description
date
tags
}
}
}
`
tags.js 与 gatsby 的默认设置非常相似,只是内容略有改动。这是我正在使用的 Graphql 查询。
Tags.propTypes = {
pageContext: PropTypes.shape({
tag: PropTypes.string.isRequired,
}),
data: PropTypes.shape({
allMarkdownRemark: PropTypes.shape({
totalCount: PropTypes.number.isRequired,
edges: PropTypes.arrayOf(
PropTypes.shape({
node: PropTypes.shape({
frontmatter: PropTypes.shape({
title: PropTypes.string.isRequired,
// slug: PropTypes.string.isRequired,
}),
fields: PropTypes.shape({
slug: PropTypes.string.isRequired,
}),
}),
}).isRequired
),
}),
}),
}
export default Tags
export const pageQuery = graphql`
query($tag: String) {
allMarkdownRemark(
limit: 2000
sort: { fields: [frontmatter___date], order: DESC }
filter: { frontmatter: { tags: { in: [$tag] } } }
) {
totalCount
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`
如果有人有任何信息可以帮助我指明正确的方向,我将不胜感激。我已经 运行 阅读 gatsby 的文档几个小时了,但尚未取得实质性进展。
您在您的上下文中传递 tag
但期望 slug
:
createPage({
slug: `/tags/${(tag.fieldValue)}/`,
component: tagTemplate,
context: {
tag: tag.fieldValue,
},
})
并且:
query($slug: String!) {}
上下文是一种将数据传递到组件模板以使用它来过滤数据的方法。理想情况下应该是一个唯一的参数(如 slug
、id
等)。这样,在您的 gatsby-node.js
中,您应该获取所有 post,通过上下文传递一个唯一字段,并在您的模板中使用该变量来获取每个 post 所需的所有数据.
此外,您必须为您的函数提供 path
,而不是 slug
。
您应该将 createPage
函数更改为:
createPage({
path: `/tags/${tag.fieldValue}/`,
component: tagTemplate,
context: {
slug: tag.fieldValue,
},
})
请记住,尽管命名不同,fieldValue
应该是一个 slug(或某种)。
我建议阅读 Gatsby 的教程:https://www.gatsbyjs.com/tutorial/part-seven/