Hexo + inside 博客个性化定制

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;
修改 CSS

不过个人觉得放在 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">

访问量统计

很多人都有站点访问量统计的需求,像这样:
不蒜子统计
我采用的是轻量的不蒜子统计来做访问量统计。

安装脚本,在使用不蒜子的页面,也就是在 pluginssidebar 模块插入 busuanzi.js

plugins:
  - position: sidebar
    template: |
      <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

安装标签,官方给出了站点 PV/UV 的统计代码:

<span id
  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值