title: Hexo博客添加在線(xiàn)聯(lián)系功能
date: 2018-08-29 21:03:11
tags:
- 博客
- git
- hexo
- 博客優(yōu)化
categories: 搭建博客
Hexo博客添加在線(xiàn)聯(lián)系功能
Hexo博客如何添加在線(xiàn)聯(lián)系功能呢,發(fā)現(xiàn)了一個(gè)不錯(cuò)的網(wǎng)站可以提供在線(xiàn)聯(lián)系的服務(wù)蔽挠，當(dāng)有用戶(hù)在網(wǎng)頁(yè)上給你留言后會(huì)通過(guò)郵件或者微信通知你槽唾，可以及時(shí)的解答用戶(hù)的疑問(wèn)。
最終的效果可以參考我博客的右下角,有個(gè)聊天的按鈕,效果如下所示:
image
配置方法如下:
首先到DaoVoice上注冊(cè)一個(gè)賬號(hào),注冊(cè)完成后會(huì)得到一個(gè)app_id，獲取appid的步驟如下圖所示:
image
以next主題為例,打開(kāi)/themes/next/layout/_partials/head.swig文件添加如下
{% 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:') + "http://widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}
接著打開(kāi)主題配置文件_config.yml霞扬，添加如下代碼：
# Online contact
daovoice: true
daovoice_app_id: 這里輸入前面獲取的app_id
最后執(zhí)行hexo clean && hexo g && hexo s就能看到效果了秘豹。
需要注意的是,next主題下聊天的按鈕會(huì)和其他按鈕重疊到一起杆查，可以到聊天設(shè)置禽车，修改下按鈕的位置:
image
最后到右上角選擇管理員姑宽，微信綁定,可以綁定你的微信號(hào)遣耍，關(guān)注公眾號(hào)后打開(kāi)小程序，就可以實(shí)時(shí)收發(fā)消息炮车，有新的消息也會(huì)通過(guò)微信通知舵变，設(shè)置頁(yè)面如下:
image
效果展示: 醬油哥博客
