在网上冲浪的时候,看到有些博主做出了好漂亮好漂亮的网页😭虽然我的审美有限,但是至少会抄些好看的元素。幸运的是很多博主都把自己的装修笔记写了下来🥰这里记录一些漂亮的被我抄走的东西。具体的实现方式请去作者本人处查看喵~
添加分类索引小组件
代码抄自Summer大佬。这位大佬写了很多好看的建站笔记!快去看!
当时看到这个小组件就觉得好好看好实用。马上抄过来了。
效果如下图所示:
添加站点统计数据
使用不蒜子网页计数器,成功添加了一个插件,可以显示「站点访问量」和「运行时间」。
站点访问量抄自采叶小火,具体的代码来自这里。
运行时间抄自半醒着的阳光,具体的代码来自这里。
最后我自己组合修改了一下(其实几乎没修改),得到了下面的代码:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22content: |
<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页面浏览次数与阅读数据统计。
最后的实现方式如下。
在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
29content: |
<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>