diff --git a/app/blog/[month]/[slug]/layout.jsx b/app/blog/[month]/[slug]/layout.jsx index 1db16f26..85fcff1f 100644 --- a/app/blog/[month]/[slug]/layout.jsx +++ b/app/blog/[month]/[slug]/layout.jsx @@ -31,7 +31,46 @@ export default function BlogLayout({ children }) { button.removeEventListener('click', handleClick); }); }; - }, []) + }, []); + + // toc定位 + useEffect(()=>{ + // 这是所有标题从上到下 + var hs = []; + document.querySelectorAll('.content-wrapper>h1>a, .content-wrapper>h2>a, .content-wrapper>h3>a, .content-wrapper>h4>a') + .forEach(n=>hs.push(n)); + + // 这是所有的toc标题 + var ts = [] + document.querySelectorAll('.toc-wrapper li>a').forEach(a=>ts.push(a)); + + const handle = () => { + let activeIndex = 0; + for (var i=0; i= 20) { + break; + } + if (y < 20) { + activeIndex = i; + } + } + let href = hs[activeIndex]? hs[activeIndex].href : null; + for (var i=0; idocument.removeEventListener('scroll', handle) + }, []); + return <> {children} diff --git a/app/components/NavbarMenu.jsx b/app/components/NavbarMenu.jsx index 12616766..7ba3f107 100644 --- a/app/components/NavbarMenu.jsx +++ b/app/components/NavbarMenu.jsx @@ -116,7 +116,7 @@ export default function Navbar({ className }) { const [active, setActive] = React.useState(null); return (
diff --git a/app/globals.css b/app/globals.css index 7baa21c8..314a4584 100644 --- a/app/globals.css +++ b/app/globals.css @@ -197,10 +197,28 @@ nav>ol.toc-level-1 { border: 1px solid; box-shadow: var(--w-box-shadow); } + .toc-wrapper .toc a { font-weight: 700; + position: relative; color: var(--w-indigo-light); } +.toc-wrapper .toc a.active{ + color: var(--w-red-light); + font-size: 1.2rem; +} + +.toc-wrapper .toc a.active::before { + content: ''; + position: absolute; + top: 50%; + left: -1rem; + transform: translateY(-50%); + border-width: 10px; + border-style: solid; + border-color: transparent transparent transparent var(--w-red-light); + position: absolute; +} .markdown-body .ap-player pre { margin: 0; diff --git a/app/layout.js b/app/layout.js index f3ab4d7b..f67a7e5a 100644 --- a/app/layout.js +++ b/app/layout.js @@ -25,8 +25,8 @@ export default function RootLayout({ children }) { -
- +
+
{children}