From cbcdff23017ee51e85c6e4ab3bee27bc064a0beb Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <17683872107czx> Date: Fri, 20 Oct 2023 15:47:18 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=87=E7=AB=A0=E7=9B=AE=E5=BD=95=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/assets/js/main.js | 115 +++++++++++++++++++++--- templates/assets/zhheo/zhheoblog.css | 56 ++++++------ templates/modules/common/rightside.html | 2 +- templates/modules/footer.html | 2 +- 4 files changed, 133 insertions(+), 42 deletions(-) diff --git a/templates/assets/js/main.js b/templates/assets/js/main.js index 29c6cf3b..07ee1b3f 100644 --- a/templates/assets/js/main.js +++ b/templates/assets/js/main.js @@ -159,7 +159,7 @@ document.addEventListener('DOMContentLoaded', function () { const cardToc = document.getElementById("card-toc"); cardToc?.remove(); const $mobileTocButton = document.getElementById("mobile-toc-button") - if($mobileTocButton){ + if ($mobileTocButton) { $('#mobile-toc-button').attr('style', 'display: none'); } } else { @@ -167,13 +167,102 @@ document.addEventListener('DOMContentLoaded', function () { tocSelector: '.toc-content', contentSelector: '.post-content', headingSelector: 'h1,h2,h3,h4,h5,h6', + listItemClass: 'toc-item', collapseDepth: 6, headingsOffset: 70, scrollSmooth: true, scrollSmoothOffset: -70, - tocScrollOffset: 50 + tocScrollOffset: 35, + }); + 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) => { + if (window.innerWidth < 900) { + $cardTocLayout.classList.remove("open"); + } + }) + + 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') + } + } + } } @@ -210,13 +299,19 @@ document.addEventListener('DOMContentLoaded', function () { : saveToLocal.set('aside-status', 'hide', 2) $htmlDom.toggle('hide-aside') }, - runMobileToc: () => { - const $cardToc = document.getElementById("card-toc") - if ($cardToc.classList.contains("open")) { - $cardToc.classList.remove("open"); - } else { - $cardToc.classList.add("open"); - } + runMobileToc: item => { + const tocEle = document.getElementById("card-toc"); + tocEle.style.transformOrigin = `right ${item.getBoundingClientRect().top + 17}px`; + tocEle.style.transition = "transform 0.3s ease-in-out"; + tocEle.classList.toggle("open"); + tocEle.addEventListener( + "transitionend", + () => { + tocEle.style.transition = ""; + tocEle.style.transformOrigin = ""; + }, + { once: true } + ); }, } @@ -230,7 +325,7 @@ document.addEventListener('DOMContentLoaded', function () { rightSideFn.showOrHideBtn() break case "mobile-toc-button": - rightSideFn.runMobileToc(); + rightSideFn.runMobileToc(this); break; case 'readmode': rightSideFn.switchReadMode() diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css index dc3b4a2e..a98f24de 100644 --- a/templates/assets/zhheo/zhheoblog.css +++ b/templates/assets/zhheo/zhheoblog.css @@ -2246,7 +2246,7 @@ blockquote footer cite::before { #aside-content #card-toc .toc-content { overflow-y: auto; - max-height: calc(100vh - 120px); + max-height: calc(100vh - 300px); } @media screen and (max-width: 900px) { @@ -2301,10 +2301,10 @@ blockquote footer cite::before { position: absolute; top: 0.6rem; right: 1.2rem; - color: rgb(169, 169, 169); + color: #a9a9a9; content: attr(progress-percentage); font-style: italic; - font-size: 1.2rem; + font-size: 1.2rem } #aside-content :only-child > .card-widget { @@ -2763,9 +2763,13 @@ blockquote footer cite::before { #page-header.nav-fixed #nav #site-name, #page-header.nav-fixed #nav #toggle-menu, #page-header.nav-fixed #nav a { - color: var(--heo-fontcolor); text-shadow: none; } +@media screen and (min-width: 900px) { + #page-header.nav-fixed #nav #site-name:hover { + color: var(--heo-white); + } +} #page-header.nav-visible #nav { transition: all 0.5s ease 0s; @@ -4856,7 +4860,7 @@ html { color: var(--heo-white); } -.nav-fixed #nav a { +.nav-fixed #nav a{ color: var(--heo-fontcolor); transition: 0.3s; } @@ -6125,6 +6129,7 @@ i.fab { .nav-fixed #nav a:hover { background: var(--heo-main); + color: var(--heo-white); transition: 0.3s; } @@ -6559,6 +6564,10 @@ a.console_switchbutton { transition: 0s; } +.nav-fixed #nav #site-name{ + color: var(--heo-fontcolor); +} + /* 导航栏名称样式 */ #nav #site-name { color: var(--heo-fontcolor); @@ -9595,10 +9604,6 @@ span.recent-post-top-text { right: 0; } - #rightside { - display: none - } - /* 背景 */ #web_bg { background: none !important; @@ -9693,16 +9698,16 @@ span.recent-post-top-text { /* 文章目录 */ #aside-content #card-toc .toc-content .toc-link.active { - line-height: 1.2; + line-height: 24px; border-radius: 12px; border-left-color: var(--heo-hovertext); background-color: var(--heo-card-bg); color: var(--heo-lighttext); - font-weight: bold; - font-size: 20px; + font-weight: 700; + font-size: 20px } -[data-theme=dark].toc .toc-item.active .toc-link .toc-text { +[data-theme=dark].toc-list .toc-item.active .toc-link{ color: var(--heo-white); } @@ -9712,27 +9717,30 @@ span.recent-post-top-text { } #aside-content #card-toc .toc-content .toc-link { - line-height: 1.2; + line-height: 24px; padding: 8px; - border-left: 0px solid transparent; + border-left: 0 solid transparent; border-radius: 12px; color: var(--heo-secondtext); cursor: default; + min-height: 40px; + display: flex; + align-items: center } -#aside-content #card-toc .toc-content .toc-link:not(.active) span { +#aside-content #card-toc .toc-content a.toc-link:not(.active) { opacity: 0.6; cursor: pointer; filter: blur(1px); transition: 0.3s; } -#aside-content #card-toc:hover .toc-content .toc-link:not(.active) span { +#aside-content #card-toc:hover .toc-content a.toc-link:not(.active) { filter: blur(0px); opacity: 1; } -#aside-content #card-toc .toc-content .toc-link:not(.active) span:hover { +#aside-content #card-toc .toc-content a:hover.toc-link:not(.active) { color: var(--heo-lighttext); } @@ -17438,18 +17446,6 @@ a#toPageButton.haveValue:hover { } } - -/* 文章目录样式 */ -a.toc-link { - color: currentColor; - height:0%; -} -/* 文章目录样式 */ -#aside-content #card-toc .toc-content .is-active-link { - font-weight: 700; - font-size: 20px; - color: var(--heo-lighttext); -} /* code样式 */ code:not([class]) { color: var(--heo-white); diff --git a/templates/modules/common/rightside.html b/templates/modules/common/rightside.html index 012793ae..778d34c0 100644 --- a/templates/modules/common/rightside.html +++ b/templates/modules/common/rightside.html @@ -11,7 +11,7 @@
- +