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 } }