昨天写过一篇 Stack 主题魔改,那篇仅适用于 Stack 主题,今天的这篇适用于所有 Hugo 博客(部分适用于所有网页),以后所有的添加也会在这篇文章里面
博客运行时间#
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
|
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script language="javascript">
var now = new Date();
function createtime(){
// 当前时间
now.setTime(now.getTime()+250);
var grt= new Date("20xx/xx/xx 00:00:00"); //网站诞生时间
days = (now - grt ) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;}
minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已稳定运行"+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"
}
setInterval("createtime()",250);
</script>
|
旅行者 1 号离地球距离#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<span id="voyager">载入旅行者一号离地球距离信息...</span>
<script language="javascript">
var now = new Date();
function createtime(){
// 当前时间
now.setTime(now.getTime()+250);
var start = new Date("08/01/2022 00:00:00"); // 旅行者1号开始计算的时间
var dis = Math.trunc(23400000000 + ((now - start) / 1000) * 17); // 距离=秒数*速度 记住转换毫秒
var unit = (dis / 149600000).toFixed(6); // 天文单位
document.getElementById("voyager").innerHTML = "旅行者 1 号当前距离地球 "+ dis +" 千米,约为 "+ unit +" 个天文单位 🚀"
}
setInterval("createtime()",250);
</script>
|
已写完了哪本书?#
来自:immmmm
将以下代码添加到 footer.html:
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
|
{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
{{$scratch.Add "total" .WordCount}}
{{ end }}
{{$totalWord := $scratch.Get "total" }}
{{ $wowWord := div $totalWord 10000}}
{{ $wowBook := "还在努力更新中..</br>加油!加油啦!"}}
{{ if ge $wowWord 40 }}{{$wowBook = "写完一本我国著名的</br>四大名著了!"}}
{{ else if ge $wowWord 35 }}{{$wowBook = "写完一本 东野圭吾 的</br>《白夜行》了!"}}
{{ else if ge $wowWord 34 }}{{$wowBook = "写完一本 雨果 的</br>《巴黎圣母院》了!"}}
{{ else if ge $wowWord 32 }}{{$wowBook = "写完一本 艾米莉·勃朗特 的</br>《呼啸山庄》了!"}}
{{ else if ge $wowWord 31 }}{{$wowBook = "写完一本 阿来 的</br>《尘埃落定》了!"}}
{{ else if ge $wowWord 30 }}{{$wowBook = "写完一本 茅盾 的</br>《子夜》了!"}}
{{ else if ge $wowWord 28 }}{{$wowBook = "写完一本 张炜 的</br>《古船》了!"}}
{{ else if ge $wowWord 25 }}{{$wowBook = "写完一本 钱钟书 的</br>《围城》了!"}}
{{ else if ge $wowWord 23 }}{{$wowBook = "写完一本 简·奥斯汀 的</br>《傲慢与偏见》了!"}}
{{ else if ge $wowWord 22 }}{{$wowBook = "写完一本 莫泊桑 的</br>《一生》了!"}}
{{ else if ge $wowWord 21 }}{{$wowBook = "写完一本 东野圭吾 的</br>《解忧杂货店》了!"}}
{{ else if ge $wowWord 20 }}{{$wowBook = "写完一本 巴金 的</br>《寒夜》了!"}}
{{ else if ge $wowWord 19 }}{{$wowBook = "写完一本 亚米契斯 的</br>《爱的教育》了!"}}
{{ else if ge $wowWord 18 }}{{$wowBook = "写完一本 沈从文 的</br>《边城》了!"}}
{{ else if ge $wowWord 17 }}{{$wowBook = "写完一本 马克·吐温 的</br>《汤姆·索亚历险记》了!"}}
{{ else if ge $wowWord 16 }}{{$wowBook = "写完一本 曹禺 的</br>《日出》了!"}}
{{ else if ge $wowWord 15 }}{{$wowBook = "写完一本 伯内特 的</br>《秘密花园》了!"}}
{{ else if ge $wowWord 14 }}{{$wowBook = "写完一本 史铁生 的</br>《宿命的写作》了!"}}
{{ else if ge $wowWord 13 }}{{$wowBook = "写完一本 曹禺 的</br>《雷雨》了!"}}
{{ else if ge $wowWord 12 }}{{$wowBook = "写完一本 余华 的</br>《活着》了!"}}
{{ else if ge $wowWord 11 }}{{$wowBook = "写完一本 鲁迅 的</br>《彷徨》了!"}}
{{ else if ge $wowWord 10 }}{{$wowBook = "写完一本 马克·吐温 的</br>《王子与乞丐》了!"}}
{{ else if ge $wowWord 9 }}{{$wowBook = "写完一本 林海音 的</br>《城南旧事》了!"}}
{{ else if ge $wowWord 7 }}{{$wowBook = "写完一本 鲁迅 的</br>《呐喊》了!"}}
{{ else if ge $wowWord 5 }}{{$wowBook = "写完一本 埃克苏佩里 的</br>《小王子》了!"}}
{{ end }}
|
1
|
共 {{$totalWord }} 字 <br> {{$wowBook | safeHTML }}
|
图片懒加载#
注:Stack 主题默认有懒加载,不需要自行添加
原理:使用 Hugo (v0.62+) 的渲染钩子对 markdown 文件内的链接和图像自定义渲染
实现:/layouts/_default/_markup
中新建 render-image.html
然后丢入代码:
1
2
3
|
<p class="md_image">
<img loading='lazy' src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</p>
|
自定义字体#
使用谷歌字体#
- 修改
/layouts/partials/footer/components/custom-font.html
为以下代码:
1
2
3
|
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="这里填入字体 CSS" rel="stylesheet">
|
-
在 Google Fonts 找一个你心仪的字体然后把字体 css 填入 填入字体 CSS
处
-
在以下代码中填入 font-family
后填入 /assets/scss/custom.scss
中即可
1
2
3
|
body, .article-content {
font-family: ;
}
|
其他字体#
霞骛文楷#
在 /layouts/partials/head/custom.html
中加入以下代码(选一个即可):
1
2
3
4
5
6
7
8
|
<!-- LXGW WenKai GB Screen -->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont@1.7.0/lxgwwenkaigbscreen.css" />
<!-- LXGW WenKai GB Screen R -->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont@1.7.0/lxgwwenkaigbscreenr.css" />
<!-- LXGW WenKai Screen -->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont@1.7.0/lxgwwenkaiscreen.css" />
<!-- LXGW WenKai Screen R -->
<link rel="stylesheet" href="https://npm.elemecdn.com/npm/lxgw-wenkai-screen-webfont@1.7.0/lxgwwenkaiscreenr.css" />
|
再在 /assets/scss/custom.scss
中加入以下代码:
1
2
3
4
|
// 字体
body, .article-content {
font-family: "LXGW WenKai Screen", sans-serif;
}
|
上面选择了 lxgwwenkaiscreenr.css
或 lxgwwenkaigbscreenr.css
需使用以下代码:
1
2
3
4
|
// 字体
body, .article-content {
font-family: "LXGW WenKai Screen R", sans-serif;
}
|
HarmonyOS Sans#
在 /layouts/partials/head/custom.html
中加入以下代码(选一个即可):
1
2
3
4
5
6
7
8
9
10
11
|
<!-- B 站 -->
<link
rel="stylesheet"
href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css"
/>
<!-- 我的 GitHub 仓库 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/Xalaok/HarmonyOS-Sans-Webfont@main/regular.min.css"
/>
|
再在 /assets/scss/custom.scss
中加入以下代码:
1
2
3
4
|
// 字体
body, .article-content {
font-family: "'HarmonyOS_Regular", sans-serif;
}
|
MiSans#
在 /layouts/partials/head/custom.html
中加入以下代码:
1
2
3
4
|
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/misans@3.1.1/lib/misans-400-regular.min.css"
/>
|
再在 /assets/scss/custom.scss
中加入以下代码:
1
2
3
4
|
// 字体
body, .article-content {
font-family: "MiSans", sans-serif;
}
|
鼠标样式#
感谢:Xecades
Cursor.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
26
|
#cursor {
position: fixed;
width: 16px;
height: 16px;
background: #000;
border-radius: 8px;
opacity: 0.25;
z-index: 10086;
pointer-events: none;
transition: 0.2s ease-in-out;
transition-property: background, opacity, transform;
}
#cursor.hidden {
opacity: 0;
}
#cursor.hover {
opacity: 0.1;
transform: scale(2.5);
}
#cursor.active {
opacity: 0.5;
transform: scale(0.5);
}
|
Cursor.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
var CURSOR;
Math.lerp = (a, b, n) => (1 - n) * a + n * b;
const getStyle = (el, attr) => {
try {
return window.getComputedStyle
? window.getComputedStyle(el)[attr]
: el.currentStyle[attr];
} catch (e) {}
return "";
};
class Cursor {
constructor() {
this.pos = {curr: null, prev: null};
this.pt = [];
this.create();
this.init();
this.render();
}
move(left, top) {
this.cursor.style["left"] = `${left}px`;
this.cursor.style["top"] = `${top}px`;
}
create() {
if (!this.cursor) {
this.cursor = document.createElement("div");
this.cursor.id = "cursor";
this.cursor.classList.add("hidden");
document.body.append(this.cursor);
}
var el = document.getElementsByTagName('*');
for (let i = 0; i < el.length; i++)
if (getStyle(el[i], "cursor") == "pointer")
this.pt.push(el[i].outerHTML);
document.body.appendChild((this.scr = document.createElement("style")));
this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='.5'/></svg>") 4 4, auto}`;
}
// 换颜色在opacity='.5'后面加fill='rgb(xxx, xxx, xxx)'
refresh() {
this.scr.remove();
this.cursor.classList.remove("hover");
this.cursor.classList.remove("active");
this.pos = {curr: null, prev: null};
this.pt = [];
this.create();
this.init();
this.render();
}
init() {
document.onmouseover = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
document.onmouseout = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
document.onmousemove = e => {(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8); this.pos.curr = {x: e.clientX - 8, y: e.clientY - 8}; this.cursor.classList.remove("hidden");};
document.onmouseenter = e => this.cursor.classList.remove("hidden");
document.onmouseleave = e => this.cursor.classList.add("hidden");
document.onmousedown = e => this.cursor.classList.add("active");
document.onmouseup = e => this.cursor.classList.remove("active");
}
render() {
if (this.pos.prev) {
this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.15);
this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.15);
this.move(this.pos.prev.x, this.pos.prev.y);
} else {
this.pos.prev = this.pos.curr;
}
requestAnimationFrame(() => this.render());
}
}
(() => {
CURSOR = new Cursor();
// 需要重新获取列表时,使用 CURSOR.refresh()
})();
|
效果:本站鼠标样式