新增：《我的标签》，模仿语雀标签页

.gitignore

@@ -28,3 +28,4 @@ package-lock.json
 /src/node/shared.ts
 pnpm-global
 TODOs.md
+article-data.json

collect-article-data.mjs

@@ -0,0 +1,21 @@
+import glob  from 'fast-glob'
+import matter from 'gray-matter'
+import fs from 'node:fs/promises'
+
+// 感谢: https://github.com/brc-dd/vitepress-blog-demo
+const articleData = await Promise.all(
+  glob.sync('./repos/**/*.md', {
+    onlyFiles: true,
+    objectMode: true,
+    ignore: ['./repos/**/index.md', './repos/**/tags.md', './repos/**/me.md'], // without !
+  }).map(async (article) => {
+    const file = matter.read(`${article.path}`)
+    const { data, path } = file
+    return {
+      ...data,
+      path: path.replace(/\.md$/, '.html').replace('./repos/', '')
+    }
+  })
+)
+
+await fs.writeFile('./article-data.json', JSON.stringify(articleData), 'utf-8')

package.json

@@ -6,8 +6,8 @@
   "author": "Charles7c",
   "license": "MIT",
   "scripts": {
-    "dev": "vitepress dev repos",
-    "build": "vitepress build repos",
+    "dev": "node collect-article-data.mjs && vitepress dev repos",
+    "build": "node collect-article-data.mjs && vitepress build repos",
     "serve": "vitepress serve repos"
   },
   "devDependencies": {
@@ -19,6 +19,7 @@
     "element-plus": "^2.2.9",
     "fast-glob": "^3.2.11",
     "gitalk": "^1.7.2",
+    "gray-matter": "^4.0.3",
     "vue": "^3.2.37"
   }
 }

repos/.vitepress/config.ts

@@ -4,6 +4,7 @@ import { head } from './config/head'
 import { markdown } from './config/markdown'
 import { themeConfig } from './config/theme'
 
+// 感谢: https://github.com/windicss/docs
 export default defineConfig({
   lang: metaData.lang,
   title: metaData.title,

repos/.vitepress/config/markdown.ts

@@ -5,7 +5,7 @@ export const markdown: MarkdownOptions = {
   lineNumbers: true, // 启用行号
 
   // 在所有文档的<h1>标签后添加<ArticleMetadata/>组件
-  // 感谢: vitepress/@brc-dd
+  // 感谢: https://github.com/vuejs/vitepress/issues/1050
   config: (md) => {
     md.renderer.rules.heading_close = (tokens, idx, options, env, slf) => {
       let htmlResult = slf.renderToken(tokens, idx, options, env, slf)

repos/.vitepress/config/nav.ts

@@ -17,6 +17,11 @@ export const nav: DefaultTheme.Config['nav'] = [
     ],
     activeMatch: '/courses/'
   },
+  {
+    text: '我的标签',
+    link: '/tags',
+    activeMatch: '/tags'
+  },
   {
     text: '关于',
     items: [

repos/.vitepress/config/sidebar.ts

@@ -1,5 +1,5 @@
 import DefaultTheme from 'vitepress/theme'
-import { sync } from "fast-glob"
+import { sync } from 'fast-glob'
 
 export const sidebar: DefaultTheme.Config['sidebar'] = {
   '/categories/issues/': getItemsByDate("categories/issues"),

repos/.vitepress/theme/components/ArticleMetadata.vue

@@ -29,6 +29,7 @@ import { useData } from 'vitepress'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import '../styles/article-meta-data.css'
 
 // 获取发布时间
 const { page, theme, frontmatter } = useData()
@@ -43,45 +44,4 @@ const toDate = dayjs().to(dayjs(frontmatter.value.date))
 </script>
 
 <style scoped>
-.meta-wrapper {
-  margin-top: 10px;
-}
-.meta-item {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: middle;
-  max-width: 240px;
-  color: var(--vp-c-text-2);
-  cursor: default;
-  font-size: 14px;
-}
-.meta-item:not(:last-child) {
-  margin-right: 1rem;
-}
-.meta-icon, meta-content {
-  display: inline-block;
-  margin-right: .375rem;
-  vertical-align: middle;
-}
-.meta-icon {
-  position: relative;
-  bottom: 1.5px;
-}
-.meta-icon.date {
-  bottom: 1.3px;
-}
-.meta-icon svg {
-  fill: var(--vp-c-text-2);
-  height: 16px;
-  width: 16px;
-}
-.meta-content a {
-  font-weight: 400;
-  color: var(--vp-c-text-2);
-}
-.meta-content a:hover {
-  color: var(--vp-c-brand);
-}
 </style>

repos/.vitepress/theme/components/Comment.vue

@@ -44,7 +44,7 @@ function renderGitalk(options) {
   gitalk.render('comment-container')
 
   /*
-  // 感谢: dingqianwen/my-blog
+  // 感谢: https://github.com/dingqianwen/my-blog
   // 如果点赞，先判断有没有登录
   let $gc = $('#gitalk-container');
   $gc.on('click', '.gt-comment-like', function () {

repos/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import MyLayout from "./components/MyLayout.vue"
 import ElementPlus from 'element-plus'
 import "element-plus/dist/index.css"
 import ArticleMetadata from './components/ArticleMetadata.vue'
+import Tag from './components/Tag.vue'
 import './styles/vars.css'
 import './styles/custom.css'
 
@@ -14,5 +15,6 @@ export default {
     app.use(ElementPlus)
 
     app.component('ArticleMetadata', ArticleMetadata)
+    app.component('Tag', Tag)
   }
 }

repos/.vitepress/theme/styles/article-meta-data.css

@@ -0,0 +1,41 @@
+.meta-wrapper {
+  margin-top: 10px;
+}
+.meta-item {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  max-width: 240px;
+  color: var(--vp-c-text-2);
+  cursor: default;
+  font-size: 14px;
+}
+.meta-item:not(:last-child) {
+  margin-right: 1rem;
+}
+.meta-icon, meta-content {
+  display: inline-block;
+  margin-right: .375rem;
+  vertical-align: middle;
+}
+.meta-icon {
+  position: relative;
+  bottom: 1.5px;
+}
+.meta-icon.date {
+  bottom: 1.3px;
+}
+.meta-icon svg {
+  fill: var(--vp-c-text-2);
+  height: 16px;
+  width: 16px;
+}
+.meta-content a {
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+}
+.meta-content a:hover {
+  color: var(--vp-c-brand);
+}

repos/tags.md

@@ -0,0 +1,7 @@
+---
+editLink: false
+lastUpdated: false
+aside: false
+---
+
+<Tag />