avatar

hexo Butterfly主题右侧添加DaoVoice

hexo

安装教程

  1. 先去 DaoVoice 注册账号,登录进去,创建应用

创建应用

  • 公司名称:随便填(就是 应用名称
  • 联系电话:自己的电话
  • 公司规模:随便填
  • 邀请码:不用填
  1. 在创建的应用内找到 应用设置,可以修改 应用名称应用logo

    应用设置

  2. 点击 安装到网站 ,即可看到安装的编程语言

    安装到网站

  3. 我们选择 js 即可,复制其中的代码,不会的代码如下(代码中的 X ,换成 自己独有的id 即可):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(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/XXXXXXXX.js", "daovoice");
daovoice('init', {
app_id: "XXXXXXXX"
});
daovoice('update');
  1. 将代码新建一个 daovoice.js 文件,放到 butterfly 主题的 source/js 下即可。

文件位置

  1. 在主题的配置文件 主目录/source/_data/butterfly.yml 中添加如下代码:

    1
    daovoice: /js/daovoice.js

    修改配置文件

  2. 在主题的配置文件 主目录/source/_data/butterfly.yml 中再添加如下代码:

    1
    2
    3
    daovoice: true
    # X为自己独有的id
    daovoice_app_id: XXXXX

    修改配置文件

  3. 主题目录/layout/includes/head.pug 添加如下代码:

    1
    2
    3
    //在线聊天
    if theme.daovoice
    script(src=url_for(theme.CDN.daovoice) defer)

检查是否安装成功

  1. 网页是否包含聊天图标
  2. 点开图标里面是否是自己的应用名

右边聊天图标

-------------纸短情长 下次再见-------------
文武科技社
好用、好玩的都在这里!
文章作者: 程序小黑
文章链接: https://chengxuxiaohei.cn/hexo/hexo-butterfly-daovoice.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 文武科技社
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论