feat: improve title anchor

Author: MC-XiaoHei

docs/.vitepress/config.mts

@@ -11,6 +11,8 @@ import {mathjaxContainerPreprocessor} from "./theme/mathjax/mathjaxContainerPrep
 import {withMermaid} from "vitepress-plugin-mermaid";
 import {mermaidSpaceConverter} from "./theme/mermaid/mermaidSpaceConverter";
 import {injectUpgradingPartsPlugin} from "./theme/upgrading/injectUpgradingPartsPlugin";
+import {titleAnchorPreprocessor} from "./theme/anchor/titleAnchorPreprocessor";
+import slugifyTitle from "./theme/anchor/slugify";
 
 const defaultLocale: string = 'en';
 const supportLocales: string[] = [
@@ -76,6 +78,11 @@ const vitepressOptions: UserConfig = {
         ]
     },
     markdown: {
+        anchor: {
+            slugify(str: string): string {
+                return slugifyTitle(str);
+            }
+        },
         container: {
             infoLabel: '**Developer\'s Note:**',
         },
@@ -112,6 +119,7 @@ const vitepressOptions: UserConfig = {
             injectUpgradingPartsPlugin(md);
             mermaidSpaceConverter(md);
             exampleAutoAnchorPreprocessor(md);
+            titleAnchorPreprocessor(md);
             mathjaxContainerPreprocessor(md);
         }
     }

docs/.vitepress/theme/anchor/TitleAnchor.vue

@@ -0,0 +1,26 @@
+<script setup>
+
+const props = defineProps({
+    anchor: String
+})
+
+function onClick() {
+    const element = document.getElementById(props.anchor)
+    if(!element) {
+        return;
+    }
+    const y = element.getBoundingClientRect().top + window.scrollY - 109;
+    window.scrollTo({ top: y, behavior: 'smooth' });
+    history.pushState(null, '', `#${props.anchor}`);
+}
+</script>
+
+<template>
+    <div @click="onClick">
+        <slot/>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

docs/.vitepress/theme/anchor/exampleAutoAnchorPreprocessor.ts

@@ -1,25 +1,31 @@
 import MarkdownIt from "markdown-it";
-import slugify from "@sindresorhus/slugify";
+import slugifyTitle from "./slugify";
 
 export const exampleAutoAnchorPreprocessor = (md: MarkdownIt) => {
     md.core.ruler.before('normalize', 'example-auto-anchor', (state) => {
+        if (!state.src.includes("tip Example")) {
+            return;
+        }
         const lines = state.src.split("\n");
         const processedLines = lines.map((line) => {
             if (line.startsWith(":::") && (line.includes(":::tip Example") || line.includes("::: tip Example"))) {
                 const title = line.split(/tip (.+)/)[1]
-                const processedTitle = slugify(title
-                    .replace(" – ", "-")
-                    .replace(":", "-")
-                    .replace("\"", "")
-                    .replace("'", "")
-                    .replace("<", "")
-                    .replace(">", "")
-                );
+                const processedTitle = slugifyTitle(title);
                 return `
-<div style="height: 0; color: rgba(0,0,0,0%);position: relative;top: 32px">
-    <h3 id="${processedTitle}">${title}
+<div style="height: 0;
+ color: rgba(0,0,0,0%);
+ position: relative;
+ top: 32px;">
+ <TitleAnchor anchor="${processedTitle}">
+    <h3 id="${processedTitle}" style="
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    ">${title}
         <a class="header-anchor" href="#${processedTitle}">​</a>
-    </h3>                
+    </h3>          
+ </TitleAnchor>      
 </div>
 
 ${line}

docs/.vitepress/theme/anchor/slugify.ts

@@ -0,0 +1,12 @@
+import slugify from "@sindresorhus/slugify";
+
+export default function slugifyTitle(title: string): string {
+    return slugify(title
+        .replace(" – ", "-")
+        .replace(":", "-")
+        .replace("\"", "")
+        .replace("'", "")
+        .replace("<", "")
+        .replace(">", "")
+    );
+}

docs/.vitepress/theme/anchor/titleAnchorPreprocessor.ts

@@ -0,0 +1,26 @@
+import MarkdownIt from "markdown-it";
+import slugifyTitle from "./slugify";
+
+export const titleAnchorPreprocessor = (md: MarkdownIt) => {
+    md.core.ruler.before('normalize', 'title-anchor', (state) => {
+        const lines = state.src.split("\n");
+        const processedLines = lines.map((line) => {
+            if (line.startsWith("#")) {
+                const title = line.replace(new RegExp("#", "g"), "");
+                const processedTitle = slugifyTitle(title);
+                return `
+
+<TitleAnchor anchor="${processedTitle}">
+
+${line}
+
+</TitleAnchor>
+
+`;
+            } else {
+                return line;
+            }
+        });
+        state.src = processedLines.join("\n");
+    });
+}

docs/.vitepress/theme/index.ts

@@ -1,18 +1,19 @@
 import type {Theme} from 'vitepress'
+import {useRoute} from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import PluginTabs from './tabs/PluginTabs.vue'
 import PluginTabsTab from './tabs/PluginTabsTab.vue'
 import {provideTabsSharedState} from './tabs/useTabsSelectedState'
 import PreferenceSwitch from './prefer/PreferenceSwitch.vue';
 import mediumZoom from "medium-zoom";
-import {onMounted, watch, nextTick, h} from 'vue'
-import {useRoute} from 'vitepress'
+import {h, nextTick, onMounted, watch} from 'vue'
 import AuthorsComponent from "./author/PageAuthors.vue";
 import {NolebaseEnhancedReadabilitiesMenu, NolebaseEnhancedReadabilitiesScreenMenu} from "@nolebase/vitepress-plugin-enhanced-readabilities";
 
 import './style/global.css'
 import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
 import VersionSwitcher from "./versioning/VersionSwitcher.vue";
+import TitleAnchor from "./anchor/TitleAnchor.vue";
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -22,6 +23,7 @@ export default {
         app.component('VersionSwitcher', VersionSwitcher)
         app.component('PluginTabs', PluginTabs)
         app.component('PluginTabsTab', PluginTabsTab)
+        app.component('TitleAnchor', TitleAnchor)
     },
     Layout() {
         const children = {