【Hugo】博客文章浏览数统计

前言：

博客文章统计组件个人找到了两个，分别是不蒜子，以及vercount

不蒜子比较老，但很稳定，到现在仍然可以使用，没有停服

vercount则比较新，并做了一些代码优化

两种使用都基本一样，差别不大，看自己喜好，下面的教程是以vercount来举例，用不蒜子的话，就把对应的脚本和元素标签替换一下就好

1 基本引入

（1）修改layouts/partials/footer/custom.html（不存在则自行创建），引入脚本

1
2


<!-- vercount的脚本；若用不蒜子，则更换成不蒜子的脚本就好 -->
<script defer src="https://cn.vercount.one/js"></script>

（2）准备一张浏览量的icon(Ctrl+S保存)，放到assets/icons文件夹下

（3）修改layouts/article/components/details.html，在合适的位置下加入以下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<div class="article-details">
    ...
    <footer class="article-time">
        ...
        <!-- 浏览量统计 -->
        <div id="viewCount">
            {{ partial "helper/icon" "eye" }}
            <time class="article-time--reading">
                <!-- vercount统计当前页面浏览数的标签；若用不蒜子，更换成不蒜子对应的标签就好 -->
                <span id="vercount_value_page_pv">loading... </span>次
            </time>
        </div>
    </footer>
    ...
</div>

（4）这样文章详情的开头就显示浏览数了

2 问题修复

问题描述：
- 博客首页的文章列表显示了浏览数，且只有第一篇文章才有浏览数，并且浏览数的数字不正确

产生原因：
- layouts/partials/article/components/details.html此html文件也被用在了博客首页的文章列表，所以也触发了vercount读取当前页面的浏览数
- 因为读取的数据是当前页面的浏览数，也就是首页的浏览数，并非文章的浏览数，所以数据只加载一次，且不准确

解决思路：
- 由于vercount并未提供只查询文章浏览数的接口，只有一个文章浏览数+1，并且返回浏览数的接口，所以无法实现首页对每篇文章的浏览数的单独查询
- 既然无法实现首页展示每篇文章的单独浏览数，那就直接隐藏就好了，等点入文章才看到具体的浏览数

具体操作：
- （1）修改layouts/partials/footer/custom.html，引入以下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<script>
    function showHideView() {
        // 判断是否存在vercount标签
        let viewCounts = document.querySelectorAll("#viewCount");
        if (viewCounts) {
            // 判断是否为文章页
            let article =  document.querySelector(".article-page");
            if (!article) {
                viewCounts.forEach(ele => {
                    ele.style.display = 'none';
                });
            }
        }
    }
    
    showHideView();
</script>

如果嫌麻烦，浏览数统计可以和更新时间一样，放到文章末尾就好，就不会显示到首页上了

具体修改layouts/partials/article/footer.html就好，看个人喜好吧