feat: support title navigation

Author: YangFong

src/stores/index.ts

@@ -184,6 +184,13 @@ export const useStore = defineStore(`store`, () => {
 
   const readingTime = ref<ReadTimeResults | null>(null)
 
+  // 文章标题
+  const titleList = ref<{
+    url: string
+    title: string
+    level: number
+  }[]>([])
+
   // 更新编辑器
   const editorRefresh = () => {
     codeThemeChange()
@@ -192,6 +199,26 @@ export const useStore = defineStore(`store`, () => {
     const { markdownContent, readingTime: readingTimeResult } = renderer.parseFrontMatterAndContent(editor.value!.getValue())
     readingTime.value = readingTimeResult
     let outputTemp = marked.parse(markdownContent) as string
+
+    // 提取标题
+    const div = document.createElement('div')
+    div.innerHTML = outputTemp
+    const list = div.querySelectorAll<HTMLElement>(`[data-heading]`)
+
+    titleList.value = []
+    let i = 0
+    for (const item of list) {
+      item.setAttribute(`id`, `${i}`)
+      titleList.value.push({
+        url: `#${i}`,
+        title: `${item.innerText}`,
+        level: Number(item.tagName.slice(1))
+      })
+      i++
+    }
+
+    outputTemp = div.innerHTML
+
     outputTemp = DOMPurify.sanitize(outputTemp)
 
     // 阅读时间及字数统计
@@ -501,6 +528,8 @@ export const useStore = defineStore(`store`, () => {
     delPost,
     isOpenPostSlider,
     isOpenRightSlider,
+
+    titleList,
   }
 })
 

src/utils/renderer.ts

@@ -157,7 +157,8 @@ export function initRenderer(opts: IOpts) {
 
   function styledContent(styleLabel: string, content: string, tagName?: string): string {
     const tag = tagName ?? styleLabel
-    return `<${tag} ${styles(styleLabel)}>${content}</${tag}>`
+
+    return `<${tag} ${/^h\d$/.test(tag) ? `data-heading="true"` : ``} ${styles(styleLabel)}>${content}</${tag}>`
   }
 
   function addFootnote(title: string, link: string): number {

src/views/CodemirrorEditor.vue

@@ -418,24 +418,33 @@ onMounted(() => {
             </ContextMenuContent>
           </ContextMenu>
         </div>
-        <div
-          id="preview"
-          ref="preview"
-          class="preview-wrapper flex-1 p-5"
-        >
-          <div id="output-wrapper" :class="{ output_night: !backLight }">
-            <div class="preview border-x-1 shadow-xl">
-              <section id="output" v-html="output" />
-              <div v-if="isCoping" class="loading-mask">
-                <div class="loading-mask-box">
-                  <div class="loading__img" />
-                  <span>正在生成</span>
+        <div class="relative flex-1">
+          <div
+            id="preview"
+            ref="preview"
+            class="preview-wrapper p-5"
+          >
+            <div id="output-wrapper" :class="{ output_night: !backLight }">
+              <div class="preview border-x-1 shadow-xl">
+                <section id="output" v-html="output" />
+                <div v-if="isCoping" class="loading-mask">
+                  <div class="loading-mask-box">
+                    <div class="loading__img" />
+                    <span>正在生成</span>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <BackTop target="preview" :right="40" :bottom="40" />
+            <BackTop target="preview" :right="40" :bottom="40" />
+          </div>
+          <ul class="bg-background absolute left-0 top-0 max-h-100 w-60 overflow-auto border rounded-2 p-2 text-sm shadow">
+            <li v-for="(item, index) in store.titleList" :key="index" class="line-clamp-1 py-1 leading-6 hover:bg-gray-300 dark:hover:bg-gray-600" :style="{paddingLeft: item.level - 0.5 + 'em'}">
+              <a :href="item.url">
+                {{ item.title }}
+              </a>
+            </li>
+          </ul>
         </div>
         <CssEditor class="order-2 flex-1" />
         <RightSlider class="order-2" />