GitHub+Hexo搭建个人博客（四）Hexo高阶之第三方插件

作者: _danboard | 来源:发表于2018-08-25 20:23 被阅读0次

Hexo 静态站点具有一定的局限性，需要借助第三方插件来扩展站点的功能。

网上很多教程都是直接添加某些代码，但现在很多也已经merge到源码了，所以修改就比较方便了，true or false，开启或关闭功能，有些功能可能还需要在第三方服务上注册账号，获取API和APK 。

利用Hexo搭建博客的人很多，但不都是千篇一律的，有些好的还是要借鉴的，更好的是能够有自己的风格~~~

RSS

什么是RSS？

简易信息聚合（也叫聚合内容）是一种RSS基于XML标准，在互联网上被广泛采用的内容包装和投递协议。RSS(Really Simple Syndication)是一种描述和同步网站内容的格式，是使用最广泛的XML应用。RSS搭建了信息迅速传播的一个技术平台，使得每个人都成为潜在的信息提供者。发布一个RSS文件后，这个RSS Feed中包含的信息就能直接被其他站点调用，而且由于这些数据都是标准的XML格式，所以也能在其他的终端和服务中使用，是一种描述和同步网站内容的格式。——百度百科

1 生成RSS文件

安装hexo-generator-feed插件

$ npm install --save hexo-generator-feed

打开站点配置文件 ，字段Extensions，添加如下

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

打开主题配置文件 ，字段rss，添加如下

rss: /atom.xml

配置完成，执行下列命令，可以看到/public文件夹中多了一个atom.xml文件

$ hexo g

发布之后，在侧边栏会生成一个RSS图标

2 RSS迁移

安装hexo-migrator-rss插件

$ npm install --save hexo-migrator-rss

执行下列命令，从 RSS 迁移所有文章。source 可以是文件路径或网址。

$ hexo migrate rss <source>

评论系统

NexT支持多款评论系统

如果想要取消某个页面or文章的评论，在文章的属性中增加comments: false

1 Valine

一款基于Leancloud的快速、简洁且高效的无后端评论系统。

支持匿名评论

效果图：

http://oxv1k8kvi.bkt.clouddn.com/18-4-2/25599553.jpg

获取APP ID 和 APP KEY

点击注册账号

点击创建应用

进入应用 > 设置 > 应用Key，可以看到APP ID 和 APP KEY
https://ws1.sinaimg.cn/large/006qRazegy1fibactm2csj30x80f2dhn.jpg

配置

打开主题配置文件 ，字段Valine

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:  # 填写获取的APP ID
  appkey: # 填写获取的APP KEY
  notify: true # 邮件提醒
  verify: true # 验证码
  placeholder: Just go go # 评论提示语
  avatar: mm # 头像，具体看Valine官网
  guest_info: nick,mail,link # 评论者相关属性
  pageSize: 10 # 分页

2 畅言

需要实名登录，最不能接受的是还要绑定手机

获取APP ID 和 APP KEY

点击注册账号

比较麻烦的是站点需要备案，没有备案只能使用15天

有种投机取巧的方式，自行搜索
http://oxv1k8kvi.bkt.clouddn.com/18-4-2/63931001.jpg
进入 > 后台总览 ，就可以看到了
http://oxv1k8kvi.bkt.clouddn.com/18-4-2/79876695.jpg

配置

打开主题配置文件 ，字段changyan

changyan:
  enable: true
  appid:  # 填写获取的APP ID
  appkey: # 填写获取的APP KEY

访问统计

页脚设计：/themes/next/layout/_partials/footer.swig

文章设置：/themes/next/layout/_macro/post.swig

1 不蒜子统计

进入主题配置文件 ，字段busuanzi

相关设置文件/themes/next/layout/_third-party/analytics/busuanzi-counter.swig

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site           整个网站访问用户量
  site_uv: true
  site_uv_header: 本站访客数
  site_uv_footer: 人次
  # custom pv span for the whole site           整个网站访问总次数
  site_pv: true
  site_pv_header: 本站总访问量
  site_pv_footer: 次
  # custom pv span for one page only            一篇文章的阅读次数
  page_pv: true
  page_pv_header: 本文总阅读量
  page_pv_footer: 次

2 LeanCloud统计

leancloud_visitors:  # 文章阅读次数统计
  enable: true
  appid:  # 填写获取的APP ID
  appkey: # 填写获取的APP KEY

3 字数统计

安装插件
```
$ npm install --save hexo-wordcount
```

配置

post_wordcount:
  item_text: true
  wordcount: false        # 文章字数
  min2read: false     # 阅读时长预计
  totalcount: true        # 全站字数
  separated_meta: false   # 分行

博文置顶

修改插件hero-generator-index ，文件node_modules/hexo-generator-index/lib/generator.js

// var posts = locals.posts.sort(config.index_generator.order_by);
// 改为
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
  if(a.top && b.top) { // 两篇文章top都有定义
    if(a.top == b.top) return b.date - a.date; // top值一样则按照文章日期降序排
    else return b.top - a.top; // 否则按照top值降序排
  }
  else if(a.top && !b.top) { // 只有一篇文章top有定义，将排在最前面
    return -1;
  }
  else if(!a.top && b.top) {
    return 1;
  }
  else return b.date - a.date; // 都没定义按照文章日期降序排
});

