更新

22-09-02：新增排序数组，可以自定义显示顺序，且控制元素显隐更方便。

22-08-23：@Heo更改了他的关于页面，对51la也进行了美化，于是小小的模仿一下。

前言

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

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

添加代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
### 访问统计
<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>' }
});
</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;
}