DaoVoice 可以提供在线联系的功能,可以让静态博客Hexo更加多样和完整。

设置完成效果如下:

img
img

实现方法

注册

首先需要注册一个 DaoVoice,点击注册

注册成功后,进入后台控制台,进入到 应用设置-->安装到网站 页面,可以得到一个 app_id

img
img

之后复制下的app_id

img
img

接下来,打开\themes\hexo-theme-matery\layout\_partial文件夹下的footer.ejs文件

在文件末尾写入:

<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: "刚刚复制的app_id"
    });
  daovoice('update');
  </script>

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

# Online contact 
daovoice: true
daovoice_app_id: 这里输入前面复制的app_id

hexo-theme-matery主题下聊天的按钮会和其他按钮重叠到一起,可以到聊天设置,修改下按钮的位置:

20190913094934.png
20190913094934.png

位置可以在 hexo s 调试模式下进行调试,效果满意后部署就可以看到最终效果啦!