前言

Hexo Chic主题不自带评论系统。因为Valine提供匿名留言，所以今天折腾安装了一下。好辛苦阿。
Valine依赖leancloud，而LC需要实名认证。

参考资料

网上2篇很有参考价值的文章：

总结的步骤

我自己总结的步骤。

  1. 注册leancloud，获得对应的keys
  2. 修改主题配置文件_config.yml
    记得修改参数appid & appkey。
1
2
3
4
5
6
7
8
9
# Valine评论系统（支持匿名）
# Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
valine: 
  appid:    #填写leancloud App ID
  appkey:  #填写leancloud App key
  verify: false     #验证码
  notify: false     #评论回复提醒
  avatar: monsterid   #评论列表头像样式：''/mp/identicon/monsterid/wavatar/retro/hide
  placeholder: 请告诉我你的想法
  1. 添加/themes/Chic/layout/_plugins/valine.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="vcomment" class="comment"></div> 
<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 notify = '<%= theme.valine.notify %>' == true ? true : false;
   var verify = '<%= theme.valine.verify %>' == true ? true : false;
    window.onload = function() {
        new Valine({
            //el: '.comment',
            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>
  1. 修改/themes/Chic/layout/_page/post.ejs
    在</article> 前面添加可以可以了。
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
        <section class="post-nav">
            <% if(post.prev){ %>
                <a class="prev" rel="prev" href="<%- url_for(post.prev.path)%>"><%- post.prev.title%></a>
            <% } %>
            <% if(post.next){ %>
            <a class="next" rel="next" href="<%- url_for(post.next.path)%>"><%- post.next.title%></a>
            <% } %>
        </section>

        <!-- 添加Valine评论系统支持 -->
        <br />
        <br />
        <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
            <section id="comments" class="comments">
                <style>
                    .comments{margin:30px;padding:10px;background:#fff}
                    @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
                </style>
                <%- partial('_plugins/valine', {
                    key: post.slug,
                    title: post.title,
                    url: config.url+url_for(post.path)
                }) %>
            </section>
        <% } %>

</article>
  1. 重启应用
    hexo g & hexo s

终于！一个下午的时间，你也可以通过留言系统跟网友交流拉！ :joy: :laughing:

添加阅读统计

效果图

蓝色

  1. 修改/themes/Chic/layout/_plugins/valine.ejs，添加参数visitor: "<%= theme.valine.visitor %>"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="vcomment" class="comment"></div> 
<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 notify = '<%= theme.valine.notify %>' == true ? true : false;
   var verify = '<%= theme.valine.verify %>' == true ? true : false;
    window.onload = function() {
        new Valine({
            //el: '.comment',
			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: "<%= theme.valine.visitor %>"
        });
    }
</script>
  1. 修改/themes/Chic/layout/_page/post.ejs
        <header class="post-header">
            <h1 class="post-title"><%= page.title %></h1>
            <% if(theme.post_meta_enable){ %>
                <div class="post-meta">
                    <% if(theme.post_author_enable && config.author){ %>
                        Author: <a itemprop="author" rel="author" href="/"><%- config.author %></a>
                    <% } %>

                    <% if(page.date && theme.post_date_enable){ %>
                        <span class="post-time">
                        Date: <a href="#"><%- date(page.date, theme.date_format)  %>&nbsp;&nbsp;<%- time(page.date, theme.time_format)%></a>
                        </span>
                    <% } %>
                    <% if(page.categories.length!==0 && theme.post_category_enable){ %>
                        <span class="post-category">
                    Category:
                            <% page.categories.forEach(item=>{ %>
                                <a href="<%- url_for(item.path) %>"><%- item.name %></a>
                            <% }) %>
                        </span>
                    <% } %>
                    <span id="<%- url_for(post.path) %>" class="leancloud_visitors view" data-flag-title="<%= post.title %>">
                    <em class="post-meta-item-text">Pageviews:</em>
                    <i class="leancloud-visitors-count">loading</i>
                    </span>
                </div>
            <% } %>
        </header>

参考文章