使用hexo搭建博客添加在线联系功能

博客新增在线联系功能

这个在线联系功能是用 DaoVoice 做的

第一步: 注册 DaoVoice 账号

我的邀请码是 e01c7cad

完成后，会得到一个app_id，后面会用到

• 基于hexo搭建的博客,网上有很多教程,但都是swig模板的主题去添加的。因为我用的是ejs模板的主题，所以语法上是不一样的

第二步: 修改head.swig / head.ejs

首先找到 /themes/next/layout/_partials/head.swig 这个文件，我的是 /themes/next/layout/_partials/head.ejs，在前面加上以下代码

注意’//widget.daovoice.io/widget/123456.js’ 中js文件名改成自己的id就行：

• 如果你的文件后缀是 .swjg

  {% 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/123456.js","daovoice")
    daovoice('init', {
        app_id: "{{theme.daovoice_app_id}}"
      });
    daovoice('update');
    </script>
  {% endif %}

• 如果你的文件后缀是 .ejs

  {% 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/123456.js","daovoice")
      let app_id = <%- JSON.stringify(theme.daovoice_app_id) %>
      daovoice('init', {
          app_id: app_id
      });
      daovoice('update');
    </script>
  {% } %}

第三步: 主题配置文件添加

在_config.yml文件中添加内容：

# Online contact
daovoice: true
daovoice_app_id:   # 这里填你刚才获得的 app_id

至此，博客的在线联系功能已经完成。

打赏