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