Skip to content

Commit 7b6ca2e

Browse files
lzwjavalzwjava
committed
add
1 parent 9a286b3 commit 7b6ca2e

File tree

8 files changed

+78
-89
lines changed

8 files changed

+78
-89
lines changed

‎_includes/header.html

Lines changed: 4 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,20 @@
11
<header class="page-header" role="banner">
2-
32
<!-- Part 1: Avatar -->
43
<div class="row compact-row">
54
<div class="circular-image">
65
<img id="avatarImg" src="/assets/images/avatar.jpg" alt="">
76
</div>
87
<div class="text-container">
98
<h3 class="project-name">{{ page.title | default: site.title }}</h3>
10-
119
<h3 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline
1210
}}</h3>
1311
</div>
1412

15-
<button id="themeToggle" class="icon-button" aria-label="Toggle Theme">
16-
<!-- Sun Icon (shown when in dark mode) -->
17-
<svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
18-
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
19-
<circle cx="12" cy="12" r="5"></circle>
20-
<line x1="12" y1="1" x2="12" y2="3"></line>
21-
<line x1="12" y1="21" x2="12" y2="23"></line>
22-
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
23-
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
24-
<line x1="1" y1="12" x2="3" y2="12"></line>
25-
<line x1="21" y1="12" x2="23" y2="12"></line>
26-
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
27-
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
28-
</svg>
29-
30-
<!-- Moon Icon (shown when in light mode) -->
31-
<svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
32-
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
33-
<path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"></path>
34-
</svg>
13+
<button id="themeToggleHeader" class="icon-button" aria-label="Toggle Theme">
14+
{% include theme-icons.html %}
3515
</button>
36-
3716
</div>
17+
3818
<div class="row">
3919
<!-- Information-related buttons -->
4020
<a href="/pages/resume-en" class="btn">📄 <br>Résumé</a>
@@ -50,40 +30,6 @@ <h3 class="project-tagline">{{ page.description | default: site.description | de
5030
<a href="/pages/donate-en" class="btn">💰 <br>Moneta</a>
5131
<a href="/pages/disclaimer-en" class="btn">📝 <br>नोट्स</a>
5232
</div>
53-
54-
5533
</header>
5634

57-
<script>
58-
const rootElement = document.documentElement;
59-
const themeToggleBtn = document.getElementById('themeToggle');
60-
const sunIcon = document.getElementById('sunIcon');
61-
const moonIcon = document.getElementById('moonIcon');
62-
const avatarImg = document.getElementById('avatarImg'); // reference to the <img>
63-
64-
const savedTheme = localStorage.getItem('theme');
65-
if (savedTheme === 'dark') {
66-
rootElement.classList.add('dark-mode');
67-
}
68-
69-
function updateIconsAndAvatar() {
70-
const isDark = rootElement.classList.contains('dark-mode');
71-
sunIcon.style.display = isDark ? 'inline-block' : 'none';
72-
moonIcon.style.display = isDark ? 'none' : 'inline-block';
73-
avatarImg.src = isDark
74-
? '/assets/images/avatar_dark.png'
75-
: '/assets/images/avatar.jpg';
76-
}
77-
78-
updateIconsAndAvatar();
79-
80-
themeToggleBtn.addEventListener('click', function () {
81-
rootElement.classList.toggle('dark-mode');
82-
if (rootElement.classList.contains('dark-mode')) {
83-
localStorage.setItem('theme', 'dark');
84-
} else {
85-
localStorage.setItem('theme', 'light');
86-
}
87-
updateIconsAndAvatar();
88-
});
89-
</script>
35+
<script src="/assets/js/dark-mode.js"></script>

‎_includes/theme-icons.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!-- theme-icons.html -->
2+
<svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
3+
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
4+
<circle cx="12" cy="12" r="5"></circle>
5+
<line x1="12" y1="1" x2="12" y2="3"></line>
6+
<line x1="12" y1="21" x2="12" y2="23"></line>
7+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
8+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
9+
<line x1="1" y1="12" x2="3" y2="12"></line>
10+
<line x1="21" y1="12" x2="23" y2="12"></line>
11+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
12+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
13+
</svg>
14+
15+
<svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
16+
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
17+
<path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"></path>
18+
</svg>

‎_layouts/post.html

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,21 @@
33
---
44

55
<main id="content" class="main-content" role="main">
6-
76
<div class="title-row post-title-row">
87
<h2 class="title post-title">{{ page.title }}</h2>
9-
108
</div>
119

1210
<div class="button-container">
13-
<a href="/" class="button left-button">
14-
Home
15-
</a>
16-
17-
11+
<a href="/" class="button left-button">Home</a>
1812

1913
<!-- PDF Button -->
20-
<!-- PDF Button -->
21-
<a href="#" id="downloadPdfButton" class="button pdf-button">
22-
PDF
23-
</a>
24-
14+
<a href="#" id="downloadPdfButton" class="button pdf-button">PDF</a>
2515

26-
<!-- Audio Button -->
2716
<!-- Audio Button -->
2817
{% if page.audio %}
29-
<!-- Audio Button -->
30-
<a href="#" id="playAudioButton" class="button audio-button">
31-
Audio
32-
</a>
18+
<a href="#" id="playAudioButton" class="button audio-button">Audio</a>
3319
{% endif %}
3420

35-
3621
<!-- Language Button Section -->
3722
{% assign current_lang = page.path | split: '-' | last | split: '.' | first %}
3823
{% if current_lang == "en" or current_lang == "zh" %}
@@ -99,13 +84,15 @@ <h2 class="title post-title">{{ page.title }}</h2>
9984
{% endif %}
10085
{% endif %}
10186

87+
<button id="themeTogglePost" class="icon-button" aria-label="Toggle Theme">
88+
{% include theme-icons.html %}
89+
</button>
90+
10291
<a href="/pages/donate-en" class="button right-button">Donate</a>
10392
</div>
104-
105-
106-
10793
</main>
10894

95+
<script src="/assets/js/dark-mode.js"></script>
10996
<script>
11097
var playAudioButton = document.getElementById('playAudioButton');
11198
if (playAudioButton) {
@@ -145,14 +132,4 @@ <h2 class="title post-title">{{ page.title }}</h2>
145132
window.open(pdfFile, '_blank');
146133
});
147134
}
148-
149-
document.addEventListener('DOMContentLoaded', function () {
150-
const rootElement = document.documentElement; // or document.body
151-
const savedTheme = localStorage.getItem('theme'); // e.g., "dark" or "light"
152-
153-
// If there's a saved theme and it's "dark," apply dark-mode class immediately
154-
if (savedTheme === 'dark') {
155-
rootElement.classList.add('dark-mode');
156-
}
157-
});
158135
</script>

