Hexo Next主题下添加在线联系功能

今天在浏览别的小伙伴的hexo博客时发现有在线联系的功能,觉得好高大上,自己便琢磨着也整一个。经过一番各种查资料后发现DaoVoice已经帮我们完成了这一切,我们只需集成一下便可以实现在线联系的功能了。效果图如下

注册账号获取app_id

官网完成注册后便可以根据一下步棸获取到app_id,应用设置->安装到网站

与Hexo 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 %}

在next主题_config.yml配置文件的末尾加上以下内容

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

绑定微信方便实时接收信息

在右上角用户的下拉菜单可以看到绑定微信的按钮

-------------本文结束您的阅读与肯定是我持续装*的最大动力-------------