优化文章目录

templates/assets/js/main.js

@@ -168,38 +168,16 @@ document.addEventListener('DOMContentLoaded', function () {
                 contentSelector: '.post-content',
                 headingSelector: 'h1,h2,h3,h4,h5,h6',
                 listItemClass: 'toc-item',
-                collapseDepth: 6,
+                activeLinkClass: 'active',
-                headingsOffset: 70,
+                activeListItemClass: 'active',
+                headingsOffset: -400,
                 scrollSmooth: true,
                 scrollSmoothOffset: -70,
-                tocScrollOffset: 35,
+                tocScrollOffset: 50,
-
             });
 
             const $cardTocLayout = document.getElementById('card-toc')
             const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
-            const $tocLink = $cardToc.querySelectorAll('.toc-link')
-            const $article = document.getElementById('article-container')
-
-            window.tocScrollFn = function () {
-                return btf.throttle(function () {
-                    const currentTop = window.scrollY || document.documentElement.scrollTop
-                    scrollPercent(currentTop)
-                    findHeadPosition(currentTop)
-                }, 100)()
-            }
-            window.addEventListener('scroll', tocScrollFn)
-
-            const scrollPercent = function (currentTop) {
-                const docHeight = $article.clientHeight
-                const winHeight = document.documentElement.clientHeight
-                const headerHeight = $article.offsetTop
-                const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
-                const scrollPercent = (currentTop - headerHeight) / (contentMath)
-                const scrollPercentRounded = Math.round(scrollPercent * 100)
-                const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
-                $cardToc.setAttribute('progress-percentage', percentage)
-            }
 
             // toc元素點擊
             $cardToc.addEventListener('click', (ele) => {
@@ -208,64 +186,10 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
             })
 
-            const autoScrollToc = function (item) {
-                const activePosition = item.getBoundingClientRect().top
-                const sidebarScrollTop = $cardToc.scrollTop
-                if (activePosition > (document.documentElement.clientHeight - 100)) {
-                    $cardToc.scrollTop = sidebarScrollTop + 150
-                }
-                if (activePosition < 100) {
-                    $cardToc.scrollTop = sidebarScrollTop - 150
-                }
-            }
-
-            // find head position & add active class
-            const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
-            let detectItem = ''
-            const findHeadPosition = function (top) {
-                if ($tocLink.length === 0 || top === 0) {
-                    return false
-                }
-
-                let currentId = ''
-                let currentIndex = ''
-
-                list.forEach(function (ele, index) {
-                    if (top > btf.getEleTop(ele) - 80) {
-                        currentId = '#' + encodeURI(ele.getAttribute('id'))
-                        currentIndex = index
-                    }
-                })
-
-                if (detectItem === currentIndex) return
-
-
-                if (currentId === '') {
-                    $cardToc.querySelectorAll('.active').forEach(i => { i.classList.remove('active') })
-                    detectItem = currentIndex
-                    return
-                }
-
-                detectItem = currentIndex
-
-                $cardToc.querySelectorAll('.active').forEach(item => { item.classList.remove('active') })
-                const currentActive = $tocLink[currentIndex]
-                currentActive.classList.add('active')
-
-                setTimeout(() => {
-                    autoScrollToc(currentActive)
-                }, 0)
-
-                let parent = currentActive.parentNode
-
-                for (; !parent.matches('.toc-list'); parent = parent.parentNode) {
-                    if (parent.matches('li')) parent.classList.add('active')
-                }
-            }
-
         }
     }
 
+
     /**
      * Rightside
      */

templates/assets/zhheo/zhheoblog.css

@@ -2246,6 +2246,7 @@ blockquote footer cite::before {
 /*}*/
 
 #aside-content #card-toc .toc-content {
+    position: relative;
     overflow-y: auto;
     max-height: calc(100vh - 300px);
 }
@@ -9705,7 +9706,8 @@ span.recent-post-top-text {
     background-color: var(--heo-card-bg);
     color: var(--heo-lighttext);
     font-weight: 700;
-    font-size: 20px
+    font-size: 20px;
+    position: relative;
 }
 
 [data-theme=dark].toc-list .toc-item.active .toc-link{
@@ -9726,7 +9728,8 @@ span.recent-post-top-text {
     cursor: default;
     min-height: 40px;
     display: flex;
-    align-items: center
+    align-items: center;
+
 }
 
 #aside-content #card-toc .toc-content a.toc-link:not(.active)  {
@@ -10182,6 +10185,7 @@ div#author-info__sayhi:hover {
 #aside-content .item-headline + div,
 #aside-content .item-headline + ul {
     padding: 0;
+    -webkit-user-select: none;
 }
 
 @media screen and (min-width: 1300px) {