在网上冲浪的时候,看到有些博主做出了好漂亮好漂亮的网页😭虽然我的审美有限,但是至少会抄些好看的元素。幸运的是很多博主都把自己的装修笔记写了下来🥰这里记录一些漂亮的被我抄走的东西。具体的实现方式请去作者本人处查看喵~

添加分类索引小组件

代码抄自Summer大佬。这位大佬写了很多好看的建站笔记!快去看!
当时看到这个小组件就觉得好好看好实用。马上抄过来了。
效果如下图所示:

分类索引小组件
分类索引小组件

添加站点统计数据

使用不蒜子网页计数器,成功添加了一个插件,可以显示「站点访问量」和「运行时间」。
站点访问量抄自采叶小火,具体的代码来自这里
运行时间抄自半醒着的阳光,具体的代码来自这里
最后我自己组合修改了一下(其实几乎没修改),得到了下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
content: |
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问:<span id="busuanzi_value_site_pv"></span> 次</span>
<span id="runtime_span"></span>
<script type="text/javascript">
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("2024/07/06 23:00:00");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "已经运行:" + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();
</script>

在想要的地方引入即可。

2024/09/30修正

参考Ye老师修改了部分代码,并修复了一些bug。具体的文章参考Hugo添加不蒜子Busuanzi页面浏览次数与阅读数据统计
虽然对方的主题是Hugo,但是原理还是可以共通的。
最后的实现方式如下。
footer.ejs里,找到合适的位置引入:

node_modules/hexo-theme-stellar/layout/_partial/main/footer.ejs
1
2
3
4
5
6
<!-- busuanzi -->
<script
async
src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
></script>
<meta name="referrer" content="no-referrer-when-downgrade" />

把原来的插件代码改为:
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
content: |
<div class="busuanzi-footer">
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
</br>
<span id="busuanzi_container_site_uv">
本站访客数<span id="busuanzi_value_site_uv"></span>人
</span>
</div>
<span id="runtime_span"></span>
<script type="text/javascript">
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("2024/07/06 23:00:00");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "已经运行:" + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();
</script>