add category function

.vitepress/config.js

@@ -21,6 +21,7 @@ export default defineConfig({
         },
         nav: [
             { text: 'Home', link: '/' },
+            { text: 'Category', link: '/pages/category' },
             { text: 'Archives', link: '/pages/archives' },
             { text: 'Tags', link: '/pages/tags' },
             { text: 'About', link: '/pages/about' }

.vitepress/theme/components/Category.vue

@@ -0,0 +1,31 @@
+<template>
+    <div v-for="(posts, key) in data">
+        <div class="category">
+            {{ key }}
+        </div>
+        <a :href="withBase(article.regularPath)" v-for="(article, index) in posts" :key="index" class="posts">
+            <div class="post-container">
+                <div class="post-dot"></div>
+                {{ article.frontMatter.title }}
+            </div>
+            <div class="date">{{ article.frontMatter.date.slice(5) }}</div>
+        </a>
+    </div>
+</template>
+<script lang="ts" setup>
+import { useData, withBase } from 'vitepress'
+import { computed } from 'vue'
+import { initCategory } from '../functions'
+
+const { theme } = useData()
+const data = computed(() => initCategory(theme.value.posts))
+</script>
+
+<style scoped>
+.category {
+    padding: 14px 0 8px 0;
+    font-size: 1.25rem;
+    font-weight: 500;
+    font-family: var(--date-font-family);
+}
+</style>

.vitepress/theme/functions.ts

@@ -2,6 +2,7 @@ type Post = {
     frontMatter: {
         date: string
         title: string
+        category: string
         tags: string[]
         description: string
     }
@@ -27,6 +28,23 @@ export function initTags(post: Post[]) {
     return data
 }
 
+export function initCategory(post: Post[]) {
+    const data: any = {}
+    for (let index = 0; index < post.length; index++) {
+        const element = post[index]
+        const category = element.frontMatter.category
+        if (category) {
+            if (data[category]) {
+                data[category].push(element)
+            } else {
+                data[category] = []
+                data[category].push(element)
+            }
+        }
+    }
+    return data
+}
+
 export function useYearSort(post: Post[]) {
     const data = []
     let year = '0'

.vitepress/theme/index.js

@@ -2,6 +2,7 @@ import DefaultTheme from 'vitepress/theme'
 
 import NewLayout from './components/NewLayout.vue'
 import Archives from './components/Archives.vue'
+import Category from './components/Category.vue'
 import Tags from './components/Tags.vue'
 import Page from './components/Page.vue'
 import Comment from './components/Comment.vue'
@@ -14,6 +15,7 @@ export default {
     enhanceApp({ app }) {
         // register global compoment
         app.component('Tags', Tags)
+        app.component('Category', Category)
         app.component('Archives', Archives)
         app.component('Page', Page)
         app.component('Comment', Comment)

pages/category.md

@@ -0,0 +1,7 @@
+---
+page: true
+title: Category
+description: Category
+aside: false
+---
+<Category/>

posts/vitepress-first.md

@@ -1,6 +1,7 @@
 ---
 date: 2021-06-30
 title: 一直想找一个系统架构和设计都足够干净的系统
+category: 主题
 tags:
 - vitepress
 - markdown