加入valine在线评论

设置效果:

设置方法:
首先要先去LeanCloud注册一个帐号.然后再创建一个应用.

拿到appidappkey之后,打开themes/next/_config.yml主题配置文件,查找valine,填入appidappkey
我的配置:

# 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:
appkey:
notify: true # mail notifier, See: https://github.com/xCss/Valine/wiki
verify: true # Verification code
placeholder: 欢迎交流讨论... # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
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

Hexo添加阅读次数

next 集成了 leancloud 。可以在leancloud进行账号注册。
创建一个新的应用。点击应用进入。
创建名称为CounterClass,名称必须为Counter

点击设置 > 应用Key 复制App ID 和 App Key

修改配置文件
在主题themes目录下有第三方提供的主题配置文件\themes\next_config.yml
打开主题配置文件 添加app_idapp_key:

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.文章热度
leancloud_visitors:
enable: true
app_id: llBsNPTabKsl2d4aU3OvrmSz-gzGzoHsz
app_key: gzSQowSIzhnuc5eYPj4k7c7z
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: false
betterPerformance: false

修改统计设置
打开主题配置文件 定位到 post_wordcount

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: false
separated_meta: true

Web安全性
为了保证应用的统计计数功能仅应用于自己的博客,你可以在应用 > 设置 > 安全中心的Web安全域名中加入自己的博客域名,保证数据的调用安全。


显示文章热度

首先要先去LeanCloud注册一个帐号.然后再创建一个应用.

