[Hexo 博客系列-02] 第三方插件

聊天模块

DaoVioce

  1. 注册
    首先需要在 DaoVoice 上注册个账号, 可以使用阁主的 邀请码: 160df6e7;
  2. 按下图所示获取 app_id;
    获取 app_id
  3. 修改 /themes/next/layout/_custom/head.swig:
1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}
  1. 最后在主题配置文件中启用并添加你自己的 app id:
1
2
3
# online contact
daovoice: true
daovoice_app_id: 160df6e7

内容分享

AddThis

  1. 前往 AddThis 注册一个账号, 注册的时候有一个 人机身份验证 的选项,需要翻墙才能刷新出来,不然会一直提示 reCAPTCHA verification failed. Please try again. 的注册失败提示!
  2. 然后依次 Add a New Tool -> Share Buttons 创建一个分享按钮,并按照下图所示进行样式设置:
  • 选择分享按钮样式:
    Select a Tool Type

  • 设置分享的 Services, Design, Counters, Position, Behavior:
    Floating

  • 最后 Activate Tool 激活工具即可使用;

  1. 在主题配置文件中启用:
1
2
3
# AddThis Share, See: https://www.addthis.com
# Go to https://www.addthis.com/dashboard to customize your tools.
add_this_id: xxxxxxxxx

其中 add_this_id 可以如下图所示获取:
add_this_id

注意, 该插件在 Firefox 浏览器下失效, 提示 InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable 异常.

评论模块

Valine

Valine 诞生于2017年8月7日,是一款基于 Leancloud 的快速、简洁且高效的无后端评论系统。
首先,前往 leancloud 注册一个账号, 接着需要创建一个应用,名称随意,然后进入 应用 - 设置 - 应用key 以获取 App IDApp Key:

appid_appkey

在主题配置文件中启用 valine:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Valine
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
valine:
enable: false # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
appid: xxxxxxxxxx # your leancloud application appid
appkey: xxxxxxxxxx # your leancloud application appkey
notify: true # mail notifier, See: https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 留下你的爪印 # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
language: # language, available values: en, zh-cn
visitor: true # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # if false, comment count will only be displayed in post page, not in home page

最后,记得在 LeanCloud - 设置 - 安全中心 - Web 安全域名 中将你博客的域名加入!!

Web 安全域名
图为旧设置, 现域名变更为 http://memento.net.cn.

gitment

waiting for update…

gitalk

waiting for update…

gitter

waiting for update…

LiveRe(来必应)

waiting for update…

3D 标签云

在上一步的基础上, 安装插件 npm install --save hexo-tag-cloud;
然后在 /themes/next/layout/page.swig 定位到 <div class="tag-cloud-tags">...</div>, 在该标签后面添加:

1
2
3
4
5
6
7
8
9
10
11
12
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div id="myCanvasContainer" class="widget tagcloud">
<canvas id="resCanvas" style="width:100%">
{{ list_tags() }}
</canvas>
</div>
</div>
{% endif %}

最后再依次执行 hexo clean, hexo g, hexo s, 查看完成的 3D 标签云~

CNZZ 友盟统计

  1. 注册友盟账号并添加站点, 如下图所示:
查看图片站点
  1. 拷贝其中的统计代码:
查看图片统计代码
  1. 修改模板代码:
    定位到 /themes/next/layout/_third-party/analytics/cnzz-analytics.swig 模板文件, 修改中间的 <script> 脚本代码, 将第二步中复制的统计代码放进去:
1
2
3
4
5
6
{% if theme.cnzz_siteid %}
<div>
<!-- 放置友盟的统计代码 -->
<script type="text/javascript">...</script>
</div>
{% endif %}
  1. 在主题配置文件中启用 CNZZ 统计
1
2
# CNZZ count
cnzz_siteid: true

本地搜索

参考: hexo-generator-searchdb

1
npm install hexo-generator-searchdb --save

在博客配置文件中添加:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

然后在主题配置文件中启用本地查询:


配置

1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false


博文置顶

参考:

  1. hexojs/hexo-generator-index
  2. hexo-generator-index-pin-top
  3. 解决Hexo置顶问题

