【hexo博客】hexo博客添加对valine的支持

hexo博客
,

hexo 博客添加对 valine 的支持

想着在 hexo 中添加一个评论系统。最后是选了 valine。valine 需要使用 learn cloud 作为评论的后端，所以还需要先注册一个 learn cloud 的账号。关于 learn cloud 的注册和配置 valine 的官方网站里已经很详细了，这里就不再赘述。

在 valine 的官方网站中，作者提到对 hexo 和 Jekyll 等博客提供了支持。可以看到，作者是对各个 hexo 的主题手动提交了 pull request，来对这些主题添加对 valine 的支持（真是辛苦作者了）。然而我选择的主题 cactus 的原作者对 valine 并不感兴趣，所以并未添加对 valine 的支持。而 github: xuthus5/hexo-theme-cactus 是对 cactus 的修改版本，主要增加了中文支持，并修改了一些样式，最主要的是将 disqus 评论系统替换为了 valine 系统。但我并不喜欢这个配色和样式，所以我的想法是：

结合上面两者，在 cactus 中添加 valine 的支持。

valine 的使用方法

在引入 Valine.min.js 后，添加下面的 script 即可初始化一个 Valine 评论块。

1
2
3
4
5
6
7
8
9
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
... ...
<script>
    new Valine({
        el: '#vcomments',
        appId: 'Your appId',
        appKey: 'Your appKey'
    })
</script>

Valine 的相关字段如下：

  • appId，appKey：从 learn cloud 中获取。必填。
  • meta：评论者可以提供的信息，默认为 ['nick','mail','link']
  • requiredFields：评论者必须提供的信息，默认为 [] 。
  • visitor：统计文章的访问量

所以，原则上，在 hexo 为每个 .md 生成 html 页面时，在页面下附带这个 script 就能够添加一个评论框。

修改 cactus 以支持 valine

先将 cactus 主题下载到 themes 目录下：

1
git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

