开发工具

hexo博客添加评论、字数、阅读时间以及访问量

hexo进阶
阅读次数: 0
本文字数: 1.2k 阅读时长: 6 分钟

hexo添加评论及访问量

这里我们使用valine评论系统，大部分的hexo主题已经集成了valine评论系统了，关于valine的更多细节，参考：https://valine.js.org/quickstart.html

1、首先去https://www.leancloud.cn注册一个账户，注册完以后需要创建一个应用，名字可以随便起，然后 进入应用->设置->应用key ,获取你的 appid 和 appkey

2、 打开主题配置文件 搜索valine，填入appid 和 appkey，这里我使用的是hueman主题：

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
# Comment
comment:
    //对于hueman主题来说，特别注意这里需要去掉disqus后面的字符串，不然会默认使用disqus评论系统的
    disqus: # enter disqus shortname here 
    duoshuo: # enter duoshuo shortname here
    youyan: # enter youyan uid here
    facebook: # enter true to enable
    isso: # options for isso. All fields below are OPTIONAL (except for site). See https://posativ.org/isso/docs/configuration/client/ for more information.
        on: # enter true to enable isso
        site: # enter the domain name of your own comment isso server, eg. comments.example.com
        lang: # two letter language code, eg. en
        reply-to-self: # true when your server spam guard has this value set
        require-author: # true when your server spam guard has this value set
        require-email: # true when your server spam guard has this value set
        max-comments-top: # number of top level comments to show, specify "inf" for all
        max-comments-nested: # number of nested comments to show.
        reveal-on-click: # number of comments to reveal when clicking "hidden" link
        avatar: # true|false, setting to enable avatar generation
        avatar-bg: # background color of avatar, i.e. "#f0f0f0"
        avatar-fg: # set pallet of foreground colors (up to 8) i.e. "#9abf88 #5698c4 #e279a3 #9163b6"
        vote: # true|false, setting to enable voting feature on client side.
        vote-levels: # levels to customize appearance of comments, eg. "[-5, 5, 15]" or "0,5,10"
    changyan:
        appId: # enter the changyan appId here
        appKey: # enter the changyan appKey here
        on: # enter true to enable
    //valine配置开始
    valine: # Valine Comment System https://github.com/xCss/Valine
        on: true # true设置为开启valine评论系统
        appId: HTT9HtdG3ACsrMQEd8X7aSD5-gzGzoHsz
        appKey: gEf913xnOAwiO8lVEWztLOQC
        notify: false # enter true to enable <Mail notifier>, default: false; https://github.com/xCss/Valine/wiki/Valine-%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F%E4%B8%AD%E7%9A%84%E9%82%AE%E4%BB%B6%E6%8F%90%E9%86%92%E8%AE%BE%E7%BD%AE
        verify: false # enter true to enable <Validation code>, default: false
        placeholder: Just Do It # enter the comment box placeholder
        avatar: mm # (''/mm/identicon/monsterid/wavatar/retro/hide), more to see https://valine.js.org/avatar.html
        avatar_cdn: https://gravatar.loli.net/avatar/ # avatar CDN address, default gravatar.cat.net
        pageSize: 10 # comments of one page
        // 开启文章访问量
        visitor: true # count reading numbers; If true, the numbers will also show below the title of every post
        recordip: true #false # If true, record commenter's ip, which is shown in LeanCloud pannel
    //valine配置结束       
    gitalk:
        on: # enter true to enable gitalk
        owner: # GitHub user name
        repo: # GitHub repository name
        client_id: # OAuth application client id
        client_secret: # OAuth application client secret
        admin: # GitHub repo owner and collaborators who can initialize github issues
               # Can either be a string or an array.

这样评论系统以及访问量就弄好了。

自定义表情包

valine还支持自定义头像https://valine.js.org/avatar.html以及自定义表情包https://valine.js.org/emoji.html等高级功能。

这里我们以hueman主题为例来实践一下自定义表情包功能。

首先找到hueman主题下的valine.ejs，路径如下所示：
/Users/easyliu/Documents/hexoBlog/themes/hueman/layout/comment/valine.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
<% if (typeof(script) !== 'undefined' && script) { %>
    <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
    <script>
        var GUEST = ['nick','mail','link'];
        var meta = '<%= theme.comment.valine.meta %>';
        meta = meta.split(',').filter(function (item) {
            return GUEST.indexOf(item)>-1;
        });
        var avatarcdn = '<%= theme.comment.valine.avatar_cdn %>' == true;
        new Valine({
            el: '.vcomments',
            notify: "<%= theme.comment.valine.notify %>",
            verify: "<%= theme.comment.valine.verify %>",
            appId: "<%= theme.comment.valine.appId %>",
            appKey: "<%= theme.comment.valine.appKey %>",
            placeholder: "<%= theme.comment.valine.placeholder %>",
            avatar:"<%= theme.comment.valine.avatar %>",
            recordIP:"<%= theme.comment.valine.recordip %>",
            visitor: "<%= theme.comment.valine.visitor %>"
        });
    </script>
<% } else { %>
    <!-- Valine -->
    <div class="vcomments"></div>
<% } %>

我们可以编辑这个valine.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
<% if (typeof(script) !== 'undefined' && script) { %>
    <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
    <script>
        var GUEST = ['nick','mail','link'];
        var meta = '<%= theme.comment.valine.meta %>';
        meta = meta.split(',').filter(function (item) {
            return GUEST.indexOf(item)>-1;
        });
        var avatarcdn = '<%= theme.comment.valine.avatar_cdn %>' == true;
        new Valine({
            el: '.vcomments',
            notify: "<%= theme.comment.valine.notify %>",
            verify: "<%= theme.comment.valine.verify %>",
            appId: "<%= theme.comment.valine.appId %>",
            appKey: "<%= theme.comment.valine.appKey %>",
            placeholder: "<%= theme.comment.valine.placeholder %>",
            avatar:"<%= theme.comment.valine.avatar %>",
            recordIP:"<%= theme.comment.valine.recordip %>",
            visitor: "<%= theme.comment.valine.visitor %>",
            // 设置Bilibili表情包地址
            emojiCDN: '//i0.hdslb.com/bfs/emote/', 
            // 表情title和图片映射
            emojiMaps: {
                "doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
                "亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
                "偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png",
                "再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
                "冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
                "发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
                "发财": "34db290afd2963723c6eb3c4560667db7253a21a.png",
                "可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
                "吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png",
                "呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
                "呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png",
                "困": "241ee304e44c0af029adceb294399391e4737ef2.png",
                "坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png",
                "大佬": "093c1e2c490161aca397afc45573c877cdead616.png",
                "大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png",
                "委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
                "害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
                "尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
                "微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
                "思考": "90cf159733e558137ed20aa04d09964436f618a1.png",
                "惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png",
                 // ... 更多表情
            }
        });
    </script>
<% } else { %>
    <!-- Valine -->
    <div class="vcomments"></div>
<% } %>

表情包效果可以在评论区查看

字数及阅读时间展示

安装如下插件即可：

npm install –save hexo-wordcount