文章属性添加top值，数值越大越靠前

top: # 数值

文章搜索

安装插件

$ npm install hexo-generator-searchdb --save

站点配置文件 ，添加

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

主题配置文件 ，字段local_search

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: ture
  # 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

添加挂件

安装插件
```
$ npm install -save hexo-helper-live2d
```

安装挂件

预览

$ npm install --save live2d-widget-model-xxx   # xxx为挂件名

配置

站点配置文件 ，添加

live2d:
  enable: true
  scriptFrom: local
  model:      # 挂件模型
    use: live2d-widget-model-hijiki
  display:        # 位置
    # position: right
    width: 80
    height: 160
    bottom: -120
  mobile:     # 手机显示
    show: false

在线联系

基于DaoVoice实现

注册账号

邀请码 832ef3b6
获取API

应用设置 > 安装到网站
http://oxv1k8kvi.bkt.clouddn.com/18-4-2/20924917.jpg

配置

文件/themes/next/layout/_partials/head.swig ，添加

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

主题配置文件 ，添加

# Online contact 
daovoice: true
daovoice_app_id: # 你获取的API

效果
http://oxv1k8kvi.bkt.clouddn.com/18-4-2/95982243.jpg http://oxv1k8kvi.bkt.clouddn.com/18-4-2/853236.jpg
当有人发信息给你的时候，你可以通过DaoVoice在线交流，也可以关注DaoVoice小程序，绑定你的账号

添加音乐

网易云音乐外链

单曲
http://oxv1k8kvi.bkt.clouddn.com/18-4-7/76191555.jpg http://oxv1k8kvi.bkt.clouddn.com/18-4-7/25749304.jpg
复制代码，粘贴在你想要的位置，可以是文章或者是侧边栏
歌单

自己的歌单是没有生成外链。分享 $\rightarrow$ 动态 $\rightarrow$ 外链

http://oxv1k8kvi.bkt.clouddn.com/18-4-7/91677535.jpg

http://oxv1k8kvi.bkt.clouddn.com/18-4-7/63702029.jpg

效果
http://oxv1k8kvi.bkt.clouddn.com/18-4-7/11355888.jpg
可以缩放
http://oxv1k8kvi.bkt.clouddn.com/18-4-7/47115796.jpg

Aplayer

引入js文件

APlayer.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.6.0/APlayer.min.js"></script>

位置themes/next/layout/_partials/head.swig

Meting.min.js

<script src="https://cdn.jsdelivr.net/npm/meting@1.0.1/dist/Meting.min.js"></script>

位置themes/next/layout/_partials/footer.swig

添加音乐
- 音乐平台
```
  <div class="aplayer" data-id="" data-server=""></div>
```
  参数解释：
  - data-id: 歌曲/专辑/歌单 ID
  - data-server: 音乐平台，支持如下参数
    - netease （网易云音乐）
    - tencent （qq音乐）
    - xiami （虾米音乐）
    - kugou （酷狗音乐）
    - baidu （百度音乐）
  - data-type: 请求类型，支持如下参数
    - song （单曲）
    - album （专辑）
    - playlist （歌单）
    - search （搜索）
- 音乐外链（参数名可能与Aplayer中的不一样）
```
<div class="aplayer" data-title="" data-author="" data-url="" data-pic="" data-lrc=""></div>
```
  参数解释：
  - data-title: 歌名
  - data-author: 歌手
  - data-url: 音乐链接
  - data-pic: 音乐封面
  - data-lrc: 歌词
- 其他参数
  - data-mode: 播放模式
    - random （随机）
    - single （单曲）
    - circulation （列表循环）
    - order （列表）
  - data-autoplay: 自动播放
    - false
    - true
推荐

Aplayer自定义比iframe还好，可以加载有版权问题的音乐，墙裂推荐！！！

(｡･∀･)ﾉﾞ嗨！一下

这部分纯属玩乐，有点酷炫，我把它设置在了头像上，可以点击试一试

音乐有点鬼畜，想不有什么好的，节奏可以配上该动画

参考来自：Hexo high一下小功能

资源

js：http://oxv1k8kvi.bkt.clouddn.com/High.js

可以自行下载来看一下

里面的音乐地址和css可以替换一下

mp3：http://oxv1k8kvi.bkt.clouddn.com/harlem-shake.mp3

css：http://oxv1k8kvi.bkt.clouddn.com/harlem-shake-style.css

配置

文件/themes/next/layout/_partials/head.swig，添加

<script type="text/javascript" src="http://oxv1k8kvi.bkt.clouddn.com/High.js"></script>

然后，在你想要点击实现high一下功能的地方，添加

<a title="(｡･∀･)ﾉﾞ嗨！一下" style="underline: none" rel="alternate" class="mw-harlem_shake_slow wobble shake" href="javascript:shake()"> XXX </a>

参考链接

网友评论

本文标题：GitHub+Hexo搭建个人博客（四）Hexo高阶之第三方插件

本文链接：https://www.haomeiwen.com/subject/hyogiftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！