Gatsby极速入门添加上一页下一页功能完结篇

jiezi

6 年前

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…

但是基础还是要会的，不然出错或者要根据你们公司需求改动功能，就没办法了。

总结