blob: 66936a4dbb4c2290c71bd16e69d728d9b16339da (
plain) (
blame)
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
{{/* 根据页面内容生成目录 */}}
{{ if and .TableOfContents (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") }}
<nav class="toc-nav">
{{ .TableOfContents }}
</nav>
<script>
// 为目录添加平滑滚动和当前位置高亮
document.addEventListener('DOMContentLoaded', function () {
const tocLinks = document.querySelectorAll('.toc-nav a');
const headings = Array.from(tocLinks).map(link => {
const id = link.getAttribute('href').replace('#', '');
return document.getElementById(id);
}).filter(h => h);
// 平滑滚动
tocLinks.forEach(link => {
link.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href').replace('#', '');
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
// 更新活动状态
tocLinks.forEach(l => l.classList.remove('active'));
this.classList.add('active');
}
});
});
// 滚动时更新当前位置
function updateActiveLink() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const windowHeight = window.innerHeight;
for (let i = headings.length - 1; i >= 0; i--) {
const heading = headings[i];
const rect = heading.getBoundingClientRect();
if (rect.top <= 100) {
// 移除所有活动状态
tocLinks.forEach(link => link.classList.remove('active'));
// 高亮当前标题
const activeLink = document.querySelector(`.toc-nav a[href="#${heading.id}"]`);
if (activeLink) {
activeLink.classList.add('active');
// 高亮所有父级标题
let currentLi = activeLink.closest('li');
while (currentLi) {
const parentLi = currentLi.parentElement.closest('li');
if (parentLi) {
const parentLink = parentLi.querySelector('a');
if (parentLink) {
parentLink.classList.add('active');
}
currentLi = parentLi;
} else {
break;
}
}
}
break;
}
}
}
// 节流函数
let ticking = false;
function throttleScroll() {
if (!ticking) {
requestAnimationFrame(function () {
updateActiveLink();
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', throttleScroll);
// 初始化时更新一次
updateActiveLink();
});
</script>
{{ end }}
|
