文章目录优化
This commit is contained in:
1152958806@qq.com
parent
f5e982fa41
commit
cbcdff2301
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<div id="rightside-config-show">
|
||||
<button id="rightside-config" type="button" title="设置"><i class="haofont hao-icon-gear"></i></button>
|
||||
<button th:if="${htmlType == 'post'}" class="close" id="mobile-toc-button" type="button" title="目录"><i class="haofont hao-icon-list-ul"></i></button>
|
||||
<a id="to_comment" href="javascript:heo.scrollTo('post-comment')" title="直达评论" ><i class="haofont hao-icon-comments"></i></a>
|
||||
<a id="to_comment" href="#post-comment" title="直达评论" ><i class="haofont hao-icon-comments"></i></a>
|
||||
<a th:if="${theme.config.comments.commentBarrageConfig.commentBarrageEnable}" id="switch-commentBarrage" href="javascript:heo.switchCommentBarrage();" rel="external nofollow noreferrer" title="开关弹幕" draggable="false" data-pjax-state="external"><i class="haofont hao-icon-danmu"></i></a>
|
||||
<button id="go-up" type="button" title="回到顶部"><i class="haofont hao-icon-arrow-up"></i></button>
|
||||
<a th:if="${htmlType == 'post' || htmlType == 'page'}"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<footer id="footer" th:fragment="footer">
|
||||
|
||||
<div id="heo-footer-bar" th:if="${theme.config.footer.footer_bar.footer_bar_enable}">
|
||||
<div class="footer-logo">[[${theme.config.footer.footer_bar.logo}]]</div>
|
||||
<div class="footer-logo"><th:block th:utext="${theme.config.footer.footer_bar.logo}"></th:block></div>
|
||||
<div class="footer-bar-description">[[${theme.config.footer.footer_bar.description}]]</div>
|
||||
<a class="footer-bar-link" href="/" data-pjax-state="">了解更多</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue