1. webstack前端栈首页
  2. 经验/观点

使用 Gatsby.js 搭建静态博客 1 关键文件

静态博客之前也有搭建过,不过使用 Hexo 一键生成的,其实当时也有考虑过 Gatsby,不过这个框架搭建博客入门还是比较难的,前置知识点包括 react 和 graphQL。


原文地址:https://ssshooter.com/2018-12…

静态博客之前也有搭建过,不过使用 Hexo 一键生成的,其实当时也有考虑过 Gatsby,不过这个框架搭建博客入门还是比较难的,前置知识点包括 react 和 graphQL。

这个系列的文章记录的就是这个博客搭建中需要注意的点。

此博客使用 gatsby-starter-blog 作为框架,后续自己添加功能。

在安装 gatsby cli 后运行此指令即可以 gatsby-starter-blog 为模板创建博客。

gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

项目创建后文件夹结构基本如下(有区别是因为这是我搭建好的截图,也有可能是 starter 的版本升级)

使用 Gatsby.js 搭建静态博客 1 关键文件

其中最为重要的是 gatsby-node.js/src/templates/blog-post.js 以及 gatsby-config.js

gatsby-node.js

页面创建逻辑大部分都在 gatsby-node.js,打开文件可以看到类似代码:

// 页面创建函数 exports.createPages = ({ graphql, actions }) => {   const { createPage } = actions    return new Promise((resolve, reject) => {     const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)     // 查询 md 文件构建页面     // 此处查询使用的是 graphql,这也是 Gatsby 入门门槛较高的原因之一     // 不过其实这是一个比 sql 更容易理解的查询语言     resolve(       graphql(         `           {             allMarkdownRemark(limit: 1000) {               edges {                 node {                   frontmatter {                     path                   }                 }               }             }           }         `       ).then(result => {         if (result.errors) {           reject(result.errors)         }          // 遍历查询结果生成页面         result.data.allMarkdownRemark.edges.forEach(({ node }) => {           const path = node.frontmatter.path           // 生成单个页面的函数           createPage({             path, // 页面路径             component: blogPostTemplate, // 页面使用的模板             // 这是注入上下文变量,注入后可以在模板页面中使用变量             // 变量可以使用于 graphql 查询和 jsx 编写             context: {               path,             },           })         })       })     )   }) }

/src/templates/blog-post.js

此处只是一个举例,其他模板文件和页面文件的结构都类似,所以这里使用 /src/templates/blog-post.js 说明文件结构。(另外放在 /src/pages/ 的 js 文件都是会转换为页面的)

这类文件两部分:

第一部分:export default BlogPostTemplate

这是页面视图的组件,跟普通 jsx 一样,不过上面有说到:createPage 函数是可以注入参数到模板文件的。

而这些参数就在 this.props.pageContext 中。

另外,下面将会提到的页面查询函数所得的数据在 this.props.data

第二部分:export const pageQuery

// 注意其中 $slug,这也是被页面创建函数注入的上下文变量,没有前缀,直接使用即可 export const pageQuery = graphql`    query BlogPostBySlug($slug: String!) {     site {       siteMetadata {         title         author       }     }     markdownRemark(fields: { slug: { eq: $slug } }) {       id       excerpt       html       frontmatter {         title         tags         date(formatString: "MMMM DD, YYYY")       }     }   } `

查询函数大概长这样,简单来说 graphql 就是把你需要的数据填入你的请求,然后返回给你,光说不易理解,自己玩一把就能立刻明白!

更方便的是,在项目开发环境运行后,还会自带一个 graphql 查询页面:http://localhost:8000/___graphql

使用 Gatsby.js 搭建静态博客 1 关键文件

一定要注意右上角是自带文档的!遇到数据结构懵逼的时候,在文档查一下就 ok 啦(你甚至可以 ctrl 点击 query 中的字段名直接跳转到对应文档,实在方便得不能再方便了,好评!)

页面中的查询函数返回的结果会注入到 this.props.data,跟普通属性一样照常使用即可。

gatsby-config.js

gatsby-config.js 看名字就知道这是 Gatsby 的配置文件。使用 starter 建立项目已经自带了不少插件,但在我的搭建过程中仍然有一些需要自己添加的。

这里是 Gatsby 的插件库,遇到什么需求可以优先在此处搜索。

总结

结合这三个重要文件,便是 Gatsby 的应用结构:

读取设置和插件 -> 调用创建页面前查询所需资源 -> 创建页面,把查询到的参数注入到模板 -> 进行模板本身的查询 -> 填入数据 -> 成功生成一个页面

整个流程大部分都是使用循环生成所有页面。

此系列下一篇将会是分页相关的详细说明,这是我初始化之后第一个加上的功能(是的, starter 是不带分页的…)。

参考链接:
https://www.gatsbyjs.org/docs…
https://www.gatsbyjs.org/docs…

原创文章,作者:webstack,如若转载,请注明出处:https://www.webstacks.cn/experience/1838.html

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:webstacks@163.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code