index.html

---
layout: base
---

<!--valine comment function-->
<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//www.silince.cn/assets/js/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>


{% for post in paginator.posts %}
<div class="post">

    <h2 class="post-title">
        <a href="{{ post.url | prepend: site.baseurl }}">
            {% if post.title %}
            {{ post.title }}
            {% else %}
            {{ site.page_no_title }}
            {% endif %}
        </a>
    </h2>

    <div class="post-meta">
        <span>
        <i class="icon-post-date"> {{ post.date | date: "%Y年%m月%d日" }}

        </i>
            <!-- TODO ⭐显示每篇博客阅读量, id 将作为查询条件 -->
                <span>
                    <span class="post-meta-divider">|</span>
                    <span class="post-meta-item-text">阅读量 </span>
                    <span id="{{ post.url }}" class="leancloud-visitors" data-flag-title="{{ post.title }}"> - </span>
                </span>
                  ☕️
        </span>

    </div>

    <div class="post-content">{{ post.content | strip_html | truncate:160 }}</div>

    <p class="readmore"><a href="{{ post.url | prepend: site.baseurl }}">阅读更多</a></p>

</div>
{% endfor %}

<!--初始化Valine-->
<script>
    var notify = '{{site.valine.notify}}' === true;
    var verify = '{{site.valine.verify}}.>' === true;
    var visitor = '{{site.valine.visitor}}.>' === true;

    new Valine({
        av: AV,
        el: '#valine_comment',
        notify: notify,
        verify: verify,
        // smiles_url: '/smiles',
        visitor: true,
        app_id: '{{site.valine.app_id}}',
        app_key: '{{site.valine.app_key}}',
        placeholder: '{{site.valine.placeholder}}',
        avatar: '{{site.valine.avatar}}',
    });
</script>

<script>
    // 第一个参数是appid，第二个参数是appkey，此处的只是示例
    AV.init({
        appId: "5DQcAzLXlbQQx0VLGzy2uqQ6-gzGzoHsz",
        appKey: "zxmHQRmRHzl6aaiAVqBhmNGd",
        serverURL: "https://leancloud.cn"
    });
    // 自己创建的Class的名字
    var name='Counter';
    // 在leancloud创建记录函数
    function createRecord(Counter){
        // 设置 ACL
        var acl = new AV.ACL();
        acl.setPublicReadAccess(true);
        acl.setPublicWriteAccess(true);
        // 获得span的所有元素
        var elements=document.getElementsByClassName('leancloud-visitors');
        console.log(elements);
        // 一次创建多条记录
        var allcounter=[];
        for (var i = 0; i < elements.length ; i++) {
            // 若某span的内容不包括 '-' ，则不必创建记录
            if(elements[i].textContent.indexOf('-') == -1){
                continue;
            }
            var title = elements[i].getAttribute('data-flag-title');
            var url = elements[i].id;
            var newcounter = new Counter();
            newcounter.setACL(acl);
            newcounter.set("title", title);
            newcounter.set("url", decodeURI(url));
            newcounter.set("time", 0);
            allcounter.push(newcounter);
            // 顺便更新显示span为默认值0
            elements[i].textContent=0;
        }
        AV.Object.saveAll(allcounter).then(function (todo) {
            // 成功保存记录之后
            console.log('创建记录成功！');
        }, function (error) {
            // 异常错误
            console.error('创建记录失败: ' + error.message);
        });
    }
    // 显示阅读量函数
    function showCount(Counter){
        // 是否需要创建新纪录的标志（添加一篇新文章）
        var flag=false;

        var elements=document.getElementsByClassName('leancloud-visitors');

        for(var i = 0;i<elements.length;i++){
            var query = new AV.Query(name);
            var url = elements[i].id;
            // console.log(i+'^^^'+decodeURI(url));
            query.equalTo('url',decodeURI(url));
            query.greaterThanOrEqualTo('time', 0);
            query.find().then(function (results) {
                // 当获取到的记录为0时置默认值
                if(results.length===0){
                    $('.leancloud-visitors').text('-');
                    flag=true;
                    console.log('返回查询记录为空');
                    // 如果获取到空记录就创建新记录
                    // createRecord(Counter);
                    return;
                }
                // 将获取到的数据设置为text
                for (var j = 0; j < results.length; j++) {
                    var item = results[j];
                    var url = item.get('url');
                    var time = item.get('time');
                    var element = document.getElementById(encodeURI(url));
                    if(element==null){
                        continue;
                    }
                    // console.log(element);
                    // console.log(time);
                    element.textContent = time;
                }
                if(flag){
                    // createRecord(Counter);
                }
            }, function (error) {
                console.log('query error:'+error.message);
            });
        }
    }
    $(function() {
        console.log('开始执行阅读量检查')
        var Counter = AV.Object.extend(name);
        showCount(Counter);
    });
</script>



<div class="page-navigator">
    {% if paginator.previous_page %}
    {% if paginator.page == 2 %}
    <a href="/" class="previous">上一页</a>
    {% else %}
    <a href="/page/{{ paginator.previous_page }}/" class="previous">上一页</a>
    {% endif %}
    {% endif %}
    <span class="page-number">第 {{ paginator.page }}/{{ paginator.total_pages }} 页</span>
    {% if paginator.next_page %}
    <a href="/page/{{ paginator.next_page }}/" class="next">下一页</a>
    {% endif %}
</div>