feat: 文章支持锚点定为 #309

Mereithhh · Jun 26, 2023 · 0ab9fdb · 0ab9fdb
1 parent 760fce9
commit 0ab9fdb
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/packages/website/components/Markdown/heading.tsx b/packages/website/components/Markdown/heading.tsx
@@ -10,17 +10,33 @@ const headings = [
   'h5',
   'h6'
 ]
+
+const onClickHeading = (e: any) => {
+  const id = e.target.getAttribute('data-id');
+  // 改一下 hash
+  window.location.hash = `#${id}`;
+}
+
 const headingPlugin = () => (tree) => {
   visit(tree, (node) => {
     if (node.type === "element" && headings.includes(node.tagName)) {
       const title = node.children[0]?.value;
       node.properties['data-id'] = title;
+      node.properties['id'] = title;
+      node.properties['class'] = 'markdown-heading cursor-pointer';
     }
   });
 }
 
 export function Heading(): BytemdPlugin {
   return {
     rehype: (processor) => processor.use(headingPlugin),
+    viewerEffect: ({markdownBody}) => {
+      const headings = markdownBody.querySelectorAll('.markdown-heading');
+      headings.forEach((heading) => {
+        heading.removeEventListener('click', onClickHeading);
+        heading.addEventListener('click', onClickHeading);
+      });
+    }
   };
 }
diff --git a/packages/website/components/MarkdownTocBar/core.tsx b/packages/website/components/MarkdownTocBar/core.tsx
@@ -9,6 +9,12 @@ export default function (props: {
 }) {
   const { items } = props;
   const [currIndex, setCurrIndex] = useState(-1);
+
+  const updateHash = (hash: string) => {
+    if (hash) {
+      window.history.replaceState(null, "", `#${hash}`);
+    }
+  }
   const handleScroll = throttle((ev: Event) => {
     ev.stopPropagation();
     ev.preventDefault();
@@ -38,9 +44,10 @@ export default function (props: {
       }
     }
     setCurrIndex(top.index);
-    // updateHash(top.text);
+    updateHash(top.text);
   }, 100);
 
+
   useEffect(() => {
     updateTocScrollbar();
   }, [currIndex, props.headingOffset]);
@@ -91,6 +98,7 @@ export default function (props: {
               to = 0;
             }
             scrollTo(window, { top: to, easing: "ease-in-out", duration: 800 });
+
           }
         }}
       >

diff --git a/packages/website/components/PostCard/title.tsx b/packages/website/components/PostCard/title.tsx
@@ -25,7 +25,7 @@ export function Title(props: {
       {props.type != "about" ? (
         <Link href={`/post/${props.id}`} target={getTarget(newTab)} style={{width:"90%"}} title={props.title}>
           <div
-            className={`text-lg block w-full font-medium overflow-hidden text-ellipsis whitespace-nowrap px-5  text-center mb-2 mt-2 dark:text-dark text-gray-700 ${
+            className={`text-lg block font-medium overflow-hidden text-ellipsis whitespace-nowrap px-5  text-center mb-2 mt-2 dark:text-dark text-gray-700 ${
               showEditButton ? "ml-8" : ""
             } md:text-${props.type == "overview" ? "xl" : "2xl"} ua ua-link`}
           >