专栏首页大前端666Gatsby入门指南—添加上一页下一页功能(完结篇)
原创

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Gatsby入门指南—添加博客内容页(4)

    注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。

    前端大彬哥
  • Gatsby入门指南—添加博客内容页(4)

    注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。

    前端大彬哥
  • Gatsby入门指南—添加上一页下一页功能(完结篇)

    到此,通过gatsby就快速的搭建了一个博客网站,我们只需书写markdown文件就能生成对应的网页了。至于网页美化,那是切图的事儿,我就不在这里墨迹了。

    前端大彬哥
  • Gatsby入门指南—添加博客内容页(4)

    注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。

    前端大彬哥
  • Gatsby入门指南—添加上一页下一页功能(完结篇)

    到此,通过gatsby就快速的搭建了一个博客网站,我们只需书写markdown文件就能生成对应的网页了。至于网页美化,那是切图的事儿,我就不在这里墨迹了。

    前端大彬哥
  • Gatsby入门指南—添加博客内容页(4)

    注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。

    前端大彬哥
  • const关键字总结

    被const修饰的变量是不能改变的 const修饰变量时,必须在声明变量的同时给出初始化(类中的const成员变量不一样)

    WindSun
  • 【面试宝典】C++中const关键字的用法

    对于刚毕业的应届生来说面试中经常被问到const关键字的用法,小编在这里为大家总结如下: 修饰常量 用const修饰的变量某种意义上就是常量,编译器会对它进行...

    程序员互动联盟
  • C++ const各种用法总结

    原文链接:https://www.toutiao.com/i6644404128439075332/

    Steve Wang
  • 吴锦华 / 明鑫 : 用户态文件系统 ( FUSE ) 框架分析和实战

    用户态文件系统(filesystem in userspace, 简称 FUSE),它能使用户在无需编辑和编译内核代码的情况下,创建用户自定义的文件系统。

    Linuxer

扫码关注云+社区

领取腾讯云代金券