feat: 🚀 首页完成分类和标签功能

Author: Kele-Bingtang

.vscode/settings.json

@@ -66,6 +66,7 @@
     "Iconify",
     "xlink",
     "qrcode",
-    "cascader"
+    "cascader",
+		"vitepress"
   ]
 }

docs/@pages/archivesPage.md

@@ -0,0 +1,6 @@
+---
+archivesPage: true
+title: 归档
+permalink: /archives/
+article: false
+---

docs/@pages/categoriesPage.md

@@ -0,0 +1,7 @@
+---
+categoriesPage: true
+title: 分类
+permalink: /categories/
+article: false
+layout: home
+---

docs/@pages/tagsPage.md

@@ -0,0 +1,7 @@
+---
+tagsPage: true
+title: 标签
+permalink: /tags/
+article: false
+layout: home
+---

plugins/vitepress-plugin-permalink/src/helper.ts

@@ -9,10 +9,7 @@ export const DEFAULT_IGNORE_DIR = [
   "components",
   "assets",
   ".vitepress",
-  "@pages",
   "node_modules",
-  ".vitepress",
-  "_posts",
   "package.json",
 ];
 

plugins/vitepress-plugin-sidebar-resolve/src/helper.ts

@@ -16,10 +16,7 @@ export const DEFAULT_IGNORE_DIR = [
   "components",
   "assets",
   ".vitepress",
-  "@pages",
   "node_modules",
-  ".vitepress",
-  "_posts",
   "package.json",
 ];
 

plugins/vitepress-plugin-sidebar-resolve/src/index.ts

@@ -34,6 +34,8 @@ export default function VitePluginVitePressSidebarResolve(option: SidebarOption
       const { themeConfig, srcDir } = config.vitepress.site;
       option.base = option.base || srcDir || ".";
 
+      console.log(option);
+
       // 自动生成结构化侧边栏
       const sidebar = createSidebar(option);
 

vitepress-theme-tk/src/components/HomeBanner.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts" name="HomeBanner">
 import { useDesign } from "../hooks";
 import { useData } from "vitepress";
-import { computed, onMounted, onUnmounted, unref } from "vue";
+import { onMounted, onUnmounted, unref } from "vue";
 import { useTypes } from "../hooks";
 
 const { getPrefixClass } = useDesign();
 const prefixClass = getPrefixClass("banner");
 
 const { site, frontmatter } = useData();
 
-const title = computed(() => unref(frontmatter).name || unref(site).title || "");
-const descArray = computed(() => [...new Set(unref(frontmatter).tk?.description?.filter((v: string) => !!v))]);
+const title = unref(frontmatter).name || unref(site).title || "";
+const descArray = [...new Set(unref(frontmatter).tk?.description?.filter((v: string) => !!v))];
 
 const { text, shouldAnimate, startTypes, stopTypes } = useTypes(descArray, {
   typesInTime: unref(frontmatter).tk?.typesInTime,

vitepress-theme-tk/src/components/HomeCategoryCard.vue

@@ -1,25 +1,53 @@
 <script setup lang="ts" name="HomeCategoryCard">
 import { useDesign } from "../hooks";
 import { postsSymbol } from "../configProvider";
-import { inject } from "vue";
+import { computed, inject, unref, ref, onMounted, watch } from "vue";
+import { isCategoriesPages } from "../configProvider.ts";
+import RouteLink from "./RouteLink.vue";
+import { useRoute, useData } from "vitepress";
 
 const { getPrefixClass } = useDesign();
 const prefixClass = getPrefixClass("category");
 
-const posts = inject(postsSymbol);
+const { frontmatter } = useData();
+const {
+  groupCards: { categories },
+} = inject(postsSymbol);
+
+const categorySize = unref(frontmatter).tk?.categorySize || 5;
+const currentCategories = computed(() => (isCategoriesPages() ? categories : categories.slice(0, categorySize)));
+
+const route = useRoute();
+const category = ref("");
+
+watch(
+  route,
+  () => {
+    const c = new URL(window.location.href).searchParams.get("category");
+    if (c != unref(category)) category.value = c;
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
   <div :class="`${prefixClass} card`">
-    <a title="全部分类" class="title">文章分类</a>
+    <RouteLink to="/categories" :title="isCategoriesPages() ? '全部分类' : '文章分类'" class="title">
+      {{ isCategoriesPages() ? "全部分类" : "文章分类" }}
+    </RouteLink>
 
     <div :class="`${prefixClass}-list`">
-      <a v-for="(item, index) in posts.groupCards.categories" :key="index" :class="{ active: item.key === category }">
-        {{ item.name }}
+      <RouteLink
+        v-for="(item, index) in currentCategories"
+        :key="index"
+        :to="`/categories?category=${encodeURIComponent(item.name)}`"
+        :class="{ active: item.name === category }"
+      >
+        <span>{{ item.name }}</span>
         <span>{{ item.length }}</span>
-      </a>
+      </RouteLink>
 
-      <!-- <a v-if="length !== 'all' && length < posts.groupCards.categories.length" class="more">更多 ...</a> -->
+      <RouteLink v-if="!isCategoriesPages() && categorySize < categories.length" to="/categories">更多 ...</RouteLink>
     </div>
   </div>
 </template>

vitepress-theme-tk/src/components/HomeInfo.vue

@@ -3,18 +3,17 @@ import { useDesign } from "../hooks";
 import HomeMyCard from "./HomeMyCard.vue";
 import HomeCategoryCard from "./HomeCategoryCard.vue";
 import HomeTagCard from "./HomeTagCard.vue";
+import { isHomePages, isCategoriesPages, isTagsPages } from "../configProvider.ts";
 
 const { getPrefixClass } = useDesign();
 const prefixClass = getPrefixClass("info");
 </script>
 
 <template>
   <div :class="prefixClass">
-    <HomeMyCard />
-
-    <HomeCategoryCard />
-
-    <HomeTagCard />
+    <HomeMyCard v-if="isHomePages()" />
+    <HomeCategoryCard v-if="isHomePages() || isCategoriesPages()" />
+    <HomeTagCard v-if="isHomePages() || isTagsPages()" />
   </div>
 </template>