Skip to content

Commit 4cfc413

Browse files
ZenLianZenLian
committed
update hello-hugo
1 parent 85f1676 commit 4cfc413

File tree

4 files changed

+140
-20
lines changed

4 files changed

+140
-20
lines changed

‎config.toml

+5-8
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,7 @@ ignored_content = []
4545
# {name = "authors"}, # Basic definition: no feed or pagination
4646
# ]
4747
#
48-
taxonomies = [
49-
{name = "tags"},
50-
]
48+
taxonomies = [{ name = "tags" }]
5149

5250
# Whether to build a search index to be used later on by a JavaScript library
5351
# build_search_index = true
@@ -67,19 +65,18 @@ render_emoji = true
6765

6866
# Whether smart punctuation is enabled (changing quotes, dashes, dots in their typographic form)
6967
# For example, `...` into `…`, `"quote"` into `“curly”` etc
70-
# smart_punctuation = false
68+
smart_punctuation = true
7169

7270
[extra]
7371
colormode = "colorful" # "normal" "colorful"
7472

7573
page_404_content = ["空山不见人", "但闻人语响"]
7674

7775
navigation = [
78-
{ icon = "mdi:tags", label = "标签", path = "tags"},
79-
{ icon = "mdi:user", label = "关于", path = "about"}
76+
{ icon = "mdi:tags", label = "标签", path = "tags" },
77+
{ icon = "mdi:user", label = "关于", path = "about" },
8078
]
8179
socials = [
8280
{ icon = "mdi:github", link = "https://github.com/zenlian" },
83-
{ icon = "mdi:email", link = "mailto://[email protected]" }
81+
{ icon = "mdi:email", link = "mailto://[email protected]" },
8482
]
85-

‎content/2023 游戏总结.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title = "2023 游戏总结"
33
date = 2024-01-28T19:19:18+08:00
44
slug = "game-summary-2023"
55
[taxonomies]
6-
tags = ["游戏"]
6+
tags = ["游戏", "生活"]
77
+++
88

