hexo next中接入DaoVoice

注册

• 官方网站：DaoVoice
• 填写信息：

• 进入应用设置 -> 安装到网站
  
• 获取接入代码和app_id
  

编写主题配置文件

• 找到themes/next/_config.yml目录
• 增加以下配置，其中 app_id 就是上图中红框中的 app_id

daovoice:
  enable: true
  app_id: ******

编写DaoVoice接入代码

• 找到themes/next/layout/_third-party/目录
• 在该目录下新增daovoice/daovoice.swig 文件
• daovoice.swig文件中写入DaoVoice 接入代码

{% if theme.daovoice.enable %}
   <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/{{ theme.daovoice.app_id }}.js","daovoice")
     daovoice('init', {
     app_id: "{{ theme.daovoice.app_id }}"
     });
     daovoice('update');
   </script>
 {% endif %}

在模板文件里引入DaoVoice接入代码

• 找到themes/next/layout/_layout.swig文件
• 引入刚才我们上面写的 daovoice.swig 文件

{% include '_third-party/daovoice/daovoice.swig' %}

检验是否接入成功

• 运行如下：

$ hexo g    // 生成静态文件
$ hexo s    // 在本地起测试服务器

• 查看 http://localhost:4000/ 页面是否右下角已经有了 DaoVoice 小图标
  
• 之后运行：

$ hexo d   #上传到github上

DaoVoice 的这个小图标可以自定义样式和位置, 可以调整到你喜欢的位置
引用：http://olivewind.com/2017/17040305/