修改章节目录组件数据源

Author: srsng

docs/.vitepress/theme/components/ChapterContents.vue

@@ -3,18 +3,8 @@ import { useData } from "vitepress";
 import {
   ChapterItems,
   Chapters,
-  isChapter,
 } from "../../../.vitepress/theme/constrants/route";
-
-function apply_prefix(link: string, prefix: string) {
-  if (!prefix) return link;
-  if (link.startsWith("/") && prefix.endsWith("/")) {
-    return prefix.slice(0, -1) + link;
-  } else if (!link.startsWith("/") && !prefix.endsWith("/")) {
-    return prefix + "/" + link;
-  }
-  return prefix + link;
-}
+import Contents from "./Contents.vue";
 
 const { chapter: chapter_root, root = true } = defineProps<{
   // 参数chapter应该是如 Chapter.xrobot_device这样的
@@ -23,16 +13,6 @@ const { chapter: chapter_root, root = true } = defineProps<{
   root?: boolean;
 }>();
 
-const { site } = useData();
-const base = site.value.base;
-
-// console.log("contents");
-let chapter_name: string[] = [];
-let tocs: { link: string; text: string }[][] = [];
-
-// console.log("chapter_root", chapter_root);
-// console.log("ChapterItems[chapter_root]", ChapterItems[chapter_root]);
-
 const items = ChapterItems[chapter_root];
 if (!items) {
   const { page } = useData();
@@ -44,39 +24,11 @@ if (!items) {
     "title:",
     page.value.title
   );
-} else {
-  items.forEach((subchapter) => {
-    // console.log(subchapter);
-    const t = subchapter.items?.filter((item) => {
-      return item.link !== chapter_root && !item.goback;
-    });
-    if (t) {
-      tocs.push(t);
-      chapter_name.push(subchapter.text);
-    }
-  });
 }
-
-// console.log("chapter_name:", chapter_name);
-// console.log("tocs:", tocs);
 </script>
 
 <template>
   <h2 v-if="root">目录</h2>
   <slot name="header"></slot>
-  <div v-for="(subchapter, index) in tocs">
-    <h3>{{ chapter_name[index] }}</h3>
-    <div v-if="subchapter.length === 0"><span>暂无内容</span></div>
-    <ol v-else>
-      <li v-for="(item, index2) in subchapter" :key="item.link">
-        <ol v-if="isChapter(item.link)">
-          <ChapterContents
-            :root="false"
-            :chapter="item.link as Chapters"
-          ></ChapterContents>
-        </ol>
-        <a v-else :href="apply_prefix(item.link, base)">{{ item.text }}</a>
-      </li>
-    </ol>
-  </div>
+  <Contents :chapter_data="items" :root="true"></Contents>
 </template>

docs/.vitepress/theme/components/Contents.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+import { apply_prefix } from "../utils";
+import {
+  ChapterItem,
+  isChapter,
+} from "../../../.vitepress/theme/constrants/route";
+
+const { chapter_data = [{ text: "", link: "" }], root = true } = defineProps<{
+  chapter_data: ChapterItem[];
+  // root用于控制递归生成目录
+  root?: boolean;
+}>();
+
+const { site } = useData();
+const base = site.value.base;
+
+console.log("chapter_data", chapter_data);
+
+// 过滤
+const items: ChapterItem[] = chapter_data.filter((sub) => {
+  return !sub.goback;
+});
+</script>
+
+<template>
+  <div v-if="items.length === 0"><span>暂无内容</span></div>
+  <div v-for="(subchapter, index) in items">
+    <h3 v-if="isChapter(subchapter.link)">
+      {{ chapter_data[index].text }}
+    </h3>
+    <a v-else :href="apply_prefix(subchapter.link, base)">{{
+      subchapter.text
+    }}</a>
+    <ol>
+      <div v-if="items.length === 0"><span>暂无内容</span></div>
+      <div v-else :key="subchapter.link">
+        <Contents
+          v-if="isChapter(subchapter.link)"
+          :root="false"
+          :chapter_data="subchapter.items as ChapterItem[]"
+        ></Contents>
+      </div>
+    </ol>
+  </div>
+</template>