Gatsby入門指南—添加上一頁下一頁功能（完結篇）

1.調整gatsby-node

這個就簡單了,打開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,
              //這裡是新增加的
              prev: index === 0 ? null : posts[index - 1].node,
              next: index === (posts.length - 1) ? null : posts[index + 1].node
            }, // additional data can be passed via context
          })
        })
      })
    }           

複制

2.調整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 }} />
          
          {next&&<Link to={next.frontmatter.path}>Next</Link>}
          {prev&&<Link to={prev.frontmatter.path}>Prev</Link>}
        </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;           

複制

打開首頁，點選頁面跳轉到對應的頁面大功告成。

總結：

到此，通過gatsby就快速的搭建了一個部落格網站，我們隻需書寫markdown檔案就能生成對應的網頁了。至于網頁美化，那是切圖的事兒，我就不在這裡墨迹了。

當然了你不想切圖可以使用各種現成的UI庫，比如antdesign。我的網站就是直接用的antdesign.

如果你覺得深入學習gatsby太麻煩，你可以直接用我寫好的模闆就行，

開源庫位址，直接克隆就可以用了：

https://github.com/leolau2012/gatsby-teach

但是基礎還是要會的，不然出錯或者要根據你們公司需求改動功能，就沒辦法了。