更新

9.2:新增排序数组,可以自定义显示顺序,且控制元素显隐更方便。

8.23:@Heo更改了他的关于页面,对51la也进行了美化,于是小小的模仿一下。

前言

逛洪哥博客的时候看到了这个关于51la统计的文章,觉得还不错于是也跟着弄了一下。
但是在弄前端统计的时候,发现自带的样式实在太简单,写css覆盖的话还很麻烦,夜间模式看的话很突兀。
所以我就稍微改了一下,只要它的数据,样式全由自己来写。

注册51la:点我注册 通过此链接注册你我均可获得现金奖励(满100提现)。

洪哥原文:51la统计体验报告:很全面的惊喜,Butterfly适配51la统计

添加代码

因为我把统计放在了关于页面,所以就直接把js写在了关于页面 里面,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
### 访问统计
<div id="statistic">
<div class="content"></div>
<span style="font-size:14px">流量统计支持:<a style="color:#1690ff;" href="https://v6.51.la/">51la</a></span>
</div>

<!-- js -->
<script>
// 链接替换即可,不需要后面的参数
fetch('https://v6-widget.51.la/v6/JkxJmzzWDhbGjOFf/quote.js').then(res => res.text()).then((data) => {
let title = ['最近活跃访客', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量']
let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
let order = [1, 3, 2, 4, 5] // 新增 可排序,如果需要隐藏则删除对应数字即可。
// 示例:[1, 3, 2, 4, 5] 显示 ['今日人数', '昨日人数', '今日访问', '昨日访问', '本月访问'],不显示 最近活跃访客(0) 和 总访问量(6)
for (let i = 0; i < order.length; i++) { document.querySelectorAll('#statistic .content')[0].innerHTML += '<div><span>' + title[order[i]] + '</span><span class="num">' + num[order[i]] + '</span></div>' }
});

// 老版本
// for (let i = 0; i < num.length; i++) {
// // 自定义不显示哪个或者显示哪个,如下为不显示 最近活跃访客 和 总访问量
// if (i == 0 || i == num.length - 1) continue;
// s.innerHTML += '<div><span>' + title[i] + '</span><span class="num">' + num[i] + '</span></div>'
// }
//
</script>

CSS

因为我主要是为了适配背景和字体,所以就写的比较简单,你可以再自己写。
css文件创建和引入不会的参考:Hexo 博客添加自定义 css 和 js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#statistic {
font-size: 18px;
padding: 20px;
border-radius: 12px;
width: 100%;
color: var(--font-color);
background-color: var(--card-bg);
}

div#statistic .content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

div#statistic a {
text-decoration: none;
}

#statistic .content div {
display: inline-block;
}

#statistic div span {
font-size: 14px;
line-height: 1.3;
display: block;
}

#statistic div .num {
letter-spacing: 1px;
font-weight: bold;
font-size: 2rem;
margin-bottom: .8rem;
white-space: nowrap;
}