静态博客生成器
实现一个静态博客生成的工具,本质上还是实现一个后端博客系统,唯一不同从数据库变成了 markdown
文件,原本读取数据库的操作,变成了读取本地 markdown
文件,后者通过 markdown
渲染工具转换成 html
然后插入到定义好的主题模板中去,最后导出 html
数据。
Markdown 数据
遍历一个定义好的文件夹,找出其中所有的 .md
文件,将文件名称作为网页地址后面的一部分 (slug)。此时已经有了 slug
和文章内容了,还需要一些诸如:标题、日期、分类、标签之类的参数。比如 hexo 采用了下面的格式来实现,然后通过正则获取到这部分的数据,最后解析成 JSON
数据:
title: Hello World
date: 2019-11-11
tags: []
categories: category
---
这样就实现了原本通过 select * from posts order by created desc
来获取到的所有文章内容。
路由
获取到文章内容和在主题或者全局设定好的布局配置之后,需要注册路由,将对应的数据展示出来,这样才可以在写主题、文章时实时预览前端的效果。
以 express 为例,文章部分的路由可以如下定义:
const app = express()
posts.forEach(row => {
app.get(`/${row.slug}`, (_, res) => {
res.render('post.ejs', {
title: row.title,
content: row.content,
date: row.date,
categories: row.categories,
tags: row.tags
})
})
})
模板
以 hexo
为例,hexo
采用了 ejs 这种模板,它可以实现循环、条件判断、引入其他模板等功能,这样我们可以主题将模板拆分到足够小的颗粒。
<%- include header.ejs %>
<h1><%= title %></h1>
<div><%= created %></div>
<div class="post">
<%- content %>
</div>
<%- include footer.ejs %>
中间件
我们虽然可以在每个路由下,通过 res.render
注入所有需要所有文章、网站配置、主题配置等数据。既然是重复的行为,可以使用中间件来实现,将所有数据绑定到 res.locals
上,就可以提供给 ejs
渲染输出。
// middware.js
module.exports = () => {
return (_, res, next) => {
res.locals = {}
next()
}
}
使用中间件也很简单:
// router.js
app.get('/', middware, (req, res) => {
})
静态页面
在完善了主题之后,只需要将路由中所有注册过的页面重新循环一遍,将 ejs
渲染成 html
保存成相应的文件即可,最后可以通过 CI 部署到指定的网站即可。
评论(14)
静态博客框架似乎原理都大同小异。
如果能把 vuepress 和这个结合起来就更完美了
这个很厉害啊
现在评论系统都不好用,基本不靠谱靠谱
您好,您的Hermit音乐播放器不更新了吗? 谢谢。
现在更新Wordpress后,新的编辑器里面找不到音乐按钮了,能麻烦大神更新一下吗? 谢谢您了,可付费,谢谢您了。
在浏览器极速模式下,封面加载不出来。 有的浏览器可以。用的本地封面,每一张我都是自己上传的。
如有需要可以使用 hermit-X
有可以浏览的示例吗?学习一下。
可以参考现在很成熟的 hexo hugo
牧风,请问还有mirana.和手机主题吗,我找不到了…能发我一份吗…小辣椒群主也没回复我信息……
百度一下什么都会有
你网站feed输出的文章地址不太对,缺少post字段
让我来改一改