halo博客展示总访问量、总点赞数

目前大部分的halo博客主题都是集成的卜算子的统计模块，这对一个新博客来说倒是没啥问题，只要一开始就打开统计开关就行了，但是老博客头一次使用各种数据都是零，根本没办法展示一个真实的访问量。所以我这边对现有主题做了一点改造以支持展示halo自带的访问量、总点赞数。

核心代码

halo其实已经提供了接口查询总访问量、总点赞等信息，我目前在用的joe2.0主题的代码里面也写了获取总访问量并展示的代码，不过不知道什么原因现在注释掉了，估计是因为改用了卜算子统计吧。

/* 总访问量 */
initUV() {
	if (!ThemeConfig.enable_birthday) return;
	Utils.request({
		url: "/api/content/statistics/user",
	}).then((res) => {
		res && $("#site-uv").text(res.visitCount || 0);$("#total-like").text(res.likeCount || 0);
	});
}

• 其实就是调一下查询统计数据的接口，然后把数字展示到对应的地方。

joe2.0主题改造方法

其他主题也可以参考一下

1. 打开登陆博客后台，找到 外观 - 主题编辑 模块
2. 找到template/common/footer.ftl文件，搜索 <div class="site_life">
3. 搜索到之后，在<div class="site_life">标签的下一行最前面加上以下代码，点击保存。

<i class="joe-font joe-icon-tongji"></i>总访问量&nbsp;<strong style="font-weight:500;color: var(--theme);" id="site-uv">0</strong>&nbsp;|&nbsp;<i class="joe-font joe-icon-dianzan"></i>总点赞&nbsp;<strong style="font-weight:500;color: var(--theme);" id="total-like">0</strong>&nbsp;|&nbsp;

4. 找到source/js/min/common.min.js文件，搜索 initBirthday:function()
5. 在 initBirthday:function()前面加上以下代码，点击保存。

initUV:function(){if (!ThemeConfig.enable_birthday) return;Utils.request({url:"/api/content/statistics/user"}).then(t=>{t&&$("#site-uv").text(t.visitCount||0);$("#total-like").text(t.likeCount || 0);})},

效果展示

• 如图，这个数字和我们在博客后台看到的数据是保持一致的。