侧边栏壁纸
博主头像
luoxx博主等级

只要思想不滑坡,办法总比困难多

  • 累计撰写 53 篇文章
  • 累计创建 58 个标签
  • 累计收到 987 条评论

目 录CONTENT

文章目录

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

luoxx
2022-09-15 / 0 评论 / 2 点赞 / 1,736 阅读 / 570 字
温馨提示:
本文最后更新于 2022-09-15,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

目前大部分的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;
  1. 找到source/js/min/common.min.js文件,搜索 initBirthday:function()
  2. 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);})},

效果展示

image-1663216360734

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

评论区