99
离开游戏行业快一年了，说来也奇怪，过去一年玩的游戏反而比以前更多了。steam 从去年开始推出[年度报告](https://s.team/y23/chfvjdpv?l=schinese)，正好回顾一下过去一年的游戏情况。希望自己永远喜欢玩游戏！

‎content/Hello, zola.md

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
+++
2+
title = "Hello, zola!"
3+
slug = "hello-zola"
4+
date = 2023-03-10T21:23:47+08:00
5+
[taxonomies]
6+
tags = ["tools", "zola"]
7+
+++
8+
9+
随着 rust 的流行，近年来我在 linux 环境下的很多工具都切换到 rust 版本了，比如 alacritty、ripgrep、bat、exa 等。而静态博客还在用 hugo 多少有点不合群了，那就一并换成 [zola](https://www.getzola.org/) 吧。
10+
11+
---
12+
13+
## 主题
14+
15+
之前 hugo 用的主题是 [MemE](https://github.com/reuixiy/hugo-theme-meme)，zola 里没有对应的主题，所以打算参考原版主题自己写一个。配色上参考了 [catppuccin](https://github.com/catppuccin/catppuccin)，这也是我在 VSCode/Neovim 里一直在用的配色方案。
16+
17+
### 亮暗模式切换
18+
19+
首先在 css 中定义亮、暗模式下的颜色值：
20+
21+
```css
22+
:root {
23+
--color-red: #d20f39;
24+
--color-yellow: #df8e1d;
25+
--color-green: #40a02b;
26+
--color-text: #4c4f69;
27+
--color-base: #eff1f5;
28+
/* 省略... */
29+
}
30+
31+
:root[data-theme="dark"] = {
32+
--color-red: #f38ba8;
33+
--color-yellow: #f9e2af;
34+
--color-green: #a6e3a1;
35+
--color-text: #cdd6f4;
36+
--color-base: #1e1e2e;
37+
/* 省略... */
38+
}
39+
```
40+
41+
在 css 样式中凡是涉及到颜色定义的，都必须引用以上变量，比如：
42+
43+
```css
44+
html, body {
45+
color: var(--color-text);
46+
background-color: var(--color-base);
47+
}
48+
```
49+
50+
那么只要 `--color-*` 这些变量值改变了，网站的颜色就会跟着变化。
51+
52+
在网页的头部添加一个切换主题的图标：
53+
54+
```html
55+
<li>
56+
<a id="theme-switcher" href="#">
57+
<iconify-icon id="theme-switcher-light" icon="material-symbols:light-mode" class="menu-icon"></iconify-icon>
58+
<iconify-icon id="theme-switcher-dark" icon="material-symbols:dark-mode" class="menu-icon"></iconify-icon>
59+
</a>
60+
</li>
61+
```
62+
63+
最后我们需要用 js 脚本来切换主题：
64+
65+
```javascript
66+
class ThemeSwitcher {
67+
constructor() {}
68+
69+
// 初始化主题
70+
initTheme() {
71+
const currentTheme = localStorage.getItem("theme") || "light";
72+
if (currentTheme === "light") {
73+
document.documentElement.setAttribute("data-theme", "light");
74+
} else {
75+
document.documentElement.setAttribute("data-theme", "dark");
76+
}
77+
this.updateDom(currentTheme);
78+
}
79+
80+
// 切换主题
81+
switchTheme() {
82+
const currentTheme =
83+
document.documentElement.getAttribute("data-theme") || "light";
84+
const theme = currentTheme === "light" ? "dark" : "light";
85+
document.documentElement.setAttribute("data-theme", theme);
86+
localStorage.setItem("theme", theme);
87+
this.updateDom(theme);
88+
}
89+
90+
// 切换主题图标
91+
updateDom(mode) {
92+
const light_icon = document.getElementById("theme-switcher-light");
93+
const dark_icon = document.getElementById("theme-switcher-dark");
94+
if (mode === "light") {
95+
light_icon.style.display = "inline-block";
96+
dark_icon.style.display = "none";
97+
} else {
98+
light_icon.style.display = "none";
99+
dark_icon.style.display = "inline-block";
100+
}
101+
}
102+
}
103+
104+
let switcher = new ThemeSwitcher();
105+
106+
// DOM 加载后调用
107+
window.addEventListener(
108+
"DOMContentLoaded",
109+
() => {
110+
switcher.initTheme();
111+
// 给图标添加点击事件，点击图标切换主题
112+
const a = document.getElementById("theme-switcher");
113+
a &&
114+
a.addEventListener("click", (a) => {
115+
a.preventDefault();
116+
switcher.switchTheme();
117+
});
118+
},
119+
{
120+
once: true,
121+
}
122+
);
123+
```

‎themes/cattery/config.toml

+11-11
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
base_url = "https://zenlian.github.io/cattery"
33

44
# The site title and description; used in feeds by default.
5-
title = "The Ship of Zenlian"
6-
description = ""
5+
title = "Cattery"
6+
description = "Demo site of theme cattery"
77

88
# The default language; used in feeds.
99
default_language = "zh"
@@ -48,9 +48,7 @@ feed_filename = "atom.xml"
4848
# {name = "authors"}, # Basic definition: no feed or pagination
4949
# ]
5050
#
51-
taxonomies = [
52-
{name = "tags", feed = true},
53-
]
51+
taxonomies = [{ name = "tags", feed = true }]
5452

5553
# Whether to build a search index to be used later on by a JavaScript library
5654
# build_search_index = true
@@ -59,7 +57,7 @@ taxonomies = [
5957
# Whether to do syntax highlighting
6058
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
6159
highlight_code = true
62-
highlight_theme = "visual-studio-dark"
60+
highlight_theme = "css"
6361

6462
# When set to "true", emoji aliases translated to their corresponding
6563
# Unicode emoji equivalent in the rendered Markdown files. (e.g.: :smile: => 😄)
@@ -75,15 +73,17 @@ colormode = "normal" # "normal" "colorful"
7573
page_404_content = ["Oops", "You're stuck in limbo"]
7674

7775
navigation = [
78-
{ icon = "mdi:tags", label = "tags", path = "tags"},
79-
{ icon = "mdi:user", label = "about", path = "about"}
76+
{ icon = "mdi:tags", label = "tags", path = "tags" },
77+
{ icon = "mdi:user", label = "about", path = "about" },
8078
]
8179

8280
socials = [
8381
{ icon = "mdi:github", link = "https://your.github" },
84-
{ icon = "mdi:email", link = "mailto://your@email" }
82+
{ icon = "mdi:email", link = "mailto://your@email" },
8583
]
8684

8785
[extra.copyright]
88-
site = ["CC BY-NC-SA 4.0", "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"]
89-
86+
site = [
87+
"CC BY-NC-SA 4.0",
88+
"https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh",
89+
]

0 commit comments

Comments
 (0)