feat: change heading style, add heading component

Author: Xecades

src/assets/css/markdown.styl

@@ -5,7 +5,6 @@
 dualr(--block-extend, -0.5rem, -1rem);
 
 schemer(--hr-color, lighten(black, 82%), lighten(black, 50%));
-schemer(--heading-color, lighten($text-color, 10%), darken($text-color-d, 7%));
 schemer(--bold-color, darken($theme-color, 20%), $theme-color);
 
 schemer(--checkbox-background, none, #cecece);
@@ -52,24 +51,7 @@ schemer(--quote-background-invert, 0, 1);
     .katex-display
         margin: 0.3em 2px;
 
-    /* 锚点 */
-    .header-anchor
-        opacity: 0;
-        font-family: "Georgia", "Times New Roman", serif;
-        color: lighten(black, 65%);
-        transition: color 0.1s, opacity 0.15s;
-        user-select: none;
-        padding: 0 7px;
-        display: inline-block;
-        margin: 0;
-
-        &:hover
-            color: darken($theme-color, 20%);
-
-    .heading:hover .header-anchor
-        opacity: 1;
-
-    /* header 标签（h1 被 ban 掉了） */
+    /* header 标签（h1被ban掉了） */
     h2
         font-size: 1.6rem;
         line-height: 2.6rem;
@@ -90,12 +72,6 @@ schemer(--quote-background-invert, 0, 1);
         font-size: 0.875rem;
         line-height: 1.25rem;
 
-    .heading
-        position: relative;
-        margin: 1.5rem 0;
-        color: var(--heading-color);
-        font-weight: 500;
-
     /* hr 标签 */
     hr
         margin: 3.2rem auto;

src/components/Content.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 /** @todo 图片缓存，不能每次都重新加载一遍 */
 
-import { computed, nextTick, onMounted, onUpdated } from "vue";
+import { computed, nextTick, onMounted } from "vue";
 import { RouterView, useRoute } from "vue-router";
 import { navigate } from "@/assets/ts/utils";
 
@@ -43,32 +43,13 @@ const show_comment: Ref<boolean> = computed(() => {
     return props.meta.attr.comment;
 });
 
-/**
- * Iterate through headings and register anchor click event.
- */
-const registerAnchor = () => {
-    const headings = document.querySelectorAll(".heading");
-
-    headings.forEach((heading) => {
-        const anchor = heading.querySelector(".header-anchor");
-        if (anchor) {
-            anchor.addEventListener("click", (e: Event) => {
-                e.preventDefault();
-                navigate(heading.id);
-            });
-        }
-    });
-};
-
 const scrollToAnchor = async () => {
     await nextTick();
     const hash = route.hash;
     navigate(hash.slice(1), false);
 };
 
 onMounted(scrollToAnchor);
-onMounted(registerAnchor);
-onUpdated(registerAnchor);
 </script>
 
 <template>

src/components/md/Heading.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { navigate } from "@/assets/ts/utils";
+
+const props = defineProps<{ level: number; id: number }>();
+
+const anchorClick = (e: Event) => {
+    e.preventDefault();
+    navigate(props.id.toString());
+};
+</script>
+
+<template>
+    <component :is="`h${level}`" :id="id" :tabindex="-1" class="heading">
+        <a :href="`#${id}`" class="anchor" @click="anchorClick">#</a>
+        <slot />
+    </component>
+</template>
+
+<style scoped lang="stylus">
+@import "../../assets/css/global.styl";
+
+$anchor-width = 1.65rem;
+
+.heading
+    scheme(--heading-color, lighten($text-color, 10%), darken($text-color-d, 7%));
+    dual(--heading-margin-left, (- $anchor-width), 0);
+
+    position: relative;
+    margin: 1.5rem 0;
+    color: var(--heading-color);
+    font-weight: 500;
+
+    > .anchor
+        font-family: $monospace;
+        color: lighten(black, 65%);
+        transition: color 0.1s;
+        user-select: none;
+        display: inline-block;
+        margin: 0;
+        width: $anchor-width;
+        margin-left: var(--heading-margin-left);
+        font-size: 1.05em;
+
+        &:hover
+            color: darken($theme-color, 20%);
+</style>