hexo

Hexo博客landscape-plus加入评论系统Valine

Landscape-plus主题使用的是”多说“，但是多说早就停止运营了。

所以考虑其他的评论系统替换，这儿我查找了其他的评论如Disqus、Gitment、来必力等，如果需要集成Gitment评论系统的可以参考这一篇文章，我最后选择了valine。

这儿参考了博客添加评论系统这篇文章，感谢这位小哥！

使用valine介绍

高速，使用国内后端云服务提供商 LeanCloud 提供的存储服务
开源，自定义程度高
支持邮件通知
支持验证码
支持 Markdown

valine 的安装和使用

1
2
# Duoshuo
duoshuo_shortname: reqianduan

“换成”

1
2
3
4
5
6
7
8
9
10
11
#valine leancloud
valine_enable: true # 是否开启 控制评论的开关
valine:
  appid: kh6N00Qk8UIhu1N8Qfu168TH-g3gzo7sz #leancloud中的appid  换成你申请的 这儿这个id是无效的
  appkey: YJrjTtExKMfc45OMLWhCzpHk #leancloud中的appKey 换成你申请的 这儿这个key是无效的
  placeholder: 想说点什么...  #默认留言框内的文字
  notify: false  #新留言是否需要通知 https://github.com/xCss/Valine/wiki
  verify: false  #是否需要验证 验证比较反人类建议false关闭
  avatar: mm  #是否需要验证 验证比较反人类建议false关闭 #默认头像 hide:不显示头像 mm:一个灰白的头像 identicon:抽象的几何图形(根据邮箱或者昵称生成) monsterid:小怪物 wavatar:用不同面孔和背景组合生成的头像(根据邮箱或者昵称生成) retro:八位像素复古头像(根据邮箱或者昵称生成) 
  guest_info: nick,mail # 默认留言框的头部需要访问者输入的信息
  pageSize: 15 #默认单页的留言条数
  • 再打开\themes\landscape-plus\layout_partial\after-footer.ejsafter-footer.ejs文件从第4行到32行换成valine的。
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
<% if (config.duoshuo_shortname || theme.duoshuo_shortname){ %>
<!-- 多说公共js代码 start -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"<%= config.duoshuo_shortname || theme.duoshuo_shortname %>"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0]
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共js代码 end -->
<% } else if (config.disqus_shortname || theme.disqus_shortname){ %>
<script>
  var disqus_shortname = '<%= config.disqus_shortname || theme.disqus_shortname %>';
  <% if (page.permalink){ %>
  var disqus_url = '<%= page.permalink %>';
  <% } %>
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments) { %>embed.js<% } else { %>count.js<% } %>';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>
<% } %>

"换成"

<% if (config.valine_enable || theme.valine_enable){ %>
<!--载入js，在</body>之前插入即可-->
    <!--Leancloud 操作库:-->
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <!--Valine 的核心代码库-->
    <script src="/js/Valine.min.js"></script>
    <script>
        new Valine({
            av: AV, 
            el: '.comment',
            app_id: '<%= theme.valine.appid %>',
            app_key: '<%= theme.valine.appkey %>',
            placeholder: '<%= theme.valine.placeholder %>',
            pageSize: <%= theme.valine.pageSize %>,
            notify: <%= theme.valine.notify %>,
            verify: <%= theme.valine.verify %>,
        });
    </script>
<% } %>

这儿值得注意的是

1
2
3
4
这种格式的在next主题下是可以读取的
在landscape-plus主题下要用<% ~ %>，如果是字符串的前后有一个 ` 符号。
如果是boolean和int类型的值，则不需要前后的这个符号。
app_id: `{{ theme.valine.appkey }}` 要改成 `<%= theme.valine.appkey %>`
  • 然后再打开/themes/landscape-plus/layout/_partial/article.ejs article.ejs文件从32行到36换成valine的代码。
1
2
3
4
5
6
7
8
9
10
11
<% if (post.comments && (config.duoshuo_shortname || theme.duoshuo_shortname)){ %>
        <a href="<%- post.permalink %>#ds-thread" class="article-comment-link"><%= __('comments') %></a>
      <% } else if (post.comments && (config.disqus_shortname || theme.disqus_shortname)){ %>
        <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comments') %></a>
 <% } %>

 “换成”

<% if (post.comments && (config.valine_enable || theme.valine_enable)){ %>
   <a href="<%- post.permalink %>#valine_thread" class="article-comment-link"><%= __('comments') %></a>
<% } %>

还是该文件把46行到56行替换掉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<% if (!index && post.comments && (config.duoshuo_shortname || theme.duoshuo_shortname)){ %>
  <section id="comments">
    <div id="ds-thread" class="ds-thread" data-thread-key="<%= post.path %>" data-title="<%= post.title %>" data-url="<%= post.permalink %>"></div>
  </section>
<% } else if (!index && post.comments && (config.disqus_shortname || theme.disqus_shortname)){ %>
  <section id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
  </section>
<% } %>

  “换成“
  
<% if (!index && post.comments && (config.valine_enable || theme.valine_enable)){ %>
  <section id="comments">
    <div id="valine_thread">
      <div class="comment"></div>
    </div>
  </section>
<% } %>
  • 最后一步Valine.min.js放到 /themes\landscape-plus\source\js文件夹内，这儿是Valine.min.js下载链接，只保存Valine.min.js文件就行了。因为前面 <script src=”/js/Valine.min.js”></script> 已经引用的这个文件。

这儿为止,valine就替换完成了

hexo clean重新清除一下，然后再hexo g重新生成就可以看到评论系统了。

如果出现评论按钮没有说明你这儿写的格式有问题:

1
2
3
4
5
6
7
8
9
10
new Valine({
    av: AV, 
    el: '.comment',
    app_id: '<%= theme.valine.appid %>',
    app_key: '<%= theme.valine.appkey %>',
    placeholder: '<%= theme.valine.placeholder %>',
    pageSize: <%= theme.valine.pageSize %>,
    notify: <%= theme.valine.notify %>,
    verify: <%= theme.valine.verify %>,
});

仔细再检查一下，不行的话只添加av、el、app_id、app_key试试看看能不能正常运行，一个一个字段的添加。