然后修改 theme/cactus/layout/partial/comments.ejs ，在后面添加下列内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<% if(page.comments && theme.valine.enabled){ %>
    <div class="blog-post-comments">
      <section id="comment">
        <div id="valine_container" class="valine_thread"></div>
      </section>
      <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
      <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
      <script>
        var GUEST_INFO = ["nick", "mail", "link"];
        var guest_info = "<%= theme.valine.guest_info %>"
          .split(",")
          .filter(function (item) {
            return GUEST_INFO.indexOf(item) > -1;
          });
        var valine = new Valine();
        valine.init({
          el: "#valine_container",
          appId: "<%= theme.valine.appId %>",
          appKey: "<%= theme.valine.appKey %>",
          placeholder: "<%= theme.valine.placeholder %>",
          pageSize: "<%= theme.valine.pageSize %>",
          avatar: "<%= theme.valine.avatar %>",
          lang: "<%= theme.valine.lang %>",
          emojiCDN: "https://mirrorcdn.bili33.top/",
          requiredFields: ["nickname,"],
          meta: guest_info,
          // 表情title和图片映射
          emojiMaps: {
            Tieba2: "Tieba/i_f01.png",
            Tieba3: "Tieba/i_f02.png",
            Tieba4: "Tieba/i_f03.png",
            Tieba5: "Tieba/i_f04.png",
            Tieba6: "Tieba/i_f05.png",
            Tieba7: "Tieba/i_f06.png",
            Tieba8: "Tieba/i_f07.png",
            Tieba9: "Tieba/i_f08.png",
            Tieba10: "Tieba/i_f09.png",
            Tieba11: "Tieba/i_f10.png",
            Tieba12: "Tieba/i_f11.png",
            Tieba13: "Tieba/i_f12.png",
            Tieba14: "Tieba/i_f13.png",
            Tieba15: "Tieba/i_f14.png",
            Tieba16: "Tieba/i_f15.png",
            Tieba17: "Tieba/i_f16.png",
            Tieba18: "Tieba/i_f17.png",
            Tieba19: "Tieba/i_f18.png",
            Tieba20: "Tieba/i_f19.png",
            Tieba21: "Tieba/i_f20.png",
            Tieba22: "Tieba/i_f21.png",
            Tieba23: "Tieba/i_f22.png",
            Tieba24: "Tieba/i_f23.png",
            Tieba25: "Tieba/i_f24.png",
            Tieba26: "Tieba/i_f25.png",
            Tieba27: "Tieba/i_f26.png",
            Tieba28: "Tieba/i_f27.png",
            Tieba29: "Tieba/i_f28.png",
            Tieba30: "Tieba/i_f29.png",
            Tieba31: "Tieba/i_f30.png",
            Tieba32: "Tieba/i_f31.png",
            Tieba33: "Tieba/i_f32.png",
            Tieba34: "Tieba/i_f33.png",
            bilibilitv2: "bilibilitv/[tv_doge].png",
            bilibilitv3: "bilibilitv/[tv_亲亲].png",
            bilibilitv4: "bilibilitv/[tv_偷笑].png",
            bilibilitv5: "bilibilitv/[tv_再见].png",
            bilibilitv6: "bilibilitv/[tv_冷漠].png",
            bilibilitv7: "bilibilitv/[tv_发怒].png",
            bilibilitv8: "bilibilitv/[tv_发财].png",
            bilibilitv9: "bilibilitv/[tv_可爱].png",
            bilibilitv10: "bilibilitv/[tv_吐血].png",
            bilibilitv11: "bilibilitv/[tv_呆].png",
            bilibilitv12: "bilibilitv/[tv_呕吐].png",
            bilibilitv13: "bilibilitv/[tv_困].png",
            bilibilitv14: "bilibilitv/[tv_坏笑].png",
            bilibilitv15: "bilibilitv/[tv_大佬].png",
            bilibilitv16: "bilibilitv/[tv_大哭].png",
            bilibilitv17: "bilibilitv/[tv_委屈].png",
            bilibilitv18: "bilibilitv/[tv_害羞].png",
            bilibilitv19: "bilibilitv/[tv_尴尬].png",
            bilibilitv20: "bilibilitv/[tv_微笑].png",
            bilibilitv21: "bilibilitv/[tv_思考].png",
            bilibilitv22: "bilibilitv/[tv_惊吓].png",
            bilibilitv23: "bilibilitv/[tv_打脸].png",
            bilibilitv24: "bilibilitv/[tv_抓狂].png",
            bilibilitv25: "bilibilitv/[tv_抠鼻].png",
            bilibilitv26: "bilibilitv/[tv_斜眼笑].png",
            bilibilitv27: "bilibilitv/[tv_无奈].png",
            bilibilitv28: "bilibilitv/[tv_晕].png",
            bilibilitv29: "bilibilitv/[tv_流汗].png",
            bilibilitv30: "bilibilitv/[tv_流泪].png",
            bilibilitv31: "bilibilitv/[tv_流鼻血].png",
            bilibilitv32: "bilibilitv/[tv_点赞].png",
            bilibilitv33: "bilibilitv/[tv_生气].png",
            bilibilitv34: "bilibilitv/[tv_生病].png",
            bilibilitv35: "bilibilitv/[tv_疑问].png",
            bilibilitv36: "bilibilitv/[tv_白眼].png",
            bilibilitv37: "bilibilitv/[tv_皱眉].png",
            bilibilitv38: "bilibilitv/[tv_目瞪口呆].png",
            bilibilitv39: "bilibilitv/[tv_睡着].png",
            bilibilitv40: "bilibilitv/[tv_笑哭].png",
            bilibilitv41: "bilibilitv/[tv_腼腆].png",
            bilibilitv42: "bilibilitv/[tv_色].png",
            bilibilitv43: "bilibilitv/[tv_调侃].png",
            bilibilitv44: "bilibilitv/[tv_调皮].png",
            bilibilitv45: "bilibilitv/[tv_鄙视].png",
            bilibilitv46: "bilibilitv/[tv_闭嘴].png",
            bilibilitv47: "bilibilitv/[tv_难过].png",
            bilibilitv48: "bilibilitv/[tv_馋].png",
            bilibilitv49: "bilibilitv/[tv_鬼脸].png",
            bilibilitv50: "bilibilitv/[tv_黑人问号].png",
            bilibilitv51: "bilibilitv/[tv_鼓掌].png",
            bilibili22332: "bilibili2233/[2233娘_卖萌].png",
            bilibili22333: "bilibili2233/[2233娘_吃惊].png",
            bilibili22334: "bilibili2233/[2233娘_吐魂].png",
            bilibili22335: "bilibili2233/[2233娘_喝水].png",
            bilibili22336: "bilibili2233/[2233娘_困惑].png",
            bilibili22337: "bilibili2233/[2233娘_大哭].png",
            bilibili22338: "bilibili2233/[2233娘_大笑].png",
            bilibili22339: "bilibili2233/[2233娘_委屈].png",
            bilibili223310: "bilibili2233/[2233娘_怒].png",
            bilibili223311: "bilibili2233/[2233娘_无言].png",
            bilibili223312: "bilibili2233/[2233娘_汗].png",
            bilibili223313: "bilibili2233/[2233娘_疑问].png",
            bilibili223314: "bilibili2233/[2233娘_第一].png",
            bilibili223315: "bilibili2233/[2233娘_耶].png",
            bilibili223316: "bilibili2233/[2233娘_郁闷].png",
          },
        });
      </script>
    </div>
    <% } %>

