1<button id="reading-mode-btn" title="沉浸阅读">
2  <i class="fa-solid fa-book-open-reader"></i>
3</button>

 1/* 沉浸阅读主容器 */
 2.reading-mode .navbar,
 3.reading-mode .sidebar,
 4.reading-mode .footer,
 5.reading-mode .toolbar,
 6.reading-mode .comments-area,
 7.reading-mode .post-nav,
 8.reading-mode .related-posts,
 9.reading-mode .breadcrumb {
10  display: none !important;
11}
12
13/* 文章内容区域扩大并居中 */
14.reading-mode .post-content {
15  max-width: 720px;
16  margin: 40px auto;
17  padding: 0 20px;
18}
19
20/* 优化排版 */
21.reading-mode .post-content p {
22  font-size: 18px;
23  line-height: 1.9;
24  letter-spacing: 0.5px;
25  margin-bottom: 1.5em;
26}
27
28.reading-mode .post-content h2 {
29  font-size: 26px;
30  margin-top: 2em;
31}
32
33.reading-mode .post-content h3 {
34  font-size: 22px;
35  margin-top: 1.5em;
36}
37
38/* 半透明退出按钮 */
39.reading-mode .exit-reading-btn {
40  position: fixed;
41  top: 20px;
42  right: 20px;
43  z-index: 10000;
44  background: rgba(0, 0, 0, 0.5);
45  color: #fff;
46  border: none;
47  border-radius: 50%;
48  width: 40px;
49  height: 40px;
50  cursor: pointer;
51  opacity: 0;
52  transition: opacity 0.3s;
53}
54.reading-mode .exit-reading-btn:hover {
55  opacity: 1;
56}

 1const readingModeBtn = document.getElementById('reading-mode-btn');
 2let scrollPosition = 0;
 3let isReadingMode = false;
 4
 5readingModeBtn.addEventListener('click', toggleReadingMode);
 6
 7function toggleReadingMode() {
 8  if (!isReadingMode) {
 9    enterReadingMode();
10  } else {
11    exitReadingMode();
12  }
13}
14
15function enterReadingMode() {
16  scrollPosition = window.scrollY;
17  document.body.classList.add('reading-mode');
18  isReadingMode = true;
19
20  // 创建退出按钮
21  const exitBtn = document.createElement('button');
22  exitBtn.className = 'exit-reading-btn';
23  exitBtn.innerHTML = '<i class="fa-solid fa-times"></i>';
24  exitBtn.title = '退出阅读模式 (Esc)';
25  exitBtn.addEventListener('click', exitReadingMode);
26  document.body.appendChild(exitBtn);
27
28  // 滚动到文章标题
29  const title = document.querySelector('.post-title');
30  if (title) title.scrollIntoView({ behavior: 'smooth' });
31
32  localStorage.setItem('reading-mode-active', 'true');
33}
34
35function exitReadingMode() {
36  document.body.classList.remove('reading-mode');
37  isReadingMode = false;
38
39  // 移除退出按钮
40  const exitBtn = document.querySelector('.exit-reading-btn');
41  if (exitBtn) exitBtn.remove();
42
43  // 恢复滚动位置
44  window.scrollTo({ top: scrollPosition });
45
46  localStorage.removeItem('reading-mode-active');
47}
48
49// 键盘快捷键
50document.addEventListener('keydown', (e) => {
51  if (e.key === 'Escape' && isReadingMode) {
52    exitReadingMode();
53  }
54});
55
56// 页面加载时恢复状态
57if (localStorage.getItem('reading-mode-active') === 'true') {
58  enterReadingMode();
59}

1.navbar, .sidebar, .footer, .toolbar {
2  transition: opacity 0.3s ease, transform 0.3s ease;
3}
4.reading-mode .navbar,
5.reading-mode .sidebar {
6  opacity: 0;
7  transform: translateX(-20px);
8}

1[data-theme="dark"] .reading-mode .post-content {
2  background: transparent;
3}
4[data-theme="dark"] .reading-mode .post-content p {
5  color: #e0e0e0;
6}

1// 可在配置中添加字体列表
2const readingFonts = ['默认', '宋体', '楷体', '思源黑体'];
3
4function setReadingFont(fontFamily) {
5  document.querySelector('.post-content').style.fontFamily = fontFamily;
6}