Hexo-Next搭建个人博客(集成DaoVoice在线联系功能)


注册

首先在DaoVoice注册个账号,点击->邀请码b3c7d22e
pW5DRP.png

完成后,会得到一个app_id,后面会用到:
appid

修改head.swig

修改/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 %}

位置贴图:
pWIwmF.md.png

主题配置文件

_config.yml文件中添加内容:

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

聊天窗口配置

附上我的聊天窗口的颜色、位置等设置信息:

至此,网页的在线联系功能已经完成,重新hexo d -g上传GitHub后,页面上就能看到效果了。

效果图:

可以关注小程序接收回复消息,很方便


现在往右下角看看(~ ̄▽ ̄)~ ,欢迎撩我(滑稽)。

如果你觉得这篇文章对你有用,欢迎赞赏哦~
本文结束啦 感谢您阅读
0%