hexo next 配置 DaoVoice 实现在线聊天功能

DaoVoice 可以提供在线联系的功能,我们可以借助于此在自己的站点上接入了此功能。

我们先看下设置后的效果:

DaoVoice 在线联系

看着还不错吧,可以在线留言,作者会收到邮件,如果绑定了微信,作者还会收到微信通知。

下面就开始设置吧。

注册

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

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

注册获取 app_id

设置

下面就进行主题中的一些设置。

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

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

1
2
3
# Online contact 
daovoice: true
daovoice_app_id: 这里输入前面获取的app_id

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

设置聊天图标位置

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

最后到右上角选择管理员,微信绑定,可以绑定你的微信号,关注公众号后打开小程序,就可以实时收发消息,有新的消息也会通过微信通知,设置页面如下:

绑定微信

hoxis wechat
一个脱离了高级趣味的程序员,关注回复1024有惊喜~
赞赏一杯咖啡
  • 本文作者: hoxis | 微信公众号【不正经程序员】
  • 本文链接: https://hoxis.github.io/hexo-next-daovoice.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!
  • 并保留本声明和上方二维码。感谢您的阅读和支持!
0%