【记录】HandSome主题接入不蒜子统计全站访客数-洛卡日记

AI智能总结:

通过在 Handsome 主题中添加“不蒜子”统计代码并在 pjax 回调函数中动态加载脚本，成功实现了稳定的浏览量统计功能。

前言

由于大多数人typecho还是动态的，并且本篇内容只针对于handsome。所以这篇文章主要是给自己记录哒，若是能帮到大家那就更好了。
前一阵子研究了typecho静态化，也成功给站点整成静态网站了，速度嗖嗖的....
But，惊喜是要付出代价的，我发现了一个最大的问题，浏览量这个功能彻底失效了！
在询问了几个朋友后，发现很多友友都在使用“不蒜子”这个我没听说过的平台进行统计，所以我在网上搜索了“不蒜子”三个字
哈！居然搜到了万能杜老师的平台
无敌了，杜老师
效果电脑端可以见右面的侧边栏，手机端可以见底边框
每个文章的阅览量暂时还没有加，先攒一攒数据

配置貌似挺简单

Handsome主题侧边栏的内容在/usr/themes/handsome/component/这个目录下，有一个sidebar.php，这个文件包含着侧边栏的数据。
在自己的喜欢的位置，咱创建一栏统计数据，为了适配主题，我简单修改了代码，修改的代码如下


 <li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="user"></i></span><span class="badge pull-right"><span id="busuanzi_value_site_pv"></span></span><?php _me("破站访客") ?></li>

我给加在了这里
之后我们引入不蒜子的script并放入后台body尾部，以加载js

<script async src="https://npm.elemecdn.com/penndu@1.0.0/bsz.js"></script>

不是哥们，咋还出bug了？

打开网页，呀，成功在边栏显示了本站所有阅览量，开开心心，这也太容易了....嘛？

正开心呢，点开了一篇文章，一看侧边栏:不是哥们儿，数据咋还没了？
变成一个空格了

不是哥们，互联网真精彩

这个问题有一个明显的特点，就是打开文章页之后，访客量就会消失，这不得不让人想到可能是pjax的问题。
pjax是无刷新页面加载内容的一个东东，这是主题自带的，也就是说我点开文章不需要再加载一遍网页了，看起来更加丝滑。
后台介绍是这么写的
看了一下handsome主题后台管理里面“pjax回调函数”的介绍，果然又提到了刷新界面之后js不能绑定的情况，也就是说改变页面之后侧边栏获取不到云端的数据了，所以我们需要把回调函数的框框中填入以下内容，下面是我改编的一段js

// 创建一个新的 script 元素
var script = document.createElement('script');

// 设置 script 元素的属性
script.src = 'https://npm.elemecdn.com/penndu@1.0.0/bsz.js';
script.async = true;

// 将 script 元素插入到 document 中的 head 部分
document.head.appendChild(script);

也就是每次pjax之后，都给他附加上js。
因为我比较小白，实话说我也不知道这样写代码是否合理，可能属于狮山代码，但程序运行起来好像是没有什么问题，也确实解决了需求。
重新清除缓存，刷新界面，果然无论怎么切换文章，浏览量一直都在，不再会消失了。

单个文章阅读量

经过上面的折腾，文章的阅读量就比较好说了，找到/usr/themes/handsome/post.php这个文件，在自己喜欢的位置把下面的代码添加进去

<li class="meta-word"><span class="post-icons"><i data-feather="eye"></i></span><span class="meta-value"><?php _me('阅览人数'); ?><span id="busuanzi_value_page_pv"></span><?php _me('人'); ?></span></li>

但这个我没改，因为之前的浏览量都没了，等我积攒一点数据之后我再改