Skip to content

Commit 793aab3

Browse files
magic-altmagic-alt
authored
Merge pull request #6 from magic-alt/codex/optimize-code-for-hugo-papermod-theme
Apply PaperMod-inspired styling and theme toggle
2 parents 5275f4d + e609ecf commit 793aab3

File tree

3 files changed

+502
-448
lines changed

3 files changed

+502
-448
lines changed

‎_includes/footer.html‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,45 @@ <h3 class="footer-heading">联系</h3>
2727
<p>&copy; {{ site.time | date: "%Y" }} {{ site.title }} · 借助 Jekyll 与开源主题生态构建</p>
2828
</div>
2929
</footer>
30-
{% if page.math or site.mathjax %}
31-
<script async id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
32-
{% endif %}
30+
<script>
31+
(function () {
32+
var storageKey = 'pref-theme';
33+
var root = document.documentElement;
34+
var toggle = document.querySelector('.theme-toggle');
35+
var metaTheme = document.querySelector('meta[name="theme-color"]:not([media])');
36+
var mediaQuery = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
37+
38+
function setTheme(theme, persist) {
39+
root.dataset.theme = theme;
40+
if (metaTheme) {
41+
metaTheme.setAttribute('content', theme === 'dark' ? '#0f172a' : '#f8fafc');
42+
}
43+
if (persist) {
44+
try {
45+
localStorage.setItem(storageKey, theme);
46+
} catch (err) {
47+
console.warn('无法保存主题偏好', err);
48+
}
49+
}
50+
}
51+
52+
setTheme(root.dataset.theme || 'light', false);
53+
54+
if (toggle) {
55+
toggle.addEventListener('click', function () {
56+
var nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
57+
setTheme(nextTheme, true);
58+
});
59+
}
60+
61+
if (mediaQuery) {
62+
mediaQuery.addEventListener('change', function (event) {
63+
if (!localStorage.getItem(storageKey)) {
64+
setTheme(event.matches ? 'dark' : 'light', false);
65+
}
66+
});
67+
}
68+
})();
69+
</script>
3370
</body>
3471
</html>

‎_includes/head.html‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
<!DOCTYPE html>
2-
<html lang="{{ page.lang | default: site.lang | default: 'zh-Hans' }}">
2+
<html lang="{{ page.lang | default: site.lang | default: 'zh-Hans' }}" data-theme="light">
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
8-
<!-- SEO 标签：自动生成 title, description, OG, Twitter Card, JSON-LD 等 -->
7+
98
{% seo %}
10-
11-
<!-- Canonical URL -->
9+
1210
<link rel="canonical" href="{{ page.url | absolute_url }}">
13-
14-
<!-- 站点级别的结构化数据 (Person Schema) -->
11+
1512
<script type="application/ld+json">
1613
{
1714
"@context": "https://schema.org",
@@ -25,12 +22,29 @@
2522
"description": "{{ site.description }}"
2623
}
2724
</script>
28-
29-
<meta name="theme-color" content="#0f172a">
25+
26+
<meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)">
27+
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
28+
<meta name="theme-color" content="#f8fafc">
29+
3030
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | absolute_url }}">
3131
<link rel="stylesheet" href="{{ "/assets/css/styles.css" | relative_url }}">
32-
33-
<!-- MathJax Configuration -->
32+
33+
<script>
34+
(function () {
35+
var storageKey = 'pref-theme';
36+
var root = document.documentElement;
37+
var storedTheme = localStorage.getItem(storageKey);
38+
if (storedTheme) {
39+
root.dataset.theme = storedTheme;
40+
return;
41+
}
42+
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
43+
root.dataset.theme = prefersDark ? 'dark' : 'light';
44+
})();
45+
</script>
46+
47+
{% if page.math or site.mathjax %}
3448
<script>
3549
MathJax = {
3650
tex: {
@@ -44,7 +58,8 @@
4458
}
4559
};
4660
</script>
47-
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
61+
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script"></script>
62+
{% endif %}
4863
</head>
4964
<body class="layout-{{ page.layout | default: 'default' }}{% if page.body_class %} {{ page.body_class }}{% endif %}">
5065
<a class="skip-link" href="#main-content">跳至正文</a>
@@ -60,7 +75,17 @@
6075
<li><a href="{{ "/archive/" | relative_url }}" {% if page.url == "/archive/" %}aria-current="page"{% endif %}>归档</a></li>
6176
<li><a href="{{ "/about/" | relative_url }}" {% if page.url == "/about/" %}aria-current="page"{% endif %}>关于</a></li>
6277
</ul>
63-
<a class="nav-cta" href="{{ "/feed.xml" | relative_url }}">订阅 RSS</a>
78+
<div class="nav-actions">
79+
<a class="nav-cta" href="{{ "/feed.xml" | relative_url }}">订阅 RSS</a>
80+
<button class="theme-toggle" type="button" aria-label="切换主题">
81+
<svg class="theme-icon theme-icon-sun" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
82+
<path d="M12 4.75a.75.75 0 0 1-.75-.75V2.5a.75.75 0 1 1 1.5 0V4a.75.75 0 0 1-.75.75Zm6.364 2.136a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 0 0-1.06 1.06l1.06 1.06ZM21.5 11.25H20a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5ZM12 19.25a.75.75 0 0 0-.75.75V22a.75.75 0 0 0 1.5 0v-2a.75.75 0 0 0-.75-.75Zm-7.424-3.364-.03.03a.75.75 0 1 0 1.06 1.06l1.03-1.03a.75.75 0 0 0-1.06-1.06Zm1.03-9.546-1.03-1.03a.75.75 0 1 0-1.06 1.06l1.03 1.03a.75.75 0 1 0 1.06-1.06ZM4 12a.75.75 0 0 0-.75-.75H2.5a.75.75 0 0 0 0 1.5H3.25A.75.75 0 0 0 4 12Zm12.495 6.284 1.06 1.06a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 0 0-1.06 1.06ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z"></path>
83+
</svg>
84+
<svg class="theme-icon theme-icon-moon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
85+
<path d="M13.25 3.018a.75.75 0 0 1 .91-.91 9.25 9.25 0 1 1-10.232 10.23.75.75 0 0 1 .91-.91A7.75 7.75 0 1 0 13.25 3.018Z"></path>
86+
</svg>
87+
</button>
88+
</div>
6489
</nav>
6590
</div>
6691
</header>

0 commit comments

Comments
 (0)