hexo的Ayer主题文章内显示leancloud阅读次数(和NexT无缝衔接)

Ayer主题中自带的阅读次数显示的是busuanzi记录的当前页面的阅读次数

而我之前用的是NexT主题,配合NexT里leancloud的阅读数统计,所以还是想继续用那个,就自己改了一下

✨2020.06.28 做了一些修改,现在可以顺畅的无bug的使用啦~

1 leancloud配置

首先是leancloud里的具体配置:(包括注册/在leancloud里新建应用/进行相关设置/创建API类)

因为这些我之前用NexT主题的时候配置过了,过程和NexT主题配置leancloud阅读次数统计是一样的

1.1 注册leancloud/创建应用

1.2 获取APPID和APPKEY

在「设置」-「应用Keys」里,这个等待要填到主题配置文件里

1.3 添加安全域名

在「设置」-「安全中心」里添加安全域名

1.4 创建Class

在「存储」创建Class,起名为Counter

2 Ayer修改

然后讲怎么给Ayer增加leancloud阅读次数统计,和NexT的阅读次数统计无缝衔接

事实证明,想偷懒是不行的ORZ,还是要老老实实看官方文档➡️云函数开发指南 · Node.js

2.1 参考NexT

NexT里看/themes/next/layout/_macro/post.swig的LeanCould PageView部分和/next/layout/_third-party/analytics/lean-analytics.swig

2.2 增加语言

先修改下语言包themes/ayer/languages/zh-CN.yml,在最后post里加一个time_count属性,中文是阅读次数(叫别的也行),如果配置的是其他语言就在其他语言包里加

1
2
3
4
post:
time_count: 阅读次数
word_count: 字数统计
read_time: 阅读时长

2.3 修改ariticle.ejs

根据themes/ayer/layout/_partial/article.ejs中的内容,如果要在article-meta部分在日期和分类后面加上一个阅读次数的话,就是加上下面代码中的8-10行

1
2
3
4
5
6
7
8
9
10
11
12
<% if (index || is_post()) { %>
<div class="article-meta">
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
<%- partial('post/category') %>
<% if(theme.word_count && theme.word_count.enable && !post.no_word_count){%>
<%- partial('post/word') %>
<% } %>
<% if(theme.leancloud.time_count && is_post()){ %>
<%- partial('post/times') %>
<% } %>
</div>
<% } %>

2.4 新建times.ejs

根据上文的<%- partial('post/times') %>,现在需要新建一个/themes/ayer/layout/_partial/post/times.ejs

因为要和那行别的东西的格式统一,所以参考那个目录下的category.ejsdate.ejs或者word.ejs的实现即可

1
2
3
4
5
6
<div class="article-times">
<span class="post-time">
<span class="post-meta-item-text"> <%= __('post.time_count') %>: </span>
<span id="<%= url_for(post.path) %>" class="leancloud_visitors" data-flag-title="<%- post.title %>"></span>
</span>
</div>

2.5 css样式设置

/themes/ayer/source/dist/main.css中加上一些样式,抄的是artical-category的样式

before的content那个其实是webfont(找了半天才知道,,见的太少了我)作者用的webfont的图标库是REMIX ICON,然后编码在remixicon.css里可以查(⚠️注意作者引入的版本是2.1.0的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.article-times {
display: inline-block;
margin-left: 1.5rem
text-decoration: none;
color: #5c6b72
}

.article-times:hover {
text-decoration: none;
color: #5c6b72
}

.article-times:before {
content: "\ec2a";
font-family: remixicon;
margin-right: .15rem;
margin-left: 1.5rem;
opacity: .6
}

.archive-article-header+.article-times {
margin-left: 0
}

2.6 js实现

导入js代码,themes/ayer/layout/_partial/footer.ejs<footer>标签前加上下面这段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>
<script>
var APP_ID='<%- theme.leancloud.app_id %>';
var APP_KEY='<%- theme.leancloud.app_key %>';
AV.init({
appId: APP_ID,
appKey: APP_KEY
});
function showTime(Counter){
var query=new AV.Query("Counter");
var url=$(".leancloud_visitors").attr('id').trim();
query.equalTo("xid",url);
query.find().then(function(results){
for(var i=0;i<results.length;i++){
var number=results[i]._serverData.time;
var urll=results[i]._serverData.url;
// console.log(number);
$(document.getElementById(urll)).text(number);
}
})
}
function addCount(Counter){
var $visitors=$(".leancloud_visitors");
var url=$visitors.attr('id').trim();
var title=$visitors.attr('data-flag-title').trim();
var query=new AV.Query(Counter);
query.equalTo("xid",url);
query.find().then(function(results){
if(results.length>0){
var counter=results[0];
counter.fetchWhenSave(true);
counter.increment("time");
counter.save();
// console.log("ok");
}
else{
var newcounter=new Counter();
newcounter.set("title",title);
newcounter.set("url",url);
newcounter.set("xid",url);
newcounter.set("time",1);
newcounter.save(null,{
success: function(newcounter){
// console.log("new");
}
});
}
})
}
$(function(){
<% if(theme.leancloud.time_count){ %>
var Counter=AV.Object.extend("Counter");
<% if(is_post()){ %>
addCount(Counter);
<% } %>
showTime(Counter);
<% } %>
});
</script>

3 效果

最终的样式效果是这样的:


参考链接:

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2020 LeFlacon

奶茶一杯 快乐起飞

支付宝
微信