前言

想优雅的使用Hexo这个博客还是很不容易的，需要学会使用一些插件，而有的插件之间有一定的冲突，我们需要进行一些修改，才能完美的适配我们的博客。

原生的Hexo博客生成的目录是:year/:month/:day/:title，这就使得我们的url中携带大量中文，有些人通过hexo new title使用英文的title，这当然可行的，但是这不代表你的title就一定是唯一确定的，这也不方便日后对文章进行整理，也不方便我们推广，比如推广到百度站上，进行SEO是非常不方便的。

而这一款插件就可以为我们的文章生一个固定不变而且唯一的地址，就算你修改文章的title，也不会对url发生变化的插件。

我们只需要npm install hexo-abbrlink --save即可

随后在我们的主配置文件中进行相应的配置：

1
2
3
4
 
permalink: :year/:month/:day/:abbrlink.html
abbrlink:
 alg: crc32  # 算法：crc16(default) and crc32
 rep: hex    # 进制：dec(default) and hex

在使用了这个插件后，需要执行一次hexo clean && hexo g，否则之前的博文可能会变为undefined，需要先clean一下。

hexo-asset-image

这一款插件是为我们为文章中插入图片提供方便的，我们需要在配置文件中启用：

1
 
post_asset_folder: true

安装方法是一样的:

1
 
npm install --save hexo-asset-image

安装好后当我们新建博文的时候，就会为我们在同级目录下生成一个名字为title的文件夹，存放在这个文件夹里面的图片，在我们部署后可以顺利显示。

hexo-generator-index-pin-top

如果你想置顶某一篇博文的话，就用的上这个插件了，安装方式不说了，直接说怎么用：

最后在适当的地方，比如说我是在aiticles的标题处加上了置顶的代码：

1
2
3
4
5
 
<% if (post.top) { %>
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
<% } %>

最终效果：

hexo-wordcount

这是用于统计文章字数和阅读市场的插件，因为icarus已经有了这样的功能，所以我只提一下，

配置可以这样：

1
2
3
4
 
post_wordcount:
 item_text: true
 wordcount: true
 min2read: true

hexo-baidu-url-submit

有一位大神写的特别好，我就看他配置的妥妥的，不说了，传送门：

Hexo插件之百度主动提交链接

hexo-blog-encrypt

文章加密的插件，非常好用，也非常简单：

以下内容来自官方文档：

具体的使用方法

首先，你需要在 _config.yml 中启用该插件
1
2
3
4
 
# Security
##
encrypt:
    enable: true
给文章添加密码：
1
2
3
4
5
6
7
8
9
10
 
---
title: hello world
date: 2016-03-30 21:18:02
tags:
    - fdsfadsfa
    - fdsafsdaf
password: Mike
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
---
  • password: 是该博客加密使用的密码
  • abstract: 是该博客的摘要，会显示在博客的列表页
  • message: 这个是博客查看时，密码输入框上面的描述性文字
对 TOC 进行加密

如果你有一篇文章使用了 TOC，你需要修改模板的部分代码。这里用 landscape 作为例子：

  • 你可以在 hexo/themes/landscape/layout/_partial/article.ejs 找到 article.ejs。
  • 然后找到 <% post.content %> 这段代码，通常在30行左右。
  • 使用如下的代码来替代它: 
1
2
3
4
5
6
7
8
9
10
11
 
<% if(post.toc == true){ %>
    <div id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
        <strong class="toc-title">Index</strong>
        <% if (post.encrypt == true) { %>
            <%- toc(post.origin, {list_number: true}) %>
        <% } else { %>
            <%- toc(post.content, {list_number: true}) %>
        <% } %>
    </div>
<% } %>
<%- post.content %>
修改加密模板
  • 如果你对默认的主题不满意，或者希望修改默认的提示和摘要内容，你可以添加如下配置在 _config.yml 中。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
