Hexo 优化与定制(一)

本文修改都是基于默认主题light, 其他主题可对照修改, 方法类似, 对应效果请参考 我的 Hexo 博客 非本站, 本站所用主题为 Nut.

后续为Hexo 优化与定制(二)

添加相关文章插件

实现这一功能的网站不少, 大多数都比较简单, 这里主要说说怎么添加无觅相关文章插件(详见本站), 主要是两段相关的代码

第一段代码很容易处理, 想哪里出现就放在那里. 问题是请用代码生成文章标签这个地方. 具体操作如下: 将如下代码直接放置 after-footer.ejs 里即可.

添加之后需要一段时间才能够出效果, 具体多久时间不大确定, 一般不会超过24小时.

当然我们也可以用友荐, Outbrain, Shareholic 等相关文章插件, 这些使用更为简单, 可参照如下的添加百度统计.

添加百度统计

  • 默认代码这种方式只需将代码添加至网站全部页面的</body>标签前, 因此只需要在 hexo\themes\light\layout\_partial\after_footer.ejs 里添加如下代码[这里添加的是我的代码, 请适当修改]

  • 百度统计异步代码是以异步加载形式加载了网站分析代码,使用该代码能够大幅提升您网站的打开速度(目前使用百度统计异步代码会导致百度统计图标和代码检查功能的失效).使用这种方式需要将代码添加至网站全部页面的标签前, 因此只需要在 hexo\themes\light\layout\_partial\head.ejs 里添加如下代码[这里添加的是我的代码, 请适当修改 cfedc723a9dc30bd7db67ad8e53a97fa 这部分成你的ID]

添加百度分享

  • 找到 hexo\themes\light\layout\_partial\article.ejs 里的如下代码

修改成如下

还需要添加如下代码至 hexo\themes\light\layout\_partial\after_footer.ejs (当然还是需要把里面的) 86835285 改成自己的 ID.

至此, 大部分工作已经完成了, 但是还差 CSS 一步. 因为 Stylus 不是特别熟, 所以我用的是直接修改 CSS 文件, 即添加

添加’上一篇’和’下一篇’导航

hexo\themes\light\layout\_partial\post 里新建 ejs 文件 prev_next.ejs, 然后在其中加入代码

随后在 hexo\themes\light\layout\_partial\article.ejs 里加入

比如我的模板是这样的

最后是 CSS, 不过似乎下面的代码还是会有些小瑕疵(字体问题), 请道友们自行调整.

给 Hexo 添加文章目录

Hexo 的 2.4.1 版本中, tommy351Hexo 增加了 Table of contents 功能, 并提供了相关的使用方法 TOC (Table of contents) helper #408.

使用方法

因为有些文章不一定会有分级标题, 因此在这种时候就没有必要使用文章目录, 所以有必要添加一个控制文章目录的 item, 具体如下

例如, 我按照默认主题 light 修改时在 \layout\_partial\article.ejs 中如下位置添加

这样, 在文章不需要使用文章目录的时候可以在 front-matter 前加上 toc: false 即可. 例如

添加 CSS

CSS 代码可适当修改称自己喜欢的形式, 我用的是如下的代码 (基于 light 主题)

添加 Mathjax

常规方法

在 Hexo 中使用 Mathjax 最常规的方法就是主题的 after_footer.ejs 里加入 (该 Mathjax 代码根据 Math StackExchange 所用修改)

接下来的使用方法就和平常使用 Mathjax 一样了.

不过这个方法有个令人不爽的缺点, 众所周知加载 Mathjax 的数学公式时是很消耗资源和时间的. 即使在网页中并没有生成公式时, 也会加载最基本 MathJax.js, 而这个文件也有 58KB. 为解决这个问题可参考如下进阶版.

进阶版

我们可以考虑只有在用到公式的页面才加载 Mathjax, 因此需要加载一些控制.

首先将上面的代码写成一个 mathjax.ejs 文件放在 partial 目录下, 并且在 Hexo 的根目录的 _config.yml 里面加入 mathjax: true, 接下来在 after_footer.ejs 里加入

在文章需要调用 Mathjax 时, 只需在 front-matter 前加上 mathjax: true 即可, 即

Leave a Reply

Your email address will not be published. Required fields are marked *