引入基于LCloud的页面访问统计到Hexo博客中

原创

ZONGLYN

修改于 2020-06-29 10:22:54

1.9K0

修改于 2020-06-29 10:22:54

由于本主题（Volantis）使用的 Valine 暂时仍然无法正常开启 Counter 页面计数，所以，在单一页面上展示出该页面的访问量就成了一个问题。不蒜子是个解决方式，但其加载巨慢而且仍属于个人维护、并不稳定。所以综合到最后，选择采用 LeanCloud 来完成这一功能。其主要思路就是访问页面时到对应的 LeanCloud 数据表中更新访问次数。不过暂时只能记录PV值。

从零开始引入计数代码

第一步

新增leancloud代码主体（lc_visitors.ejs），主要实现的是访问页面时leancloud访问数+1，并且返回该页面已有的访问量。

{% codeblock ~\volantis_third-party\lc_visitors.ejs lang:javascript %}

if(true){

var leancloud_app_id  = 'WbLE88***********gzGzoHsz';  //y=偷懒直接硬写了

var leancloud_app_key = 'ycqjmt***********RkrdO';

AV.init({

    appId: leancloud_app_id,

    appKey: leancloud_app_key

});

var pageViewsLength = $(".pageViews").length;

var isIndex = $(".pageViews").length > 1 ?true:false;

function showTime() {

    var Pageview = AV.Object.extend("Pageview");

    if(isIndex){

        $(".pageViews").each(function(){

            showPageViewsNum($(this), Pageview);

});

    }else{

        addPageViewsNum($(".pageViews"));

//仅显示阅读量

function showPageViewsNum(ele, Pageview){

    var id = ele.attr('id').trim();

    var query = new AV.Query("Pageview");

    query.equalTo("post_id", id);

    query.descending('createdAt');

    query.limit(1);

    query.find().then(function (results) {

        $(document.getElementById(id)).text(results && results.length > 0?  results[0].get("count") : '0');

    }, function (error) {

         $(document.getElementById(id)).text('0');

});

//追加并显示阅读量

function addPageViewsNum(ele){

    var id = ele.attr('id').trim();

    var title = ele.attr('data-flag-title').trim();

    var query = new AV.Query("Pageview");

    query.equalTo("post_id", id);

    query.descending('createdAt');

    query.limit(1);

    query.find().then(function (results) {

        if (results.length == 0) {

           saveNewPageview(id, title);

           return;

        var pageview = results[0];

        var count = pageview.get("count");

        count++;

        pageview.set("count", count);

        pageview.set("title", title);

        pageview.save().then(function (pageview) {

            $(document.getElementById(id)).text(count);

})

    }, function (error) {

        saveNewPageview(id, title);

})

function saveNewPageview(id, title) {

   var Pageview = AV.Object.extend("Pageview");

   var query = new Pageview;

   query.save({

       post_id: id,

       title: title,

       count: 1

   }).then(function (pageview) {

       $(document.getElementById(id)).text(pageview.count);

   }, function (error) {

});

if(pageViewsLength){ //此处判断等于 1 在执行 可去除循环

    showTime();

}

</script>

{% endcodeblock %}

第二步

将leancloud代码主体（lc_visitors.ejs）引入到原来的主题模板中，紧跟在jquery的后面。

{% codeblock ~\volantis\layout_partial\scripts.ejs lang:javascript %}

<%- js(theme.plugins.jquery) %>

<%- partial('_third-party/lc_visitors') %>

<% if (theme.search && theme.search.enable) { %>

... ...

<% } %>

... ...

{% endcodeblock %}

第三步

在原页面中插入显示访问量的代码段，这里我直接紧跟在meta信息的阅读时长统计后面了。

{% codeblock ~\volantis_meta\wordcount.ejs lang:javascript %}

<% if (theme.plugins.wordcount) { %>

<a class='notlink'>

  <i class="<%- theme.meta.wordcount.icon_wordcount %>" aria-hidden="true"></i>

  <p><%- __('post.wordcount', wordcount(post.content))%></p>

</a>

</div>

<a class='notlink'>

  <i class="<%- theme.meta.wordcount.icon_duration %>" aria-hidden="true"></i>

  <p><%- __('post.duration', min2read(post.content))%></p>

</a>

</div>

<a class='notlink'>

  <i class="fas fa-fire" aria-hidden="true"></i>

  <p><span id="<%= post.path %>" class="pageViews" data-flag-title="<%= post.title || post.path %>"></span></p>

</a>

</div>

<% } %>

{% endcodeblock %}

注意：以上只有部署后访问才有作用，在本地访问无效果。

LeanCloud并发查询429错误

这是第二次遇到了，每次鼓捣LeanCloud都会出现这个问题，主要还是其对访问做了限制。错误主要出现在列表页面，因为会同时查询多篇文章的访问量，所以会导致触发429错误。

我上次的解决方案：应对LeanCloud对于查询性能的限制

具体只需修改以下代码：

{% codeblock ~\volantis_third-party\lc_visitors.ejs lang:javascript %}

function showTime() {

if(isIndex){

	var cnt = $(".pageViews").length;

	var i = 0;

	var interval = setInterval(function(){

		if(i >= cnt)

			clearInterval(interval);

		else

			showPageViewsNum($($(".pageViews")[i++]), AV.Object.extend("Pageview"));

	},500);

}else{

	addPageViewsNum($(".pageViews"));

}

... ...

{% endcodeblock %}

最终效果：

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

javascript

java

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

javascript

java

登录后参与评论

0 条评论

热度