卸载原装的 hexo-generator-index, 并安装 hexo-generator-index-pin-top:

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在文章中添加 top:

1
2
3
4
5
---
title: 2018
date: 2018-10-25 16:10:03
top: 10
---

top 值越大位置越靠前;
设置置顶标记, 定位 /themes/next/layout/_macro/post.swig<div class="post-meta"> 标签下:

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>
{% endif %}

字数统计+阅读时间

参考: hexo-symbols-count-time

  1. 安装插件
1
npm install hexo-symbols-count-time --save
  1. 在博客配置文件中启用:
1
2
3
4
5
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
  1. 在主题配置文件中设置:
1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4 # Average Word Length (chars count in word). Default: 4.
wpm: 275 # Words Per Minute. Default: 275.

参考: hexo-addlink

安装

1
npm install hexo-addlink --save

在博客配置文件中进行设置:

1
2
3
addlink:
before_text: hello # text before the post link
after_text: bye # text after the post link

文章链接持久化

为了避免 Next 主题默认的以文章标题 title 作为链接的一部分, 导致的 url 地址的中文乱七八糟的问题, 现采用 hexo-abbrlink 插件, 根据一定的算法持久化文章链接;

  1. 安装插件
1
npm install hexo-abbrlink --save
  1. 站点配置文件中设置:
1
2
3
4
permalink: :year/:month/:day/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
  1. 同时, 也修改一下 scaffolds 里的模版文件 post.md, 删除默认的 permalink 行;

文章加密访问

  1. 安装插件:
1
npm install --save hexo-blog-encrypt
  1. 在博客配置文件中启用,也可以配置样式模板:

文章加密

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/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>


注意,该插件依赖于 jquery.min.js;

  1. 最后在写文章时头部设置密码即可:
1
2
3
4
5
---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---

NexT [hexo-theme-next: v7.0.1] 主题出现解密后 TOC 目录无法显示的问题

修改模板文件: sidebar.swig
主要修改的内容是对于 page.content 的调用, 当 page.encrypt == true 时, 应调用 page.origin; 当 page.encrypt == false 时, 则调用 page.content;
具体的修改内容见下:

{ details 变更一 }

1
2
3
{% if display_toc and toc(page.content).length > 1 %}
...
{% endif %}

变更为:

1
2
3
{% if display_toc and page.encrypt == true and toc(page.origin).length > 1 or page.encrypt == false and toc(page.content).length > 1 %}
...
{% endif %}

{ enddetails }

1
2
3
<div class="site-overview-wrap sidebar-panel{% if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{% endif %}">
...
</div>

变更为:

1
2
3
<div class="site-overview-wrap sidebar-panel{% if not display_toc or page.encrypt == false and toc(page.content).length <= 1 or page.encrypt == true and toc(page.origin).length <= 1 %} sidebar-panel-active{% endif %}">
...
</div>
1
2
3
{% if display_toc and toc(page.content).length > 1 %}
...
{% endif %}

变更为:

1
2
3
{% if display_toc and page.encrypt == true and toc(page.origin).length > 1 or page.encrypt == false and toc(page.content).length > 1 %}
...
{% endif %}

图片懒加载

安装插件:

1
npm install hexo-lazyload --save

然后在博客配置文件中添加设置:

1
2
3
4
5
# 图片懒加载
lazyload:
enable: true
# className: # 需要延迟加载的图片 class 选择器, 可选, e.g. .J-lazyload-img
# loadingImg: # 图片未加载时的代替图, 可选 e.g. ./images/loading.png, 默认: /js/lazyload-plugin/loading.svg

--------------------本文至此结束  感谢您的阅读--------------------

本文标题:[Hexo 博客系列-02] 第三方插件

文章作者:Memento

发布时间:2019年03月30日 - 21:03

最后更新:2019年12月14日 - 17:12

原始链接:http://memento.net.cn/post/67805eb2.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Memento wechat
欢迎您扫一扫上面的微信公众号, 订阅阁主公众号!
坚持原创技术分享, 您的支持将鼓励我继续创作