‎assets/audios/2025-01-03-magnet-en.mp3

297 KB
Binary file not shown.

‎assets/audios/2025-01-03-magnet-zh.mp3

331 KB
Binary file not shown.

‎assets/audios/2025-01-03-status-en.mp3

657 KB
Binary file not shown.

‎assets/audios/2025-01-03-status-zh.mp3

584 KB
Binary file not shown.

‎assets/js/dark-mode.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
document.addEventListener('DOMContentLoaded', function () {
2+
const rootElement = document.documentElement;
3+
const themeToggleBtnHeader = document.getElementById('themeToggleHeader');
4+
const themeToggleBtnPost = document.getElementById('themeTogglePost');
5+
const sunIcon = document.getElementById('sunIcon');
6+
const moonIcon = document.getElementById('moonIcon');
7+
const avatarImg = document.getElementById('avatarImg');
8+
9+
const savedTheme = localStorage.getItem('theme');
10+
if (savedTheme === 'dark') {
11+
rootElement.classList.add('dark-mode');
12+
}
13+
14+
function updateIconsAndAvatar() {
15+
const isDark = rootElement.classList.contains('dark-mode');
16+
sunIcon.style.display = isDark ? 'inline-block' : 'none';
17+
moonIcon.style.display = isDark ? 'none' : 'inline-block';
18+
19+
// Check if avatarImg exists
20+
if (avatarImg) {
21+
avatarImg.src = isDark
22+
? '/assets/images/avatar_dark.png'
23+
: '/assets/images/avatar.jpg';
24+
} else {
25+
console.error('Avatar image element not found!');
26+
}
27+
}
28+
29+
updateIconsAndAvatar();
30+
31+
function toggleTheme() {
32+
rootElement.classList.toggle('dark-mode');
33+
if (rootElement.classList.contains('dark-mode')) {
34+
localStorage.setItem('theme', 'dark');
35+
} else {
36+
localStorage.setItem('theme', 'light');
37+
}
38+
updateIconsAndAvatar();
39+
}
40+
41+
if (themeToggleBtnHeader) {
42+
themeToggleBtnHeader.addEventListener('click', toggleTheme);
43+
}
44+
45+
if (themeToggleBtnPost) {
46+
themeToggleBtnPost.addEventListener('click', toggleTheme);
47+
}
48+
});

0 commit comments

Comments
 (0)