对我的paperbox（现在这个主题，landscape plus基础修改而来的，我引用了）做基于自己喜好的改造；

Part5: 添加评论系统和统计

这次做的事情：

  • 评论系统
  • 阅读统计
  • 版权声明

评论系统

现在看到比较好的是Disqus，畅言，Valine，来必力， gitment和uttrancens

Disqus 已经被墙了…也有几种免翻墙用 Disqus 评论的解决办法，例如 disqus-proxy、DisqusJS和 Disqus PHP API，不过它们都需要另外一台服务器来进行反代理

畅言，搜狐作的评论系统，需要备案才能使用。

来必力，韩国的一个评论系统，看上去不错，而且支持多账号登录，但是好像慢哦

Valine，基于 Leancloud ，支持匿名，其实不错啦，而且hexo-theme-landscape好像支持了，copy一下应该就好了

gitment，使用 Github 的 issue 系统作为评论系统，权限太高了。。。太不安全了。。。

uttrancens，同上，但是权限控制比较好，可以限制为只操作某个repo的issue

权衡之后还是想选择uttrancens，一个是不想使用valine的匿名，一个是手贱，就是想试试看git，而且git账号还是比较广泛的；方便发言、查看和管理；

官网：https://utteranc.es/

首先来这里为utterances在github上授权

access control

在官网上填写不同的参数，repo写上面哪个repo地址；issue-term一般选择pathname,当然也可以选择别的作为issue标题；theme表示主题；

配置选择

添加一个ejs文件：

layout/_partial/utterances.ejs
1
2
3
4
5
6
7
<script src="https://utteranc.es/client.js"
    repo="<%= theme.utterances.repo %>"
    issue-term="<%= theme.utterances.issue_term %>"
    theme="<%= theme.utterances.theme %>"
    crossorigin="anonymous"
    async>
</script>

配置：

_config.yml
1
2
3
4
5
utterances:
  enable: true
  repo: CapybaraJ/capybaraj.github.io
  issue_term: pathname
  theme: github-light

加入到article.ejs

layout/_partial/article.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
<footer class="article-footer">
      <div class="article-footer-content">
        ...
        <% if (post.comments && theme.utterances.enable){ %>
          <a href="<%- post.permalink %>#utterances" class="article-comment-link"><%= __('comments') %></a>
        <% } else if (post.comments && config.disqus_shortname ){ %>
          <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comments') %></a>
        <% } %>
       ...
      </div>
    </footer>

末端：
<div class="article-inner">
    <div class="fill-content">
    <% if (!index && theme.utterances.enable){ %>
      <section id="comments">
        <%- partial('utterances') %>
      </section>
    <% } else if (!index && post.comments && config.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>
    <% } %>
    </div>
  </div>

最终效果图

uttrances效果图

参考: 为Hexo添加最近评论支持——以Landscape类主题为例

阅读统计

两个比较好的系统： busuanzi和leancloud

参考：

不蒜子，介绍比较详细

不蒜子官网，听说可以初始化访问量；不过要注册，目前注册未开放

网上比较多的资料是关于next主题下的添加，这个很好搜，例如hexo-guide

使用Leancloud：统计学统计阅读次数

这里用的是不蒜子，其实按照说明很简单，一个是引入js,一个是引入位置

在主题_config.yml文件加一个参数

_config.yml
1
2
footer:
	counter: true

在语言文件里添加全局，其余的语言文件同理

languages/default.yml
1
2
views: Views
visitors: Visitors

然后修改footer.ejs:

layout/_partial/footer.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<footer id="footer">
  <% if (theme.sidebar === 'bottom'){ %>
    <%- partial('_partial/sidebar') %>
  <% } %>
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>&nbsp;
      <% if (theme.footer.counter) {%>
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_pv"><%= __('views') %>&nbsp;<span id="busuanzi_value_site_pv"></span></span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_uv"><%= __('visitors') %>&nbsp;<span id="busuanzi_value_site_uv"></span></span>
        <!-- <span class="post-meta-divider">|</span> -->
      <% } %>
      <br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
      .
      Theme by <a href="https://github.com/sun11/hexo-theme-paperbox" target="_blank">Paperbox</a>
    </div>
  </div>
</footer>

看下效果：

页脚添加访问量统计

如果要增加单页面量访问（index页面还是不访问了）

layout/_partial/article.ejs
1
2
3
4
5
6
7
8
9
10
11
<footer class="article-footer">
      <div class="article-footer-content">
        ...省略
        <% if(!index && theme.footer.counter){ %>
            <span id="busuanzi_container_page_pv">
              <span id="busuanzi_value_page_pv" class="article-count-link"></span>
            </span>
        <% } %>
        
      </div>
    </footer>

说一下styl:article-count-link

source/css/_partial/article.styl
1
2
3
4
5
6
.article-count-link
  float: right
  &:before
    content: "\f06e" //一只眼睛
    font-family: font-icon
    padding-right: 8px

看下效果

单文章阅读量

版权声明

新建一个statment.ejs

layout/_partial/post/statement.ejs
1
2
3
4
5
6
7
8
<% if (!index && page.source != 'about/index.md'){ %>
    <div class="article-statement">
    <hr>
    本文作者: &nbsp;<%= config.author %><br>
    本文链接: &nbsp;<a herf="#"><%= page.permalink %></a><br>
    版权声明: &nbsp;除非注明，本博文章均为原创，转载请以链接形式标明本文地址<br>
    </div>
  <% } %>
source/css/_partial/article.styl
1
2
3
4
5
.article-statement
  font-size: 1em
  font-weight: bold
  font-family: cursive
  color: #888;

最后在文章<%- post.content %>后面添加

layout/_partial/article.ejs
1
<%- partial('post/statement') %>

效果，我觉得还不错~：

版权声明

参考：

Hexo文章末尾添加版权或自定义文本

Hexo-Next下添加版权声明模块