Skip to content

Commit 39e5743

Browse files
gytxtxgytxtx
committed
feat: 适配 i18n; 添加语言切换选项
1 parent 8a70b1a commit 39e5743

10 files changed

Lines changed: 278 additions & 21 deletions

File tree

‎assets/css/main.css‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -320,12 +320,16 @@ footer p {
320320

321321
.header-right {
322322
color: var(--text-muted);
323+
display: flex;
324+
align-items: center;
325+
flex-wrap: wrap;
326+
gap: 0.75rem;
323327
}
324328

325329
.header-right .current-page {
326330
color: var(--text-main);
327331
font-weight: 600;
328-
margin-left: 10px;
332+
margin-left: 0;
329333
}
330334

331335
.header-right .current-page:hover,
@@ -380,6 +384,35 @@ footer p {
380384
text-decoration: none;
381385
}
382386

387+
.language-switcher {
388+
display: inline-flex;
389+
align-items: center;
390+
gap: 0.35rem;
391+
}
392+
393+
.language-switcher__link {
394+
display: inline-flex;
395+
align-items: center;
396+
justify-content: center;
397+
min-height: 2rem;
398+
padding: 0.2rem 0.65rem;
399+
border: 1px solid var(--border-color);
400+
border-radius: 999px;
401+
color: var(--text-muted);
402+
font-size: 0.82rem;
403+
line-height: 1;
404+
text-decoration: none;
405+
white-space: nowrap;
406+
}
407+
408+
.language-switcher__link:hover,
409+
.language-switcher__link:focus-visible,
410+
.language-switcher__link.is-active {
411+
border-color: var(--primary-color);
412+
color: var(--primary-color);
413+
text-decoration: none;
414+
}
415+
383416
footer {
384417
color: var(--text-muted);
385418
font-size: 13px;
@@ -803,6 +836,13 @@ main mark {
803836
gap: 0.1rem;
804837
}
805838

839+
.mobile-appbar__actions {
840+
display: flex;
841+
align-items: center;
842+
gap: 0.5rem;
843+
margin-left: auto;
844+
}
845+
806846
.mobile-appbar__title {
807847
color: var(--text-main);
808848
font-size: 0.98rem;
@@ -940,9 +980,17 @@ main mark {
940980

941981
.header-right {
942982
width: 100%;
943-
display: flex;
944-
flex-wrap: wrap;
945-
gap: 10px;
983+
}
984+
985+
.mobile-appbar .language-switcher {
986+
gap: 0.25rem;
987+
}
988+
989+
.mobile-appbar .language-switcher__link {
990+
min-height: 2.25rem;
991+
padding: 0.2rem 0.55rem;
992+
font-size: 0.76rem;
993+
background-color: color-mix(in srgb, var(--card-bg) 92%, var(--primary-color) 8%);
946994
}
947995

948996
h1 { font-size: 1.5rem; }

‎assets/js/main.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ document.addEventListener('DOMContentLoaded', () => {
1717

1818
if (navToggle) {
1919
navToggle.setAttribute('aria-expanded', String(isOpen));
20-
navToggle.setAttribute('aria-label', isOpen ? '关闭导航菜单' : '打开导航菜单');
20+
navToggle.setAttribute(
21+
'aria-label',
22+
isOpen ? navToggle.dataset.labelClose || '' : navToggle.dataset.labelOpen || ''
23+
);
2124
}
2225
};
2326

@@ -57,11 +60,16 @@ document.addEventListener('DOMContentLoaded', () => {
5760

5861
if (mobileTocToggle) {
5962
mobileTocToggle.setAttribute('aria-expanded', String(isOpen));
60-
mobileTocToggle.setAttribute('aria-label', isOpen ? '收起目录' : '打开目录');
63+
mobileTocToggle.setAttribute(
64+
'aria-label',
65+
isOpen ? mobileTocToggle.dataset.labelClose || '' : mobileTocToggle.dataset.labelOpen || ''
66+
);
6167
}
6268

6369
if (tocToggleLabel) {
64-
tocToggleLabel.textContent = isOpen ? '收起目录' : '展开目录';
70+
tocToggleLabel.textContent = isOpen
71+
? tocToggle?.dataset.labelClose || ''
72+
: tocToggle?.dataset.labelOpen || '';
6573
}
6674
};
6775

‎content/_index.en.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
+++
2+
title = 'Home'
3+
date = 2026-01-01T08:00:00+08:00
4+
draft = false
5+
+++
6+
7+
Hello, and welcome to the Midori theme!
8+
9+
This page is a minimal English sample so multilingual UI and content can be previewed together.
10+
11+
---
12+
13+
# Heading 1
14+
15+
## Heading 2
16+
17+
### Heading 3
18+
19+
---
20+
21+
## Text styles
22+
23+
This is **bold text**.
24+
25+
This is *italic text*.
26+
27+
This is `inline code`.
28+
29+
---
30+
31+
## Lists
32+
33+
* Apple
34+
* Banana
35+
* Orange
36+
37+
1. First item
38+
2. Second item
39+
3. Third item
40+
41+
---
42+
43+
## Link and image
44+
45+
[Search with Google](https://www.google.com/)
46+
47+
![Sample image](default_bg.png)
48+
49+
---
50+
51+
## Blockquote
52+
53+
> This is a blockquote example.
54+
55+
---
56+
57+
## Code block
58+
59+
```js
60+
function hello() {
61+
console.log("Hello, Midori!");
62+
}
63+
```

‎hugo.toml‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
baseURL = 'https://example.org/'
2-
languageCode = 'zh-CN'
3-
title = 'Hugo Theme - Midori'
2+
defaultContentLanguage = 'zh-CN'
3+
defaultContentLanguageInSubdir = false
44
# theme = 'midori'
55

6+
[languages]
7+
[languages.zh-CN]
8+
languageCode = 'zh-CN'
9+
languageName = '简体中文'
10+
title = 'Hugo Theme - Midori'
11+
weight = 1
12+
13+
[languages.en]
14+
languageCode = 'en-US'
15+
languageName = 'English'
16+
title = 'Hugo Theme - Midori'
17+
weight = 2
18+
619
[menus]
720
[[menus.main]]
21+
identifier = 'menu.home'
822
name = '首页'
923
pageRef = '/'
1024
weight = 10

‎i18n/en.toml‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
[common.home]
2+
other = "Home"
3+
4+
[common.backToTop]
5+
other = "Back to top"
6+
7+
[header.browsing]
8+
other = "Browsing"
9+
10+
[language.switcher]
11+
other = "Language switcher"
12+
13+
[nav.title]
14+
other = "Navigation"
15+
16+
[nav.ariaLabel]
17+
other = "Site navigation"
18+
19+
[nav.openMenu]
20+
other = "Open navigation menu"
21+
22+
[nav.closeMenu]
23+
other = "Close navigation menu"
24+
25+
[toc.title]
26+
other = "Contents"
27+
28+
[toc.ariaLabel]
29+
other = "Table of contents"
30+
31+
[toc.open]
32+
other = "Open table of contents"
33+
34+
[toc.close]
35+
other = "Close table of contents"
36+
37+
[toc.expand]
38+
other = "Expand contents"
39+
40+
[toc.collapse]
41+
other = "Collapse contents"
42+
43+
[menu.home]
44+
other = "Home"
45+
46+
[menu.posts]
47+
other = "Posts"
48+
49+
[menu.tags]
50+
other = "Tags"

‎i18n/zh-CN.toml‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
[common.home]
2+
other = "首页"
3+
4+
[common.backToTop]
5+
other = "返回顶部"
6+
7+
[header.browsing]
8+
other = "正在浏览"
9+
10+
[language.switcher]
11+
other = "语言切换"
12+
13+
[nav.title]
14+
other = "导航"
15+
16+
[nav.ariaLabel]
17+
other = "站点导航"
18+
19+
[nav.openMenu]
20+
other = "打开导航菜单"
21+
22+
[nav.closeMenu]
23+
other = "关闭导航菜单"
24+
25+
[toc.title]
26+
other = "目录"
27+
28+
[toc.ariaLabel]
29+
other = "文章目录"
30+
31+
[toc.open]
32+
other = "打开目录"
33+
34+
[toc.close]
35+
other = "收起目录"
36+
37+
[toc.expand]
38+
other = "展开目录"
39+
40+
[toc.collapse]
41+
other = "收起目录"
42+
43+
[menu.home]
44+
other = "首页"
45+
46+
[menu.posts]
47+
other = "文章"
48+
49+
[menu.tags]
50+
other = "标签"

‎layouts/_default/baseof.html‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@
2020
type="button"
2121
aria-expanded="false"
2222
aria-controls="site-sidebar"
23-
aria-label="打开导航菜单"
23+
aria-label="{{ T "nav.openMenu" }}"
24+
data-label-open="{{ T "nav.openMenu" }}"
25+
data-label-close="{{ T "nav.closeMenu" }}"
2426
>
2527
<span class="material-icons" aria-hidden="true">menu</span>
2628
</button>
@@ -29,31 +31,36 @@
2931
<a class="mobile-appbar__title" href="{{ "/" | relURL }}">{{ .Site.Title }}</a>
3032
<span class="mobile-appbar__page">
3133
{{ if .IsHome }}
32-
首页
34+
{{ T "common.home" }}
3335
{{ else }}
3436
{{ .Title }}
3537
{{ end }}
3638
</span>
3739
</div>
40+
<div class="mobile-appbar__actions">
41+
{{ partial "language-switcher.html" . }}
3842
{{ if $hasToc }}
3943
<button
4044
class="mobile-toc-toggle"
4145
type="button"
4246
aria-expanded="false"
4347
aria-controls="post-toc-nav"
44-
aria-label="打开目录"
48+
aria-label="{{ T "toc.open" }}"
49+
data-label-open="{{ T "toc.open" }}"
50+
data-label-close="{{ T "toc.close" }}"
4551
>
4652
<span class="material-icons" aria-hidden="true">toc</span>
4753
</button>
4854
{{ end }}
55+
</div>
4956
</div>
5057
</div>
5158

5259
<div class="root">
5360
<div class="layout-shell{{ if $hasMainMenu }} layout-shell--with-sidebar{{ end }}{{ if $hasToc }} layout-shell--with-toc{{ end }}">
5461
{{ if $hasMainMenu }}
55-
<aside class="sidebar-card site-sidebar" id="site-sidebar" aria-label="站点导航">
56-
<div class="site-sidebar__title">导航</div>
62+
<aside class="sidebar-card site-sidebar" id="site-sidebar" aria-label="{{ T "nav.ariaLabel" }}">
63+
<div class="site-sidebar__title">{{ T "nav.title" }}</div>
5764
<div class="site-sidebar__nav">
5865
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
5966
</div>
@@ -78,9 +85,9 @@
7885
</div>
7986
</div>
8087

81-
<button class="back-to-top" type="button" aria-label="返回顶部">
88+
<button class="back-to-top" type="button" aria-label="{{ T "common.backToTop" }}">
8289
<span class="material-icons back-to-top__icon" aria-hidden="true">arrow_upward</span>
83-
<span class="back-to-top__label">返回顶部</span>
90+
<span class="back-to-top__label">{{ T "common.backToTop" }}</span>
8491
</button>
8592

8693
<script>

‎layouts/_partials/header.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99

1010
<!-- 右侧：当前页面 -->
1111
<div class="header-right">
12-
正在浏览:
12+
{{ T "header.browsing" }}:
1313
<a class="current-page" href="{{ .RelPermalink }}">
1414
{{ if .IsHome }}
15-
首页
15+
{{ T "common.home" }}
1616
{{ else }}
1717
{{ .Title }}
1818
{{ end }}
1919
</a>
20+
{{ partial "language-switcher.html" . }}
2021
</div>
2122
</div>
2223
</header>

0 commit comments

Comments
 (0)