opt ux

sunwu51 · Jun 18, 2024 · 39c6dfa · 39c6dfa
1 parent 7525bce
commit 39c6dfa
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 4 deletions.
diff --git 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<hs.length; i++) {
+          let {y} = hs[i].getBoundingClientRect();
+          if (y >= 20) {
+            break;
+          }
+          if (y < 20) {
+            activeIndex = i;
+          }
+        }
+        let href = hs[activeIndex]? hs[activeIndex].href : null;
+        for (var i=0; i<ts.length; i++) {
+          if (href == ts[i].href) {
+            if (!ts[i].classList.contains('active')) {
+              ts[i].classList.add('active');
+            }
+          } else {
+            ts[i].classList.remove('active');
+          }
+        }
+      }
+      handle();
+      document.addEventListener('scroll', handle)
+      return ()=>document.removeEventListener('scroll', handle)
+    }, []);
+
     return <>
         {children}
     </>

diff --git 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 (
         <div
-            className={cn("fixed inset-x-0 max-w-[25rem] mx-auto z-50", className)}
+            className={cn("inset-x-0 max-w-[25rem] mx-auto z-50", className)}
         >
             <Menu setActive={setActive}>
                 <Link href="/" className="text-white flex items-center">

diff --git 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
@@ -25,8 +25,8 @@ export default function RootLayout({ children }) {
         <link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet" />
       </head>
       <body className={inter.className + '  container mx-[auto] max-w-[80%]'}>
-        <div className="relative w-full flex items-center justify-center bg-yellow-400">
-          <NavBar className="top-0" />
+        <div className="sticky w-fit flex items-center justify-center z-10 top-[-45px] mx-auto hover:top-0 transition-all ease-in-out">
+          <NavBar className="w-full" />
         </div>
         <div className="markdown-body mt-20">{children}</div>
       </body>