专栏首页大前端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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    前端大彬哥
  • 用 Gatsby 创建一个博客

    Gatsby 是一个令人难以置信的静态站点生成器,它允许使用React作为渲染引擎引擎来搭建一个静态站点,它真正具有现代web应用程序所期望的所有优点。它通过在...

    疯狂的技术宅
  • 你的博客用不着什么JavaScript框架

    今年年初,我终于决定将自己的网站从基于 PHP 的 CMS 移植到基于 JavaScript 的静态网站生成器(SSG)了。原因如下:

    深度学习与Python
  • 一杯茶的时间,上手 Gatsby 搭建个人博客

    我的博客最初是用 Github Pages 默认的 Jekyll[2] 框架,其使用的 Liquid[3] 模板引擎在使用上有诸多不便。

    一只图雀
  • SEO 在 SPA 站点中的实践

    观察基于 create-react-doc 搭建的文档站点, 发现网页代码光秃秃的一片(见下图)。这显然是单页应用 (SPA) 站点的通病 —— 不利于文档被搜...

    牧云云
  • 前端之变(三):变革与突破

    回到上一篇我讲的不变前端中,我在文章中明显的指出了,前端的变化会有一个分界线,在这个分界线之前,前端有一个最大的困境,就是:

    御剑
  • Vue.js最佳静态站点生成器对比

    在过去的几年中,Vue.js 已成为 Web 应用程序开发的流行选项。用户变多后,这个框架开始将触角伸向了静态站点生成,一个曾经由 React 统治的领域。

    winty
  • 如何利用机器学习和Gatsby.js创建假新闻网站​

    我们生活在一个真理不再是非黑即白的世界。在我们生活的世界里,媒体明白,影响人们的最佳方式不是通过逻辑,而是通过情感。他们明白我们人类不是通过有意识的思考和逻辑处...

    deephub
  • 9个不错的前端开源项目

    无论您是刚开始编程还是已经是一名经验丰富的开发人员,在这个行业中,学习新的概念和语言/框架是跟上快速变化的必要条件。

    前端迷
  • Gatsby 博客部署到腾讯云教程

    原文发表于:https://avenirzheng.net/blog/2020/deploying-gatsby-to-tencent-cloud/

    Avenir
  • 2019-Web开发技术指南和趋势

    HTML/CSS框架目前没有以前那么有意义, 但是我还是介意你选择一个学习(这里作者想隐射的应该是, 在jquery时代, HTML/CSS框架的学习是必须的)...

    用户1272076
  • 2019-Web开发技术指南和趋势

    HTML/CSS框架目前没有以前那么有意义, 但是我还是介意你选择一个学习(这里作者想隐射的应该是, 在jquery时代, HTML/CSS框架的学习是必须的)...

    grain先森
  • 【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比

    在本文中,您将看到三种最好的静态站点生成器的比较,它们的优点、缺点以及您应该使用它们的原因。

    首席架构师智库
  • JavaScript前端学习有哪些项目可以练习

    构建这个应用时,你将使用相对较新的Hooks API来提升你的React技能。示例项目利用了React组件、许多Hooks、一个外部api,当然还有一些CSS样...

    加米谷大数据
  • 2018 年前端开发五大趋势

    对于开发者而言,2017出奇的高效,不过2018年有望为IT领域带来更多发展。本文中,为了处理项目时紧跟潮流,我们会描述出每个前端编程人都需要关注的2018年J...

    我就是马云飞
  • 自学MVC看这里——全网最全ASP.NET MVC 教程汇总

    MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC。小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC...

    葡萄城控件
  • 技术前线:一文带你了解Jamstack

    本周,我和大家聊下Jamstack。Jamstack并非一个具体的技术,而是一个概念。

    御剑
  • 【玩转腾讯云】blueflyming.cn个人博客搭建

    本博客系统使用GatsbyJS构建,源码来自UnrealCPP,这里修改了部分功能。

    blueflyming
  • 还在为不想运动而发愁吗——一款开源免费的运动记录项目

    就拿跑步来说,许多人都是三分钟热度,根本坚持不下来。许多程序员在电脑面前一坐就是一整天,很少去锻炼、跑步。

    CharlesMa

扫码关注云+社区

领取腾讯云代金券