diff options
| author | yingyu5658 <i@yingyu5658.me> | 2025-12-13 08:33:08 +0800 |
|---|---|---|
| committer | yingyu5658 <i@yingyu5658.me> | 2025-12-13 08:33:08 +0800 |
| commit | 1e5f8eb33bc41cb59faf059e83701152785cabea (patch) | |
| tree | 45867273ac2178285be840764f7962d2b55556c6 /layouts/partials/toc.html | |
| download | blog-1e5f8eb33bc41cb59faf059e83701152785cabea.tar.gz blog-1e5f8eb33bc41cb59faf059e83701152785cabea.zip | |
Initial commit
Diffstat (limited to 'layouts/partials/toc.html')
| -rw-r--r-- | layouts/partials/toc.html | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html new file mode 100644 index 0000000..66936a4 --- /dev/null +++ b/layouts/partials/toc.html @@ -0,0 +1,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 }}
\ No newline at end of file |
