1{{/* 阅读进度条（仅文章页显示） */}}
2{{ if and .IsPage (ne .Kind "home") (ne .Layout "archives") }}
3<div id="reading-progress" class="reading-progress-bar">
4  <div class="reading-progress-fill"></div>
5</div>
6{{ end }}

 1.reading-progress-bar {
 2  position: fixed;
 3  top: 0;
 4  left: 0;
 5  width: 100%;
 6  height: 3px;
 7  z-index: 9999;
 8  background: transparent;
 9  pointer-events: none;
10}
11
12.reading-progress-bar .reading-progress-fill {
13  height: 100%;
14  width: 0%;
15  background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
16  border-radius: 0 2px 2px 0;
17  transition: width 0.15s ease-out;
18  box-shadow: 0 0 6px rgba(59,130,246,0.4);
19}
20
21[data-theme="dark"] .reading-progress-bar .reading-progress-fill {
22  box-shadow: 0 0 8px rgba(96,165,250,0.5);
23}

 1var ReadingProgress = (function() {
 2  var bar, fill, article;
 3
 4  function update() {
 5    if (!article || !fill) return;
 6    var articleRect = article.getBoundingClientRect();
 7    var articleTop = articleRect.top + window.scrollY;
 8    var articleHeight = article.offsetHeight;
 9    var windowHeight = window.innerHeight;
10    // 文章顶部进入视口 30% 后开始计算进度
11    var scrolled = Math.max(0, window.scrollY - articleTop + windowHeight * 0.3);
12    var total = articleHeight - windowHeight * 0.3;
13    var progress = Math.min(100, Math.max(0, (scrolled / total) * 100));
14    fill.style.width = progress.toFixed(2) + '%';
15  }
16
17  function init() {
18    bar = document.getElementById('reading-progress');
19    fill = document.querySelector('.reading-progress-fill');
20    if (!bar || !fill) return;
21
22    article = document.querySelector('.single-post');
23    if (!article) return;
24
25    window.addEventListener('scroll', function() { update(); }, { passive: true });
26    update();
27  }
28
29  return { init: init };
30})();

1进度 = (已滚过文章内容 / 文章总可读内容) × 100%
2
3其中：
4  已滚过 = 当前滚动位置 - 文章顶部位置 + 视口高度的30%
5  总可读   = 文章总高度 - 视口高度的30%
6  
7"视口高度30%"的偏移量让进度条在文章头部刚进入阅读区时为 0%，
8文章尾部离开阅读区前达到 100%，体验更自然。

 1<div class="rightside" id="rightside">
 2  {{ if .Site.Params.backToTop.enable }}
 3  <button class="rightside-btn" id="back-to-top" aria-label="返回顶部">
 4    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
 5         viewBox="0 0 24 24" fill="none" stroke="currentColor"
 6         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 7      <line x1="12" y1="19" x2="12" y2="5"></line>
 8      <polyline points="5 12 12 5 19 12"></polyline>
 9    </svg>
10  </button>
11  {{ end }}
12</div>

 1.back-to-top {
 2  position: fixed;
 3  bottom: 32px;
 4  right: 32px;
 5  width: 48px;
 6  height: 48px;
 7  background: var(--accent-color, #3b82f6);
 8  color: white;
 9  border: none;
10  border-radius: 50%;
11  cursor: pointer;
12  display: flex;
13  align-items: center;
14  justify-content: center;
15  box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1);
16  opacity: 0;
17  visibility: hidden;
18  transform: translateY(10px) scale(0.9);  /* 初始状态：下移+缩小 */
19  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);  /* 弹性曲线 */
20  z-index: 100;
21}
22
23.back-to-top.visible {
24  opacity: 1;
25  visibility: visible;
26  transform: translateY(0) scale(1);  /* 显示状态：归位+正常大小 */
27}
28
29.back-to-top:hover {
30  background: var(--accent-hover, #2563eb);
31  transform: translateY(-4px) scale(1.05);  /* 悬停上浮+微放大 */
32  box-shadow: 0 8px 24px rgba(59,130,246,0.35), 0 4px 8px rgba(0,0,0,0.1);
33}
34
35.back-to-top:active {
36  transform: translateY(-2px) scale(0.98);  /* 按压反馈 */
37}

 1var BackToTop = (function() {
 2  var btn;
 3
 4  function init() {
 5    btn = document.getElementById('back-to-top');
 6    if (!btn) return;
 7
 8    window.addEventListener('scroll', function() {
 9      btn.classList.toggle('visible', window.scrollY > 300);
10    });
11
12    btn.addEventListener('click', function() {
13      window.scrollTo({ top: 0, behavior: 'smooth' });
14    });
15  }
16
17  return { init: init };
18})();

 1document.addEventListener('DOMContentLoaded', function() {
 2  var coreModules = [
 3    // ... 其他模块
 4    { name: 'BackToTop',        fn: BackToTop.init },
 5    // ...
 6    { name: 'ReadingProgress',  fn: ReadingProgress.init }
 7  ];
 8
 9  for (var i = 0; i < coreModules.length; i++) {
10    try {
11      coreModules[i].fn();
12    } catch(e) {
13      console.warn('[Lumin] ❌ 模块 ' + coreModules[i].name + ' 初始化失败:', e.message || e);
14    }
15  }
16});

 1baseof.html
 2├── 渲染 #reading-progress DOM（条件：文章页）
 3│
 4├── 加载 main.js（包含全部 JS 模块）
 5│   ├── ReadingProgress.init()
 6│   │   ├── 查找 #reading-progress + .reading-progress-fill
 7│   │   ├── 查找 .single-post 容器
 8│   │   └── 绑定 scroll → update()
 9│   │
10│   ├── BackToTop.init()          ← 当前生效 ✅
11│   │   ├── 查找 #back-to-top
12│   │   └── 绑定 scroll + click
13│   │
14│   └── RightSide.init()           ← 冗余副本 ⚠️
15│       ├── 也查找 #back-to-top     ← 同一元素！
16│       └── 也绑定 scroll + click   ← 重复监听！
17│
18└── partial toolbar.html
19    └── 渲染 #back-to-top 按钮（条件：backToTop.enable）

1if (typeof window.initReadingProgress === 'function') {
2  window.initReadingProgress();
3}

 1var BackToTop = (function() {
 2  var btn, ring;
 3
 4  function update() {
 5    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 6    var docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
 7    var pct = docHeight > 0 ? scrollTop / docHeight : 0;
 8
 9    // 按钮显隐
10    btn.classList.toggle('visible', scrollTop > 300);
11
12    // 圆环进度（可选）
13    if (ring) {
14      var c = 2 * Math.PI * 18;
15      ring.style.strokeDashoffset = c - (pct * c);
16    }
17  }
18
19  function init() {
20    btn = document.getElementById('back-to-top');
21    if (!btn) return;
22
23    ring = btn.querySelector('.btt-progress');
24
25    var ticking = false;
26    window.addEventListener('scroll', function() {
27      if (!ticking) {
28        requestAnimationFrame(update);
29        ticking = true;
30        ticking = false;  // 注意：实际应在回调内重置
31      }
32    }, { passive: true });
33
34    btn.addEventListener('click', function(e) {
35      e.preventDefault();
36      window.scrollTo({ top: 0, behavior: 'smooth' });
37    });
38
39    update();
40  }
41
42  return { init: init };
43})();
44
45// 暴露给外部调用（如 encrypt.js 解密后重新初始化）
46window.initReadingProgress = ReadingProgress.init;