CSDN 上文章无法实时更新,欢迎访问我的博客原文,查看最新更新。
我的博客采用的是 Hexo 官方网站上相中的 hexo+theme+inside 主题。虽然开发者已经提供了主题的使用文档,但是作为一款小众的主题,一些常用功能的定制并不是那么完善,不过贴心的开发者提供了 plugins 配置方案。
下文总结了部分功能的拓展方案,可供需要的朋友参考。
plugin 前置准备
themes/inside/_config.yml
中的 plugins 支持于特定位置动态插入可执行的代码片段,或全局加载脚本/样式。
支持通过安装 html-minifier、babel 和 uglify-js 来实现代码压缩。 在项目根目录执行(Hexo 根目录,非 themes/inside
):
npm install babel-core babel-preset-env html-minifier uglify-js --save
Font Awesome
按照 plugin 配置描述的,要支持 Font Awesome 的 CSS,只需要在 _config.yml
里这样设置:
plugins:
- //netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
也就是在全局加载样式,不过不知道为什么没有正常生效🤔(inside-v2.6.1 已经修复了这个问题,建议你升级到最新版本)。
如果你是 v2.6.0 及以下版本,可以用这个方案解决:
在
themes/inside/layout/index.swig
的<head>
标签内插入代码:<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
这时,虽然图标显示出来了,但是样式还是有点问题,可能和主题本身的 CSS 有关系,找到
source
目录下的styles.e4da61f53c7bc99becf4.css
(也可能叫别的) 里的.fa
,删除里面的margin:10rem 0 3rem;
。
不过个人觉得放在 CDN 上访问速度还是有点慢,所以从官网下载最新版放在主题的 source/lib
目录下,在 plugins
下再插入:
plugins:
- lib/font-awesome/css/font-awesome.min.css
或者在需要的位置引用 CSS 资源:
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
访问量统计
很多人都有站点访问量统计的需求,像这样:
我采用的是轻量的不蒜子统计来做访问量统计。
先安装脚本,在使用不蒜子的页面,也就是在 plugins
的sidebar
模块插入 busuanzi.js
。
plugins:
- position: sidebar
template: |
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
再安装标签,官方给出了站点 PV/UV 的统计代码:
<span id="busuanz