hexo next增加DaoVoice聊天功能

发表于 | 更新于 | 分类于 | 阅读次数：

眼馋了好久别人的聊天功能。hexo+next的其他博客之前都没有记录下来，比如如何如何给文章增加评论，以及打赏功能等等。这次作为第一篇关于hexo+next的博客分享出来。

注册DaoVoice

首先点击DaoVoice官网进行注册。

接入
进入后台控制台

进入后台控制台，找到app_id
第一次注册，会提示用户尽快接入，很好找到app_id，如图所示：

也可以在「应用设置」菜单下的「安装到网站」菜单中找到

设置next主题

  1. 以 next 主题为例，打开 themes/next/layout/_partials/head/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 %}

  2. 在主题配置文件_config.yml，添加如下代码:

    1
    2
    3
    # Online contact 
    daovoice: true
    daovoice_app_id: 这里输入前面获取的app_id
    1. next 主题下聊天的按钮会和其他按钮重叠到一起，可以到聊天设置，修改下按钮的位置: