1
2
<!-- 阅读进度条 -->
<script src="/js/reading-progress.js"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 阅读进度条样式 - 强制优先级 */
.reading-progress-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 6px !important; /* 增加高度 */
    background-color: #0085a1 !important; /* 醒目的粉色 */
    width: 0% !important;
    z-index: 99999 !important; /* 超高z-index */
    transition: width 0.2s ease !important;
    box-shadow: 0 0 8px rgba(0, 133, 161, 0.8) !important; /* 增加发光效果 */
    opacity: 0.9 !important;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// 阅读进度条功能
document.addEventListener('DOMContentLoaded', function() {
    console.log("DOM加载完成，初始化进度条");
  
    // 创建进度条元素（总是创建新的，确保样式正确）
    var oldBar = document.getElementById('reading-progress-bar');
    if (oldBar) {
        oldBar.parentNode.removeChild(oldBar); // 移除旧元素
    }
  
    var progressBar = document.createElement('div');
    progressBar.id = 'reading-progress-bar';
    progressBar.className = 'reading-progress-bar';
    document.body.insertBefore(progressBar, document.body.firstChild);
  
    console.log("进度条元素已创建:", progressBar);
  
    // 强制设置初始样式
    progressBar.style.position = "fixed";
    progressBar.style.top = "0";
    progressBar.style.left = "0";
    progressBar.style.height = "6px";
    progressBar.style.backgroundColor = "#0085a1";
    progressBar.style.width = "0%";
    progressBar.style.zIndex = "99999";
    progressBar.style.transition = "width 0.2s ease";
    progressBar.style.boxShadow = "0 0 8px rgba(0, 133, 161, 0.8)";
  
    // 更新进度条函数
    function updateProgressBar() {
        var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        var scrolled = (winScroll / height) * 100;
      
        // 输出调试信息
        // console.log("滚动位置:", winScroll, "总高度:", height, "进度:", scrolled.toFixed(1) + "%");
        progressBar.style.width = scrolled + "%";
    }
  
    // 添加事件监听器
    window.addEventListener('scroll', updateProgressBar);
    window.addEventListener('resize', updateProgressBar);
  
    // 初始化进度条
    console.log("初始化进度条状态");
    updateProgressBar();
  
    // // 测试可见性
    // console.log("测试进度条可见性");
    // var testWidth = 20;
    // var testInterval = setInterval(function() {
    //     progressBar.style.width = testWidth + "%";
    //     testWidth += 20;
      
    //     if (testWidth > 100) {
    //         clearInterval(testInterval);
    //         setTimeout(function() {
    //             progressBar.style.width = "0%";
    //             updateProgressBar();
    //         }, 1000);
    //     }
    // }, 300);
}
);

1
2
<!-- 阅读进度条 -->
    <div class="reading-progress-bar" id="reading-progress-bar"></div>

1
2
<!-- 阅读时间估计 -->
<span class="meta reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 阅读时间约 36 分钟</span>

1
2
3
4
5
6
7
8
9
10
11
12
/* 阅读时间样式 */
.reading-time {
  margin-left: 10px;
}

@media only screen and (max-width: 767px) {
  .reading-time {
      display: block;
      margin-left: 0;
      margin-top: 5px;
  }
}

1
2
3
4
5
6
<!-- 返回顶部按钮 -->
                <div id="back-top" class="back-to-top">
                    <a href="javascript:void(0);" title="返回顶部">
                        <i class="fa fa-arrow-up"></i>
                    </a>
                </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  left: 20px;
  bottom: 50%;
  transform: translateY(50%);
  z-index: 9999; /* 确保按钮在最上层 */
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  opacity: 0.7;
  transition: all 0.3s ease;
  display: block;
}

.back-to-top a {
  display: flex;
  width: 100%;
  height: 100%;
  color: #fff;
  align-items: center;
  justify-content: center;
}

.back-to-top:hover {
  opacity: 1;
  transform: translateY(50%) scale(1.1);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* 移动设备适配 */
@media (max-width: 768px) {
  .back-to-top {
      left: 10px;
      width: 35px;
      height: 35px;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 返回顶部按钮功能
(function() {
    var backTop = document.getElementById('back-top');
  
    if (!backTop) return;
  
    // 点击返回顶部
    backTop.addEventListener('click', function(e) {
        e.preventDefault();
      
        // 平滑滚动到顶部
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
  
    // 根据滚动位置调整按钮透明度
    window.addEventListener('scroll', function() {
        if (window.pageYOffset > 300) {
            backTop.style.opacity = "1.0";
        } else {
            backTop.style.opacity = "0.4";  // 靠近顶部时更透明
        }
    });
})();

1
2
3
4
5
6
7
8
9
10
11
<!-- 在搜索图标之前添加深色模式切换按钮 -->
<li class="darkmode-toggle">
  <a href="javascript:void(0)" id="darkmode-toggle" title="切换深色/浅色模式">
    <i class="fa fa-moon-o" id="darkmode-icon"></i>
  </a>
</li>
<li class="search-icon">
  <a href="javascript:void(0)">
    <i class="fa fa-search"></i>
  </a>
</li>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// 深色模式实现脚本
(function() {
    // DOM 元素加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 获取切换按钮和图标元素
        const darkModeToggle = document.getElementById('darkmode-toggle');
        const darkModeIcon = document.getElementById('darkmode-icon');
      
        // 检查本地存储中的主题设置
        const savedTheme = localStorage.getItem('theme');
        // 检测系统偏好
        const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
      
        // 初始化主题设置
        let currentTheme;
      
        // 如果有保存的设置，使用保存的设置；否则根据系统偏好设置
        if (savedTheme) {
            currentTheme = savedTheme;
        } else {
            currentTheme = prefersDarkMode ? 'dark' : 'light';
        }
      
        // 应用当前主题
        applyTheme(currentTheme);
      
        // 更新按钮图标状态
        updateDarkModeIcon(currentTheme);
      
        // 添加点击事件
        if (darkModeToggle) {
            darkModeToggle.addEventListener('click', function() {
                // 切换主题
                const newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
              
                // 保存到本地存储
                localStorage.setItem('theme', newTheme);
              
                // 应用新主题
                applyTheme(newTheme);
              
                // 更新按钮图标
                updateDarkModeIcon(newTheme);
            });
        }
      
        // 监听系统主题变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
            // 只有没有手动设置过的才自动跟随系统
            if (!localStorage.getItem('theme')) {
                const newTheme = e.matches ? 'dark' : 'light';
                applyTheme(newTheme);
                updateDarkModeIcon(newTheme);
            }
        });
      
        // 应用主题函数
        function applyTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
        }
      
        // 更新图标函数
        function updateDarkModeIcon(theme) {
            if (!darkModeIcon) return;
          
            if (theme === 'dark') {
                darkModeIcon.classList.remove('fa-moon-o');
                darkModeIcon.classList.add('fa-sun-o');
            } else {
                darkModeIcon.classList.remove('fa-sun-o');
                darkModeIcon.classList.add('fa-moon-o');
            }
        }
    });
})();

1
2
3
<link rel="stylesheet" href="/css/dark-mode.css">

<script src="/js/dark-mode.js"></script>