Gatsby极速入门添加博客内容页4

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