body添加代码 js_hexo 博客添加评论和阅读量
说在最前面,最近刚发现一个好看的主题 Chic,然后果断就换了。效果很好。感谢作者。如果你们也喜欢的话,直接去GitHub项目,里边有安装文档,非常的简单。
附上我的博客地址,欢迎参观。
评论和文章阅读量统计经过对比之后选用的都是 Valine。
添加评论
获取 APP ID 和 APP Key
首先需要注册一个 LeanCloud 账号,然后进入控制台,点击左下角创建应用。
随便起个名字,选择开发版,然后创建就可以了。创建完成之后,进入刚刚创建的应用,选择设置->应用Key,然后你就能找到 APP ID 和 APP Key 了。
主题 _config.yml 文件内增加配置
在主题目录下的 _config.yml 的文件中添加 valine 配置:
valine:appid: #Leancloud应用的appIdappkey: #Leancloud应用的appKeyverify: true #验证码notify: true #评论回复提醒placeholder: 这里留言。。 #评论框占位符
添加 valine.ejs 文件
然后添加 valine.ejs 文件,我放到了 layout/_plugins/ 文件夹下,文件的内容:
<div class="valine_comment"></div>
<!--载入js,在</body>之前插入即可-->
<!--Leancloud 操作库:-->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代码库-->
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>new Valine({el: '.valine_comment',app_id: '<%= theme.valine.appid %>',app_key: '<%= theme.valine.appkey %>',placeholder: '<%= theme.valine.placeholder %>',notify: '<%= theme.valine.notify %>',verify: '<%= theme.valine.verify %>',});
</script>
添加调用代码
在你的文章的 ejs 文件中添加评论的代码,我使用的这个主题是在 layout/_page/post.ejs 文件中添加如下代码:
<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %><section id="comments" class="comments"><style>.comments{margin:30px;padding:10px;background:#fff}@media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}</style><%- partial('_plugins/valine', {key: post.slug,title: post.title,url: config.url+url_for(post.path)}) %></section>
<% } %>
重新部署然后查看
然后你重新部署你的博客,就可以在文章底部看到评论框了。支持表情和 markdown 语法。还是非常好用的,不过免费版好像每天有次数关系和总的空间大小限制。不过对于我这种自己的博客是完全够用的。
添加文章的阅读量
阅读量同样是用的 valine。
主题 _config.yml 文件内增加配置
在主题目录下的 _config.yml 的文件中添加阅读量配置:
valine:appid: #Leancloud应用的appIdappkey: #Leancloud应用的appKeyverify: true #验证码notify: true #评论回复提醒placeholder: 这里留言。。 #评论框占位符visitor: true #阅读量统计
如果开启了阅读量统计
,Valine 会自动检测
leancloud 应用中是否存在Counter
类,如果不存在会自动创建
,无需手动创建~
valine.ejs 文件中加入评论配置
然后添加 valine.ejs 文件,我放到了 layout/_plugins/ 文件夹下,文件的内容:
<div class="valine_comment"></div>
<!--载入js,在</body>之前插入即可-->
<!--Leancloud 操作库:-->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代码库-->
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>new Valine({el: '.valine_comment',app_id: '<%= theme.valine.appid %>',app_key: '<%= theme.valine.appkey %>',placeholder: '<%= theme.valine.placeholder %>',notify: '<%= theme.valine.notify %>',verify: '<%= theme.valine.verify %>',});
</script>
添加调用代码
在你的文章的 ejs 文件中添加评论的代码,我使用的这个主题是在 layout/_page/post.ejs 文件中合适位置添加如下代码:
<span id="<%- url_for(post.path) %>" class="leancloud-visitors view" data-flag-title="<%= post.title %>"><em class="post-meta-item-text">Pageviews:</em><i class="leancloud-visitors-count">loading</i>
</span>
Valine会自动查找页面中class
值为leancloud_visitors
的元素,获取其id
为查询条件。并将得到的值填充到其class
的值为leancloud-visitors-count
的子元素里。
重新部署然后查看
然后你就可以找到阅读量的显示了,每次刷新页面,就会加1。
body添加代码 js_hexo 博客添加评论和阅读量相关推荐
- 利用requests库模拟访问博客来提升文章阅读量
利用requests库模拟访问博客来提升文章阅读量 一.概述 二.简陋版程序 三.升级版程序 一.概述 有的同学在csdn上写了文章之后,看着自己文章的阅读量,少的可怜,不禁希望能把阅读量快速涨上去, ...
- Jekyll博客统计访问量,阅读量工具总结--LeanCloud,不蒜子,Valine,Google Analytics
我用 GitHub Pages搭建了jekyll的博客后,想要在页面上实现访问量的统计. 因为实在GitHub上搭建的静态博客,不能像WordPress一样可以操作php和数据库,自然只能借助第三方工 ...
- Python爬虫入门实战1:获取CSDN个人博客文章目录及阅读量数据
☞ ░ 老猿Python博文目录:https://blog.csdn.net/LaoYuanPython/article/details/98245036 ░ 一.引言 有阵子博客的访问量出现了比较大 ...
- hexo添加disqus_使用Disqus将传统评论添加到Tumblr博客
hexo添加disqus Would you like to add a traditional comment box to your Tumblr blog? Here's how you ca ...
- Hexo + yilia 主题 +githubpages博客添加友言评论功能
前言 Hexo博客的Yilia主题中评论系统只提供了畅言.网易云跟帖.多说和Disqus. 由于多说评论.网易云跟帖已经关闭系统,畅言需要域名备案,而github是国外的,没有备案,所以尝试了其他第三 ...
- Hugo项目实战-集成评论博客添加评论功能
实践效果 Quick Start Install Hugo brew install hugo # or port install hugohugo version Create a New Site ...
- Django开发个人博客网站——16、给博客添加上评论功能
博客中的评论系统其实是个很复杂的东西,但是网上已经有现成的轮子了,比如django-contrib-comments,可以直接拿过来用.但是我这里博客主要是给自己看的,并不想有太复杂的互动内容,因此, ...
- JAVA圣诞代码_[Java教程]【Merry Christmas】圣诞节,给博客添加浪漫的下雪效果!...
[Java教程][Merry Christmas]圣诞节,给博客添加浪漫的下雪效果! 0 2012-12-25 15:00:20 一年一度的圣诞节又到了,首先祝大家好运一串串,健康一年年,平安到永远! ...
- #WordPress小技巧#纯代码为自己博客添加支付宝/微信打赏功能
原文:https://www.wn789.com/13323.html 很多人的WordPress博客在文章尾部都有打赏功能,让读者可以直接通过扫描微信.支付宝二维码进行赞助,毕竟维护博客,编写博文需 ...
最新文章
- 基于 Nginx XSendfile + SpringMVC 进行文件下载
- 如何调整Loadrunner中Vuser的数量限制
- jq 自动滑动轮换(向后插入小块)
- D3 selectselectAll
- Extjs 常见问题:如何提交combobox的值
- 存储容错:鱼与熊掌可以兼得
- 零基础必看的Linux入门教程 (AcWing)
- 基于微信小程序的疫情防控平台设计与实现-计算机毕业设计源码+LW文档
- 小小总结之渗透测试面试题以及答案
- layui layer 自定义皮肤真香警告
- 20200727《Flask进阶》——模块化程序(蓝本)
- win10无限蓝屏_Win10升级系统后蓝屏或无限重启解决办法
- 高启(1336-1373)
- window.btoa与window.atob
- iPhone 电池和性能
- 苹果MacBook Pro usb连接iPhone反复重连解决方法
- 用python绘制熊猫图案,在python中绘制熊猫系列的CDF
- Mac电脑没有声音,苹果电脑没有声音怎么办
- 七牛云上传图片并返回图片URL
- 大数据精细化运营产品解决方案
热门文章
- java脚本_写一个在线Java脚本执行器
- 用户操作计算机系统的基本工具是什么,在Windows支持下,用户操作计算机系统的基本工具是______。...
- zip的用法python_Python学习之zip函数的用法
- android udp 收发例子_如何利用光衰减器来测试光纤收发器的灵敏度?
- Selenium3自动化测试——23.自动发送邮件功能
- 英语口语8000句 pdf_值得收藏!生活交际常用英语口语,60句常用的生活交际口语!...
- 计算机技能训练B会学什么,计算机入门及操作技能训练模拟试题.pdf
- vissim跟驰模型_VISSIM是什么工具?你对VISSIM了解多少?
- 32树莓派_你觉得树莓派的32位系统到了2038年会出现故障吗?
- angularjs获取上一个元素的id_三男子非法获取苹果ID账号买卖,交易数万条,价格从一毛到上百元不等...