2020-08-16

评论系统和站点访问统计功能实现

评论系统

实现评论系统的方式有很多，常见的有gitalk,gitter,Valine,disqus等。本人使用的是Valine。它是基于leancloud的无后端评论系统，支持MarkDown语法，较安全快速。

获取LeanCloud的APP ID和APP Key

1. 在LeanCloud中注册一个账号，并选择创建应用，填写你的应用名称，选择开发版后点击创建。
2. 进入创建的应用，点击存储，并创建Comment类（属性为默认值）
   
3. 然后进入设置栏安全中心板块，关闭除数据存储外的所有服务，最后点击应用Key获得AppKey和AppID。
   

配置Hexo主题文件

首先打开 https://www.jsdelivr.com/package/npm/valine 获取最新的 valine.min.js 的cdn地址：

然后打开themes/next(主题文件)/_config.yml文件，进行如下配置

 # valine
  # See: https://github.com/xCss/Valine
  # Example:
  # valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
  # valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.4/Valine.min.js
  valine: https://cdn.jsdelivr.net/npm/valine@1.3.9/dist/Valine.min.js

再配置Valine相关功能参数

# Valine
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
valine:
 # 功能开关
  enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version
  appid:  # Your leancloud application appid #LeanClound获得的appid
  appkey:  # Your leancloud application appkey #LeanClound获得的appkey
  notify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki # 邮件提醒
  verify: false # Verification code 
  placeholder:  欢迎在此留下您的足迹# Comment box placeholder
  avatar: mm # Gravatar style #默认头像设置
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-cn # Language, available values: en, zh-cn # 语言，设为zh-cn
  # 是否开启当前文章阅读量统计
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # If false, comment count will only be displayed in post page, not in home page

配置完成效果图如下：

站点访问统计

本人采用的是不蒜子提供的网页计数功能。

1. 在themes\next\layout_partial\footer.swig中加入如下代码

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2.修改主题配置文件（themes\next_config.yml）中参数

busuanzi_count:
  enable: true
  total_visitors: true # 访客数
  total_visitors_icon: user
  total_views: true # 访问量
  total_views_icon: eye
  post_views: false
  post_views_icon: eye

至此便完成简单的网站计数功能。若想要修改统计数量的展示方式，需要修改themes\next\languages\zh-CN.yml下的footer参数：

footer:
  total_views: "总访问量 %s"
  total_visitors: "总访客量 %s"

然后替换themes\next\layout_third-party\statistics\busuanzi-counter.swig文件为如下内容

{%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script{{ pjax }} async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {%- if theme.busuanzi_count.total_visitors %}
      <span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.total_visitors_icon }}"></i>
      </span>
      <span class="site-uv">
        {{ __('footer.total_visitors', '<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>') }}

      </span>
    </span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_visitors and theme.busuanzi_count.total_views %}
    <span class="post-meta-divider">|</span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_views %}
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.total_views_icon }}"></i>
      </span>
      <span class="site-pv">
        {{ __('footer.total_views', '<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>') }}

      </span>
    </span>
  {%- endif %}
</div>
{%- endif %}

最终实现效果如下图