开学力,一个暑假玩单片机,跟着前辈做网站,好像没做什么就这么过去了~_~
介于自制的blog过于丑陋和抽象,而且发现世界上居然有框架这样方便的东西,于是花了一个上午完全搞定了自建站到hexo的迁移
原站情况
最开始的方案是用md写博客然后用apache的pythoncgi动态后端,但是由于希望在nojs的情况下完成数学公式和代码高亮的渲染所以在后端提前渲染好页面再输出。但是此时动态后端的唯一用途就成了排序和输出后台的html文件,这就很蠢了,所以计划是直接写一个静态网站生成器,和动态后端说拜拜。但是那段时间正好接触了网站框架这种东西,所有决定搞一个框架而不是自己写 (绝对不是因为我懒奥,如果我顺着原来的方案用pyhton写的话估计够呛)
hexo建站记录
首先安装hexo的生成器,并生成工作目录
1 | pnpm i hexo-cli -g |
hexo的基本目录结构
public下是生成的静态网站目录
source下是资源,包括图片,md文件,页面
themes下是主题文件
_config.yml是全局配置文件
scaffolds下是模板文件,用于生成html文件
新建页面
hexo非常方便,用
1 | hexo new [scaffold] [title] |
即可按照模板生成页面,然后修改页面即可,不同的主题可能有不同的page,可以自行创建修改
生成
hexo生成只需要
1 | hexo g |
即可
hexo使用主题
我这里用的是Hacker主题,一是好看简单,二是貌似没用js当真不用吗,在_config.yml里改
1 | theme: Hacker |
如果有需要也可以对主题文件进行更改定制
一键部署
这是很好的功能,把生成网页和显示网页完全分开来了,我这里使用的是rsync的部署方式,原因有二:
- 其他需要额外搭建服务器的方式太烦了,而且没必要,但是rsync只要有ssh就行了
- sftp不支持我正在用的密钥
值得一提的是如果不用密钥登陆ssh而是用密码那么用sftp方式,rsync不支持密码登陆
首先安装
1 | pnpm install hexo-deployer-rsync |
然后进行配置
1 | #_config.yml |
toc目录
hexo的辅助函数提供了一些功能,比如toc
toc
解析内容中的标题标签 (h1~h6) 并插入目录。
<%- toc(str, [options]) %>
参数 描述 默认值 class Class 名称 toc class_item (+6.3.0) 目录元素的 Class 名称 ${class}-item class_link (+6.3.0) 目录内链接的 Class 名称 ${class}-link class_text (+6.3.0) 目录链接内文本的 Class 名称 ${class}-text class_child (+6.3.0) 目录内子列表的 Class 名称 ${class}-child class_number (+6.3.0) 目录序号的 Class 名称 ${class}-number class_level 目录层级的 Class 名称前缀 ${class}-level list_number 显示编号 true max_depth 生成 TOC 的最大深度 6 min_depth 生成 TOC 的最小深度 1 示例:
<%- toc(page.content) %>
data-toc-unnumbered (+6.1.0)
带有 data-toc-unnumbered=”true” 属性的标题将被标记为未编号(不显示列表编号)。
公式渲染
我的需求是在后端完成公式的渲染然后输出,这里用的是hexo-filter-mathjax 自己去看git吧,不再抄一遍了 ,然后由于自带的markdown引擎不支持公式,所以还需要把hexo-renderer-marked更换为hexo-renderer-kramed,然后对更换后的引擎进行修改
node_modules\kramed\lib\rules\inline.js,修改第11行escape变量的值(这一步是在原基础上对,{,}的转义(escape)):
修改前:escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/, 修改后:escape: /^\\([`*\[\]()#$+\-.!_>])/,
同时,把第20行的em变量也做相应的修改:
修改前:em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, 修改后:em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
然后在全局设置里面打开并在每一个需要渲染的文件添加开关即可