本文章发布时间久远，有些内容不再具有参考性，望周知

字体源加载优化

进入 主题配置文件，找到uri of fonts host. E.g，

更改host源：

1
2
3
4
5
6
font:
  enable: false

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: //fonts.lug.ustc.edu.cn

这是中科大的源，可以优化加载字体的速度

图片懒加载

一般情况下，hexo形成的博客在浏览器上浏览时，是先将该页面中所有的图片都下载好在慢慢打开的。

这样势必会影响浏览速度。那么如果一个页面的图片很多，那么如何来提高博客的访问速度呢？

实际上，有一个名为“图片懒加载”的方案可以解决此类问题。

图片懒加载：通俗点讲就是当你翻到图片的时候再加载那张图片，而不是以下将本页面的所有图片都加载完。

完善的markdown渲染器

hexo默认使用的是hexo-renderer-marked渲染器，然而这个渲染器并不支持markdown语法含有的许多功能

比如：上下标、注脚、数学公式、流程图……

因此，为了完善我们的博客页面，我们需要引入新的渲染器

这里以hexo-renderer-markdown-it-plus为例：

首先，卸载原来的渲染器（系统不支持一个以上的渲染器同时安装）

1
cnpm uninstall hexo-renderer-marked --save

然后安装我们需要更换的渲染器

1
cnpm install @upupming/hexo-renderer-markdown-it-plus --save

注意到 hexo-renderer-markdown-it-plus 已经无人持续维护，所以我们使用 @upupming/hexo-renderer-markdown-it-plus。 这份 fork 的代码使用了 @neilsustc/markdown-it-katex 同时它也是 VSCode 的插件 Markdown All in One所使用的，所以我们可以获得最新的 KaTex 功能例如 \tag{}

之后进入 主题配置文件搜索找到math选项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Math Formulas Render Support
math:
  # per_page如果选为true，表示不对所有文章进行数学公式渲染，如果想要对某篇文章渲染数学公式
  # 可以在文件头加入配置"mathjax: true"，注意空格
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: false
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  # 不同的渲染器支持的不一样，我们安装的markit+支持的是katex，所以在此打勾
  katex:
    enable: true
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: true

于是，我们便可以看到比较完善的blog页面了！！

效果如下：

效果预览

而katex对于科学公式的处理：

  • 优点
    1. 页面加载极快
    2. 渲染器效果好 (相对 kramed 对 MathJax 的内联公式)
  • 缺点
    1. NexT 对其优化较差 (单行过长，页面会出现位移)
    2. 渲染 md 时，若出现中文字符会弹出大量警告
    3. 会严重影响 Hexo 渲染速度

文章内生成目录

在前期教程中我们知道，如果想为博客设置访问密码，会导致目录无法显示。

不过我们知道markdown语法本身可以通过toc插件在文章内部形成目录的，而且一些好的md编辑器：typora则可以直接使用[toc]的方式生成目录。

然而这在hexo里语法不会被识别，因此，需要我们拥有 hexo-renderer-markdown-it-plus渲染器

安装插件：

1
npm install hexo-toc --save

之后在编写博客时，可以在需要引用目录的地方使用：

1
<!-- toc -->

注意，toc两侧都有空格！！！

效果如下：

效果预览

而且：点击即可跳转

如果想在其他渲染器里也有该效果，请观看:这篇文章

已知BUG：

  • 某些主题(如：NexT)自带的目录功能不再随之自动滚动，且点击不再跳转

2020.4.13 13:29 更新

最简单无BUG的方法：

使用markdown语法自带的html属性手动构建跳转目录：

1
2
3
4
5
6
7
8
9
<h1 id="1">标题一</h1>
内容……
内容……
……
……

[点击跳转至 标题一](#1)

<!-- 可利用此方法自行编写目录代码，只是工程量较大 -->

封面模式

安装插件：

1
cnpm install hexo-less --save

在文章中使用：

1
<!-- less -->

隔开。

则less以上的内容会在首页里显示，但是不会出现在正文之中。一般情况下less之上可以只设置一张图片，以达到所谓”封面“的效果

为BLOG添加评论机制

咕咕咕

博客的备份

  • 根目录下的几个配置文件，主要是 _config.yml、package.json 。（必备份）

  • source 文件夹，这里面包含了你写的文章的 markdown 源码，这个才是最重要的。（必备份）

  • hexo/themes/themes_name 这里的 themes_name 指的是你的主题名称，可能你会对主题进行一些个性化的配置，所以这个主题全部备份了。（一般都只用一个主题，而且默认的主题也不用，所以默认主题不用备份。）。（必备份）

  • scaffolds 文件夹，这个文件夹里是创建文章时的模板，如果你没修改过这个文件夹中的东西，可以不用备份。（根据情况备份）

  • .ssh ，如果你使用了免密部署，那么备份下你的公钥和私钥还是有必要的，你也可以选择，当然重新生成。（根据情况备份）

参考资料

https://www.jianshu.com/p/25766dda5a5f

https://ioliu.cn/2017/add-valine-comments-to-your-blog/

https://blog.zuiyu1818.cn/posts/hexo_math.html

https://github.com/bubkoo/hexo-toc

http://www.zhaojun.im/hexo-backup/