1.查数据
注重,这里跟前面不一样了,我用gatsby-node.js这个文件去供应数据,没有什么为何,划定,照做就好。
const path = require("path");
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions
const blogPostTemplate = path.resolve(`src/templates/blogPost.js`)
return graphql(`
{
allMarkdownRemark{
edges {
node {
frontmatter {
path,
title,
tags
}
}
}
}
}
`).then(result => {
if (result.errors) {
return Promise.reject(result.errors)
}
const posts = result.data.allMarkdownRemark.edges;
createTagPages(createPage, posts);
posts.forEach(({ node }, index) => {
const path = node.frontmatter.path;
const title = node.frontmatter.title;
createPage({
title,
path,
component: blogPostTemplate,
context: {
pathSlug: path
},
})
})
})
}
很清楚显著,这里就说一点我传递了一个参数,pathSlug到内容页。
2.建立内容页模板
在src>templates下建立blogPost.js
import React from "react"
import { graphql,Link } from 'gatsby'
const Template = ({ data, pageContext }) => {
const {next,prev} = pageContext;
const {markdownRemark} = data;
const title = markdownRemark.frontmatter.title;
const html = markdownRemark.html;
return (
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
}}>
<h1>{title}</h1>
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
)
}
export const query = graphql`
query($pathSlug: String!) {
markdownRemark(frontmatter: { path: { eq: $pathSlug } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
`
export default Template;
这里只需对应的途径的谁人文章查询
frontmatter: { path: { eq: $pathSlug } }