Hexo+butterfly搭建个人博客
hexo常用指令·
1 | hexo clean #清除缓存文件 (db.json) 和已生成的静态文件 (public) |
准备工作·
完成Hexo环境搭建,参考Hexo博客搭建
官方文档
安装Butterfly主题·
美化·
参考·
关于我的Butterfly主题的所有优化 | Modesty (hr-insist.github.io)
♪(∇*)欢迎回来!Butterfly主题美化日记 | Akilarの糖果屋
Math·
使用Mathjax·
尽管butterfly官文文档推荐使用KaTex,但是我按照官方文档的步骤后,需要换行的数学公式显示有问题,所以退而求其次使用Mathjax。
-
修改主题配置文件
_butterfly_config.yml
1
2
3
4
5mathjax:
enable: true
# true 表示每一页都加载mathjax.js
# false 需要时加载,须在使用的Markdown Front-matter 加上 mathjax: true
per_page: false如果
per_page
设为 true,则每一页都会加载 Mathjax 服务。设为 false,则需要在文章 Front-matter 添加mathjax: true
,对应的文章才会加载 Mathjax 服务。 -
安装渲染插件
1
2npm uninstall hexo-renderer-marked --save #如果有其他的数学渲染插件,一并删除
npm install hexo-renderer-kramed --save安装新的插件后,要重新打开cmd窗口才会生效。
-
配置hexo的配置文件
_config.yml
1
2
3
4
5
6
7
8kramed:
gfm: true
pedantic: false
sanitize: false
tables: true
breaks: true
smartLists: true
smartypants: true
解决在hexo中无法显示数学公式的问题·
修改node_modules\kramed\lib\rules\inline.js文件
hexo-renderer-kmared渲染引擎仍然存在一些语义冲突问题,到博客的根目录下,找到node_modules\kramed\lib\rules\inline.js,把第11行的escape变量的值做相应的修改:
1 |
|
这一步是在原基础上取消了对,{,}的转义(escape)。
同时把第20行的em变量也要做相应的修改。
1 |
|
重启hexo:
1 |
|
行间公式无法换行可将公式中双反斜线 \\
换行不好用,改为4个反斜线 \\\\
换行即可。
hexo 更换 markdown渲染器 @upupming/hexo-renderer-markdown-it-plus_hexo render-CSDN博客
https://akilar.top/posts/f99b208/)
引用本地图片·
首先要在 Hexo 博客配置添加一行[1]:
1 | # 开始使用本地静态资源 |
添加这行配置后,当你什么插件也没安装时,使用 hexo 4.0 也可以在文章引用本地图片,引用方式是这样的:
首先在 _posts
文件夹下建立一个博文文件,比如 2019-12-23-hello-world.md
,再建立一个同名的文件夹 2019-12-23-hello-world
。这篇文章要引用的图片就放在该文件夹下。
或者
hexo new 2019-12-23-my-post
比如我就在该目录下放一个图片2019-12-23-hello-world/haha.png
。然后在博文 Markdown 文件里引用该图片,怎么引用呢?用下面这种方式:
1 |  |
发布文章·
1.新建文章·
在hexo
博客目录下,进入Git Bash
命令窗口中,输入以下命令:
1 | hexo new "title" |
就会在博客目录下的/source/_posts/
文件夹下,可以看到已经生成了标题为(title.md
)的博客文件。
2.给文章添加分类和标签·
(1) 在(title.md
)文件中设置tags
和categories
属性:
1 | title: XX |
3.启动服务器,本地测试·
1 | hexo s |
4.发布到Github上·
(1)发表的文章在本地预览无误后,在 Git Bash
命令窗口执行以下命令:
1 | hexo clean && hexo g && hexo d |