摘要：调整这个就简单了打开，增加代码如下这里是新增加的调整打开首页，点击页面跳转到对应的页面大功告成。总结到此，通过就快速的搭建了一个博客网站，我们只需书写文件就能生成对应的网页了。至于网页美化，那是切图的事儿，我就不在这里墨迹了。
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 (
{title}
{next&&Next}
{prev&&Prev}
)
}
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...
但是基础还是要会的，不然出错或者要根据你们公司需求改动功能，就没办法了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104461.html
摘要：安装插件我用就是因为它支持所以不墨迹，直接整支持。添加格式化文章在下面添加三篇文章，头部格式如下教程完整代码如图所示 1.安装插件 我用Gatsby就是因为它支持Markdown.所以不墨迹，直接整Md支持。 yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章 在src>page...
摘要：查数据注意，这里跟前面不一样了，我用这个文件去提供数据，没有什么为什么，规定，照做就好。很清晰明显，这里就说一点我传递了一个参数，到内容页。创建内容页模板在下创建这里只要对应的路径的那个文章查询 1.查数据 注意，这里跟前面不一样了，我用gatsby-node.js这个文件去提供数据，没有什么为什么，规定，照做就好。 const path = require(path); export...
摘要：查数据如图所示，套页面打开打开首页，看到文章列表就大功告成了。 1.查数据 { allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) { edges { node { frontmatter { title path ...
摘要：安装创建项目开发注意报错文件空格问题，最好不要用空格和中文。直接放在硬盘根目录下就不会有问题。打开，看到如下效果就成功了构建查看效果打开浏览器看到如下效果大功告成 1.安装 yarn global add gatsby-cli 2.创建gatsby项目 gatsby new blog 3.开发 gatsby develop 注意报错： error UNHANDLED EXCEPT...
摘要：什么是既是一种用于的查询语言也是一个满足你数据查询的运行时。嵌套将组件扔到下面的里面打开首页，看到网站的描述就大功告成了。 1.什么是GraphQL GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间...
