Hexo优化相关

发表于 | 更新于: | 分类于 |
字数统计: 1,470字

速度优化

主题优化

next主题外观优化

侧边栏社交小图标设置

  • 实现效果图
  • 具体实现方法 打开主题配置文件（_config.yml），搜索social_icons:,在图标库找自己喜欢的小图标，并将名字复制在如下位置

在网站底部加上访问量

  • 具体实现方法 打开\themes\next\layout_partials\footer.swig文件,在copyright前加上画红线这句话： 代码如下： 
    1
    <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后再合适的位置添加显示统计的代码，如图： 代码如下: 

1
2
3
4
5
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

在这里有两中不同计算方式的统计代码： 1. pv的方式，单个用户连续点击n篇文章，记录n次访问量 

1
2
3
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

  1. uv的方式，单个用户连续点击n篇文章，只记录1次访客数 
    1
    2
    3
    <span id="busuanzi_container_site_uv">
      本站总访问量<span id="busuanzi_value_site_uv"></span>次
    </span>

网站底部字数统计

切换到根目录下，然后运行如下代码（这里用cnpm） 

1
$ cnpm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上: 

1
2
3
4
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

为博客添加萌萌哒的宠物

  1. 国外的作者大神的仓鼠
  2. 看版娘(hexo集成了，所以设置比仓鼠简单点)大佬github 步骤一 ：安装hexo-helper-live2d插件 
    1
    cnpm install -save hexo-helper-live2d

步骤二 ： 将如下代码加入主题 路径：打开Hexo/blog/themes/next/layout 的_layout.swig,将下面代码放到</body>之前： 

1
{{ live2d() }}

步骤三 ： 参数配置 在 hexo 的_config.yml中添加参数： 

1
2
live2d:
  model: nipsilon

下面是一些model,可以换不同的宠物 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
model 模型名称 默认值: z16 
Gantzert_Felixander
Epsilon2.1
haru
miku
ni-j
nico
nito
nipsilon
nietzsche
shizuku
tsumiki
wanko
z16
hibiki
koharu
haruto
Unitychan
tororo
hijiki
width 宽度 默认值: 150
height 高度 默认值： 300
className <canvas>元素的类名 默认值： live2d
id <canvas> 元素的id 默认值： live2dcanvas
bottom <canvas> 元素的底部偏移 默认值： -20 如果嫌模型位置不正确 可以调整这个参数

文章优化

文章链接持久化

安装hexo-abbrlink 

1
npm install hexo-abbrlink --save

站点配置文件中 

1
2
3
4
5
6
permalink: posts/:abbrlink/  # “posts/” 可自行更换

# abbrlink config
abbrlink:
  alg: crc32  #support crc16(default) and crc32
  rep: hex    #support dec(default) and hex

阅读全文设置

  1. 方法一：自动截取显示 用文本编辑器打开next目录下的_config.yml文件 
    1
    2
    3
    4
    5
    # Automatically Excerpt. Not recommend.
    # Please use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt:
      enable: false
      length: 150

把enable 的false改成true就行了，然后length是设定文章预览的文本长度。 修改后重启 hexo 就ok了。 2. 方法一：手动显示 在你写 md 文章的时候，可以在内容中加上 <!--more-->，这样首页和列表页展示的文章内容就是 <!--more-->之前的文字，而之后的就不会显示了。

文章更新时间

hexo添加文章更新时间

自动推送

将主题配置文件中的baidu_push设置为true

修改文章底部的那个带#号的标签

  • 具体实现方法
  • 修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

主页文章添加阴影效果

具体实现方法 * 打开\themes\next\source\css\_custom\custom.styl,向里面加入： 

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

实现文章统计功能

在根目录下安装 hexo-wordcount运行 : 

1
$ cnpm install hexo-wordcount --save

然后在主题的配置文件中，配置如下： 

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: false

优化 找到Blog.swig 文件 搜到找到如下代码 * 注：(个人出现的markdown语法错误)这里会出现markdowm的语法错误，原因是wordcount()被当成特殊字符，详细请看 改为图片显示为

  • 另一个错误是该插件版本与node.js版本不兼容，hexo g时会报如下错误 
    1
    2
    3
    4
    5
    ERROR Plugin load failed: hexo-wordcount
    Error: Cannot find module 'numeral'
        at Function.Module._resolveFilename (module.js:489:15)
        at Function.Module._load (module.js:439:25)
        at Module.require (module.js:517:17)

指定老的版本即可：cnpm install hexo-wordcount@2 --save

数学符号渲染

hexo有自带的数学符号渲染方法mathjax

在主题中只需要开启mathjax开关

eg：在next主题目录的_config.yml配置中,把mathjax默认的false修改为true 

1
2
3
4
# MathJax Support
mathjax:
  enable: true
  per_page: true

在文章的Front-matter中打开mathjax开关(mathjax加载耗资源，只在需要的文章中加载)

1
2
3
4
5
6
---
title: index.html
date: 
tags:
mathjax: true
---

评论系统

来必力(韩国人的，不怎么喜欢)

gitment(推荐，Next主题下以集成gitment)

可能产生的错误

Hexo+gitment的Error：validation failed

Hexo+gitment的Error：validation failed

其他错误

Gitment评论功能接入踩坑教程 一般都是路径的配置有问题，如搞不清楚各个配置的含义，这篇文章讲得蛮清楚了

错误集合

1
Error: Cannot find module 'math-work'

cmd中cnpm install math-work

参考的网站

主题

其他