# Security
##
encrypt:
    enable: true
    default_abstract: the content has been encrypted, enter the password to read.</br>
    default_message: Please enter the password to read.
    default_template:
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div id="hbe-security">
          <div class="hbe-input-container">
          <input type="password" class="hbe-form-control" id="pass" placeholder="{{message}}" />
            <label for="pass">{{message}}</label>
            <div class="bottom-line"></div>
          </div>
        </div>
        <div id="decryptionError" style="display:none;">{{decryptionError}}</div>
        <div id="noContentError" style="display:none;">{{noContentError}}</div>
        <div id="encrypt-blog" style="display:none">
        {{content}}
        </div>
  • 可以看见，和上面的配置文件对比来看，多了 default_template 和 default_abstract 和 default_message 配置项。
    • default_abstract : 这个是指在文章列表页，我们看到的加密文章描述。当然这是对所有加密文章生效的。
    • default_message : 这个在文章详情页的密码输入框上方的描述性文字。
    • default_template : 这个是指在文章详情页，我们看到的输入密码阅读的模板，同理，这个也是针对所有文章的
      • 开始的解密部分需要由 div 包裹，而且 div 的 id 必须 是 ‘hbe-security’，解密后以便于隐藏。
      • 最后的 content 显示 div 的 id 必须 是 ‘encrypt-blog’，同时为了好看，也希望进行隐藏。
      • 同时，必须要有一个 input 输入框，id 必须是”pass”，用来供用户输入密码。
      • 输入密码之后，务必要有一个触发器，用来调用 ‘decryptAES’ 函数。样例中以 button 来触发。
  • 如果你希望对某一篇特定的文章做特殊处理，这有两种方法可以达到这个效果, 在博客的源文件添加 template 配置: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
---
title: hello world
date: 2016-03-30 21:18:02
tags:
    - fdsfadsfa
    - fdsafsdaf
password: Mike
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
template:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="hbe-security">
      <div class="hbe-input-container">
      <input type="password" class="hbe-form-control" id="pass" placeholder="{{message}}" />
        <label for="pass">{{message}}</label>
        <div class="bottom-line"></div>
      </div>
    </div>
    <div id="decryptionError" style="display:none;">{{decryptionError}}</div>
    <div id="noContentError" style="display:none;">{{noContentError}}</div>
    <div id="encrypt-blog" style="display:none">
    {{content}}
    </div>
---
回调

如果您需要在文章解密之后调用一些代码，您可以参考以下配置：

1
2
3
4
5
6
 
encrypt:
  enable: true
  callback: |-
    initLightGallery()
    initImageResize()
    initTocBot()

在callback 之后的这个符号|-代表多行的yaml值

如果您在其他js文件里面定义了函数，您可以在这里调用它们，或者您也可以在callback这里写上您自己的代码逻辑，比如$('#someId').lightGallery()，上面的initXXX()只是示例，您不应该直接复制上面的配置。

卜算子ip计数统计

这个很简单，只需要加几行代码，不过我发现每次在打开网站时候都会卡这么一下，和这个貌似有关系，emmmm，所以我不是很喜欢这个。

传送门：卜算子教程

leancloud-storage

这个比较麻烦，是添加comment评论的：Valine评论

请移步查看官方文档：http://www.zhaojun.im/hexo-valine-admin/

效果就是这样的：

好看是挺好看，不过没人评论就很尴尬emmm。。。

hexo-abbrlink和hexo-asset-image冲突怎么办

在这两个同时使用的时候，图片会因为图片路由包含了文章名而无法显示，这就很难受，通通过修改/node_modules/hexo-asset-image/index.js修改了路由获取方式，成功显示了图片，因为修改的是依赖文件，所以当你删除了/node_modules或者你还了电脑重新拉了项目进行npm install的时候，这部分代码就没有了，记得备份好，那么我修改的内容是：

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    var link = data.permalink;
	// 第一处改动
	link = link.replace('.html', '/');
	var beginPos = getPosition(link, '/', 3) + 1;
	// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
	var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
		// For windows style path, we replace '\' to '/'.
        var src = $(this).attr('src').replace('\\', '/');
        if(!/http[s]*.*|\/\/.*/.test(src)){
		  // For "about" page, the first part of "src" can't be removed.
		  // In addition, to support multi-level local directory.
		  var linkArray = link.split('/').filter(function(elem){
		    return elem != '';
		  });
		  var srcArray = src.split('/').filter(function(elem){
		    return elem != '';
		  });
		  if(linkArray[linkArray.length - 1] == srcArray[0]) {
		    srcArray.shift();
		  }
		  // 第二处改动
		  srcArray.shift();
          src = srcArray.join('/');
          $(this).attr('src', '/' + link + src);
        }
      });
      data[key] = $.html();
    }
  }
});

一共两处修改，第一处是将路由中的.html变为/，这是因为我在设置文章访问路由的时候设置为了permalink: :year/:month/:day/:abbrlink.html，所以要去掉html换为/，气候添加了一个srcArray.shift()这个的作用是删除数组中的第一个元素，删除的正是中文标题的名字，这一层目录是多余的。

如果你存在问题，请在下面评论，或者联系我的邮箱：925474088@qq.com