评论系统和站点访问统计功能实现
评论系统
实现评论系统的方式有很多,常见的有gitalk,gitter,Valine,disqus等。本人使用的是Valine。它是基于leancloud的无后端评论系统,支持MarkDown语法,较安全快速。
获取LeanCloud的APP ID和APP Key
- 在LeanCloud中注册一个账号,并选择创建应用,填写你的应用名称,选择开发版后点击创建。
- 进入创建的应用,点击存储,并创建Comment类(属性为默认值)
- 然后进入设置栏安全中心板块,关闭除数据存储外的所有服务,最后点击应用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
配置完成效果图如下:
站点访问统计
本人采用的是不蒜子提供的网页计数功能。
- 在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 %}
最终实现效果如下图