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

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

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

利用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 IDAPP KEY

    点击注册账号

    点击创建应用

    进入应用 > 设置 > 应用Key,可以看到APP IDAPP 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 IDAPP 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小程序,绑定你的账号

添加音乐

网易云音乐外链

  1. ​ 单曲

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

    复制代码,粘贴在你想要的位置,可以是文章 或者是 侧边栏

  2. 歌单

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

http://oxv1k8kvi.bkt.clouddn.com/18-4-7/91677535.jpg
http://oxv1k8kvi.bkt.clouddn.com/18-4-7/63702029.jpg
  1. 效果

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

    可以缩放

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

Aplayer

  1. 引入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

  2. 添加音乐

    • 音乐平台

        <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

  3. 推荐

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

(。・∀・)ノ゙嗨!一下

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

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

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

参考链接

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,898评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,401评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,058评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,539评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,382评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,319评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,706评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,370评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,664评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,715评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,476评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,326评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,730评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,003评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,275评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,683评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,877评论 2 335

推荐阅读更多精彩内容