51工具盒子前言 {#前言}
发现自带的样式实在太简单，写css覆盖的话还很麻烦，夜间模式看的话很突兀。
所以我就稍微改了一下，只要它的数据，样式全由自己来写。
添加代码 {#添加代码}
代码如下所示：
|---------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 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}
因为我主要是为了适配背景和字体，所以就写的比较简单，你可以再自己写。
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; } |
参考链接：https://blog.leonus.cn/2022/51la.html
