总想知道自己文章点击量如何,所以就想为博客增加文章阅读量统计。
之前试过用不蒜子实现,但是它无法在目录页面看到每篇博客阅读量,并且有看到其他人基于leancloud实现,于是就在网上找了许多教程研究了几天
但是,网上基于yilia主题的leancloud的阅读量文章很少,而且大多数之介绍了有关大概,没有每一个步骤讲清楚,使得我们难以高度自定义
这篇文章将会从头开始,详细介绍每一个步骤,并提供许多备用代码以完成高度自定义
配置leancloud
因为过程比较简单,跟着教程做就行了,因此在这里我不做过多的补充
本文配置leancloud部分改编自mxy493的博客(甚至大部分图片都是从他服务器外链)
点击leancloud官网,点击免费试用并注册账号(在此处选免费版就够用了)
然后选择下方的创建应用,新应用名字可以根据自己的喜好输入(可以中文)
输入完名字后其他都不用管,默认的就行,直接点击创建
然后将鼠标移动到应用的右上方,点击齿轮(设置)的图标进入设置界面
在设置>应用Key中复制下此处的App ID以及App Key,等待稍后使用
最后,为了leancloud的数据安全性,再填写一下安全域名,应用>设置>安全设置中的Web 安全域名,一般填写自己博客主页的地址和http://localhost:4000/就可以了,如下图:
在此后,数据会保存到Leancloud你创建的应用里,具体可以登录Leancloud,选择应用>存储>PageView,评论的所有相关信息都可以在这儿看到
有数据后,双击表格中数据的对应项可直接编辑,也可在表格上方的按钮处选择删除数据
这样,leancloud就已经配置完了
如果想查看更多高阶做法和配置valine评论系统,请看原文mxy439的博客
配置主题代码
本文配置主题代码部分改编自浩码农的博客
修改 _config.yml
修改 themes/yilia/_config.yml
文件,增加判断是否启用访问统计的配置项,输入leancloud 的 api_id 及 api_key
1 | # leancloud visitors文章阅读量统计 |
如果此前配置过valine评论的可共用同一个appid和appkey
修改 article.ejs
修改 themes/yilia/layout/_partial/article.ejs
文件,在标题旁或下面你觉得合适的地方加入显示阅读量的代码
我选择添加在<header class=" article-header">
的后面,对应标题的下方
1 | <!-- 文章阅读量 --> |
在此中,如果需要换行,可以添加<br></br>
来换行<%- url_for(post.path) %>
为对应文章的链接,如果设置了文章id的可以修改为<%= post.id %>
在<span></span>
标签前后,%>
和<%
之间,都可以自行加上想要显示的话(示例给的
是空格的意思,也可以修改)
两个<span>
标签中间的文字是初始值,在联网获取服务器数据后会被替换为服务器的数据
此外,还可以加入style
等参数美化
如果需要更多自定义参数传到服务器,可以在<span>
尖号中加入更多元素,(下文还需要进一步设置)
修改 footer.ejs
修改 themes/yilia/layout/_partial/footer.ejs
文件,在 </footer>
标签前新建一行并加入如下代码:
1 | <% if (theme.leancloud_visitors.enable){ %> |
这里的 lc_visitors
在下一步创建,它实现获取及更新文章阅读数的逻辑
⚠此处并不能自定义
新建 lc_visitors.ejs
在主题的 themes/yilia/layout/_partial/post
目录下,新建文件lc_visitors.ejs
,代码如下:
此处自定义部分已经放入代码注释中
1 | <script src="<%- theme.js_cdn.jquery %>"></script> |
此处修复了参考文字中因为变量名不同和id设置原因导致的bug
最终效果
文章访问量
后台数据