theme/cactus/layout/post.ejs 末尾添加下列代码：

这一部分似乎不添加也可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<script>
  //检测推送
  var pushType = "<%= theme.valine.pushType %>";
  var pushLink = "<%= theme.valine.pushLink %>";
  var siteName = "<%= config.title %>";

  var ValineButton = document.getElementsByClassName("vsubmit vbtn")[0];
  //分情况推送
  if (pushType === "sc") {
    var title = "text=" + siteName + "上又有新评论啦~!";
    function send_valine_Server() {
      //获取元素信息
      var pagename = document.title;
      var wz = pagename.indexOf("|");
      var res = pagename.substring(0, wz);
      var pageurl = document.URL;
      var ptime = new Date();
      var vnick = document.getElementsByClassName("vnick vinput")[0].value;
      var vmail = document.getElementsByClassName("vmail vinput")[0].value;
      var vlink = document.getElementsByClassName("vlink vinput")[0].value;
      var veditor = document.getElementsByClassName("veditor vinput")[0].value;
      var text = "desp=";
      var data =
        text +
        "|昵称：" +
        "|邮箱：" +
        "|网站地址：" +
        "|当前页面：" +
        "|评论内容：" +
        "|跳转链接：" +
        "|评论时间" +
        "\n" +
        "|----|----|----|----|" +
        "\n" +
        "|   " +
        vnick +
        "   |   " +
        vmail +
        "  |  " +
        vlink +
        "|   " +
        res +
        "| " +
        veditor +
        "| " +
        pageurl +
        "|" +
        ptime.toLocaleString() +
        "|";
      var httpRequest = new XMLHttpRequest(); //第一步：创建需要的对象
      httpRequest.open("POST", pushLink, true); //第二步：打开连接
      httpRequest.setRequestHeader(
        "Content-type",
        "application/x-www-form-urlencoded"
      ); //设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
      httpRequest.send(title + "&" + data); //发送请求 将情头体写在send中
    }
    ValineButton.onclick = send_valine_Server;
  } else if (pushType === "qmsg") {
    var title = "msg=" + siteName + "上又有新评论啦~!\n";
    function send_valine_Qmsg() {
      //获取元素信息
      var pagename = document.title;
      var wz = pagename.indexOf("|");
      var res = pagename.substring(0, wz);
      var pageurl = document.URL;
      var ptime = new Date();
      var vnick = document.getElementsByClassName("vnick vinput")[0].value;
      var vmail = document.getElementsByClassName("vmail vinput")[0].value;
      var vlink = document.getElementsByClassName("vlink vinput")[0].value;
      var veditor = document.getElementsByClassName("veditor vinput")[0].value;
      var data =
        "昵称：" +
        vnick +
        "\n邮箱：" +
        vmail +
        "\n网站地址：" +
        vlink +
        "\n当前页面：" +
        pagename +
        "\n评论内容：" +
        veditor +
        "\n跳转链接：" +
        pageurl +
        "\n评论时间" +
        ptime.toLocaleString();
      var httpRequest = new XMLHttpRequest(); //第一步：创建需要的对象
      httpRequest.open("POST", pushLink, true); //第二步：打开连接
      httpRequest.setRequestHeader(
        "Content-type",
        "application/x-www-form-urlencoded"
      ); //设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
      httpRequest.send(title + data); //发送请求 将情头体写在send中
    }
    ValineButton.onclick = send_valine_Qmsg;
  }
</script>

在 theme/cactus/_config.yml 中添加 valine 字段：

1
2
3
4
5
6
7
8
9
10
11
valine:
  enabled: true
  appId: GRIv0BSa2YNdipGRhOPk5BKl-MdYXbMMI
  appKey: dxhdfKByaaogNpYKlbGMjgHF

  placeholder: "使用在gravatar注册的邮箱可以显示头像哦～"
  avatar: hide # gravatar style
  guest_info: "nick","mail" # custom comment header
  pageSize: 10 # pagination size
  visitor: true
  lang: zh-cn

其他

在 valine 的官方网站上，作者已经不再更新源码，只发布 release。现在出现了基于 valine 的新系统 waline。后续会考虑将 valine 替换为 waline。