hexo博客 | Hexo博客个别主题添加valine评论


针对ejs编写的主题，基本是在整体布局的article.ejs/post.ejs插入评论占位，再在comment.ejs里调用valine

hipaper

  1. hipaper/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
valine:
  enable: true 
  appid:   # your leancloud application appid
  appkey:  # your leancloud application appkey
  notify: false
  verify: false
  placeholder: 写下你的评论吧~
  avatar: retro 
  guest_info: nick,mail,link 
  pageSize: 10 
  language: 
  visitor: true 
  comment_count: true

  1. hipaper/layout/_partial/article.ejs

    1
    2
    3
    <% if (!index && post.comments && (theme.valine.enable || theme.duoshuo_shortname || theme.disqus_shortname || theme.uyan_uid || theme.wumii || theme.livere_shortname)){ %>
    <%- partial('comment') %>
    <% } %>

  2. hipaper/layout/_partial/comment.ejs ，多说往后推一个，将第一个写成valine：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (theme.valine.appid && theme.valine.appkey) {%>
    <script src="//cdn.jsdelivr.net/npm/leancloud-storage@3/dist/av-min.js"></script>
    <script src='//unpkg.com/valine@latest/dist/Valine.min.js'></script>
    <div id="vcomments"></div>
    <script>
        var notify = '<%= theme.valine.notify %>' == true ? true : false;
        var verify = '<%= theme.valine.verify %>' == true ? true : false;
        window.onload = function() {
            new Valine({
                el: '#vcomments',
                notify: notify,
                verify: verify,
                app_id: "<%= theme.valine.appid %>",
                app_key: "<%= theme.valine.appkey %>",
                placeholder: "<%= theme.valine.placeholder %>",
                avatar:"<%= theme.valine.avatar %>"
            });
        }
    </script>
<% } else if (theme.duoshuo_shortname) %>

Daily

  1. Daily/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    valine:
      enable: true 
      appid:   # your leancloud application appid
      appkey:  # your leancloud application appkey
      notify: false
      verify: false
      placeholder: 写下你的评论吧~
      avatar: retro 
      guest_info: nick,mail,link 
      pageSize: 10 
      language: 
      visitor: true 
      comment_count: true 

    2. Daily/layout/post.ejs
    ```js
        <!-- Comments -->
        <div class="container">
            <% if (page.comments){ %>
                <%- partial('_partial/comment') %>
            <% } %> 
        </div>

  2. Daily/layout/_partial/comment.ejs

引用的两个包可能会过期，届时需去 github 的 Valine 项目获取新的 cdn，在 min.js 中搜索 av-min

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
<% if (theme.valine.appid && theme.valine.appkey) {%>
    <script src="//cdn.jsdelivr.net/npm/leancloud-storage@3/dist/av-min.js"></script>
    <script src='//unpkg.com/valine@latest/dist/Valine.min.js'></script>
    <div id="vcomments"></div>
    <script>
        var notify = '<%= theme.valine.notify %>' == true ? true : false;
        var verify = '<%= theme.valine.verify %>' == true ? true : false;
        window.onload = function() {
            new Valine({
                el: '#vcomments',
                notify: notify,
                verify: verify,
                app_id: "<%= theme.valine.appid %>",
                app_key: "<%= theme.valine.appkey %>",
                placeholder: "<%= theme.valine.placeholder %>",
                avatar:"<%= theme.valine.avatar %>",
                visitor: true,
                // 设置Bilibili表情包地址
                emojiCDN: '//i0.hdslb.com/bfs/emote/', 
                // 表情title和图片映射
                emojiMaps: {
                    "tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
                    "tv_亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
                    "tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png",
                    "tv_再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
                    "tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
                    "tv_发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
                    "tv_发财": "34db290afd2963723c6eb3c4560667db7253a21a.png",
                    "tv_可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
                    "tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png",
                    "tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
                    "tv_呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png",
                    "tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png",
                    "tv_坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png",
                    "tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png",
                    "tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png",
                    "tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
                    "tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
                    "tv_尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
                    "tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
                    "tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png",
                    "tv_惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png",
                    // ... 更多表情
                }
            });
        }
    </script>
<% } else if(config.disqus_shortname) { %>
...