设置方法:
next主题集成leanCloud,打开themes/next/layout/_macro/post.swig,准备添加

          {# LeanCloud PageView #}
{% if theme.leancloud_visitors.enable or (theme.valine.enable and theme.valine.appid and theme.valine.appkey and theme.valine.visitor) %}
<span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
{% if theme.post_meta.item_text %}
<span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>
{% endif %}
<span class="leancloud-visitors-count"></span>
<span>℃</span>
</span>
{% endif %}

插入摄氏度到倒数第三句,如下:

<span>℃</span>

打开,themes/next/languages/zh-CN.yml,将views后的文字描述改为热度.

views: 热度

有的版本不一样,打开,themes/next/languages/zh-Hans.yml,将以下

visitors: 热度

然后打开themes/next/_config.yml找到leancloud_visitors,将enable:改成true,再填上自己LeanCloudapp_idapp_key

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.文章热度
leancloud_visitors:
enable: true
app_id: 你自己的id
app_key: 你自己的key
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: true
betterPerformance: false

报错Counter not initialized! More info at console err msg.

我的个人博客文章地址,欢迎访问
我的CSDN文章地址,欢迎访问
我的简书文章地址,欢迎访问
我的GitHub主页,欢迎访问

Hexo博客Next主题阅读次数热度不能读取的问题,报错Counter not initialized! More info at console err msg.的更多相关文章

  1. hexo博客yili主题个性化自定义教程(1) ——借鉴中学习,初认yili主题

    文章转载于:hexo博客yili主题个性化自定义教程(1) --借鉴中学习,初认yili主题 这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了.所以换了一个主题. 大名鼎鼎的 ...

  2. Hexo博客maupassant主题添加Google Adsense广告

    自从在 Github Page 落户以后,很长一段时间使用的是极简且有点艺术范儿的 fexo 主题,而不是大名鼎鼎的 next 主题.后来偶然发现了符合我审美的Hexo博客 maupassant 主题 ...

  3. 关于Hexo博客NEXT主题(Gmini)站点图标不显示,显示错误的解决办法

    关于Hexo博客NEXT主题(Gmini)站点图标不显示,显示错误的解决办法   最近闲着没事自己利用Hexo和Github搭了个博客,但是在NEXT(Gmini)主题优化时,出了很多错误,图标不显示 ...

  4. hexo博客yilia主题深度设置

    转载:Shuyan http://dongshuyan.com/2019/05/24/hexo博客注意事项/ 1.微信分享异常 这里是themes\yilia\layout\ _partial\pos ...

  5. hexo博客更换主题

    前边我们已经学会了博客的搭建了,这次我们来看看怎么样让我们的博客更漂亮,更个性化.那就是来更换博客的主题,让我们的博客与众不同起来.我们可以去hexo的主题官网去挑选你自己喜欢的主题风格.里边收录了很 ...

  6. 如何在hexo博客中在线阅读pdf

    前言 有一些资料或者笔记是pdf版本的,如果想要放在博客中进行阅读,那么就得将其转换为markdown格式或者html格式.但是这样转换后,其原pdf的格式就会混乱了,排版将会变得很困难,不过一山更比 ...

  7. Hexo博客skapp主题部署填坑指南

    相信大家都很喜欢 hexo skapp 的主题,由于作者采用结巴分词,加上需要依赖各种各样的环境 所以可能大家踩过很多坑,也许每个人踩得坑不一样,这里使用 Docker 容器 centos 来部署, ...

  8. hexo博客pure主题解决不蒜子计数不显示的问题

    最近在建个人博客网站,想统计自己的博客页面访问量,就用到了不蒜子页面访问统计.可是遇到了糟心事,居然不显示!!! 不蒜子官网示例:两行代码,搞定计数 <script async src=&quo ...

  9. Hexo博客yilia主题添加Gitment评论系统

    一开始搭建hexo+yilia博客使用的评论功能是通过来必力实现的.来必力免费,功能多,一开始的体验效果很好,但是后来打开网站发现来必力加载的越来越慢(来必力是韩国的公司,可能是国内限制),遂打算换一 ...

  10. Hexo博客NexT主题美化之评论系统

    前言 更多效果展示,请访问我的博客 https://kangmingxian.github.io/ 效果图:   image Valine 诞生于2017年8月7日,是一款基于Leancloud的快速 ...

随机推荐

  1. ROS机器人雷达跟随

    ROS机器人雷达跟随 初始化 打开一个终端输入: ssh clbrobot@ip # 连接小车 roslaunch clbrobot bringup.launch # 激活主板 开启摄像头 开新终端输 ...

  2. 安装node并创建vue项目

    1.多版本管理工具 nvm https://github.com/coreybutler/nvm-windows/releases nvm-setup.zip 2. 打开nvm文件夹下的setting ...

  3. js复制功能(pc复制,移动端复制到手机剪切板)

    一个函数,直接调就好了,已测pc和app都适用 1 // 一键复制 2 copyBtn(data) { 3 const input = document.createElement("inp ...

  4. element-ui Table 表格行间隔及行边框效果

    <el-table :data="tableData" style="width: 100%" :cell-class-name="tableC ...

  5. 利用css var函数让你的组件样式输出规范样式API,可定制性更高;

    我们平时在使用Elementui Antdesing这些UI库时,难免会碰到使用deep强行侵入式去修改组件内部样式的情况:   比如下列代码,我们需要把ant的分页样式进行高度自定义,就得使用dee ...

  6. 2020-09-19:TCP状态有哪些?

    福哥答案2020-09-19:#福大大架构师每日一题# [答案来自此链接](https://www.zhihu.com/question/421833613) 11种状态1.CLOSED状态:初始状态 ...

  7. 2022-08-27:以下go语言代码输出什么?A:[0];B:panic;C:7;D:不清楚。 package main import ( “fmt“ ) func main() { a

    2022-08-27:以下go语言代码输出什么?A:[0]:B:panic:C:7:D:不清楚. package main import ( "fmt" ) func main() ...

  8. 2021-03-22:小虎去买苹果,商店只提供两种类型的塑料袋,每种类型都有任意数量。1.能装下6个苹果的袋子,2.能装下8个苹果的袋子。小虎可以自由使用两种袋子来装苹果,但是小虎有强迫症,他要求自己使用的袋子数量必须最少,且使用的每个袋子必须装满。给定一个正整数N,返回至少使用多少袋子。如果N无法让使用的每个袋子必须装满,返回-1。

    2021-03-22:小虎去买苹果,商店只提供两种类型的塑料袋,每种类型都有任意数量.1.能装下6个苹果的袋子,2.能装下8个苹果的袋子.小虎可以自由使用两种袋子来装苹果,但是小虎有强迫症,他要求自己 ...

  9. 2022-02-22:机器人大冒险。 力扣团队买了一个可编程机器人,机器人初始位置在原点(0, 0)。小伙伴事先给机器人输入一串指令command,机器人就会无限循环这条指令的步骤进行移动。指令有两种

    2022-02-22:机器人大冒险. 力扣团队买了一个可编程机器人,机器人初始位置在原点(0, 0).小伙伴事先给机器人输入一串指令command,机器人就会无限循环这条指令的步骤进行移动.指令有两种 ...

  10. 2022-01-03:比如arr = {3,1,2,4}, 下标对应是:0 1 2 3, 你最开始选择一个下标进行操作,一旦最开始确定了是哪个下标,以后都只能在这个下标上进行操作。 比如你选定1下标,

    2022-01-03:比如arr = {3,1,2,4}, 下标对应是:0 1 2 3, 你最开始选择一个下标进行操作,一旦最开始确定了是哪个下标,以后都只能在这个下标上进行操作. 比如你选定1下标, ...