Gatsby超速入門—ブログの内容ページを追加(4)

1986 ワード

web フロントフレーム javascript

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

はっきりしています.ここで一つのパラメータを伝達しました.
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 (

    
      {title}
      
    
  )
}

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

h 5ページはAndroidの携帯電話の端でソフトキーボードが弾いてページのレイアウトの解決方法を突くことができます.