重构：使用 data loaders 重构获取所有文章数据（详情请参阅：vuejs/vitepress#96）

.gitignore

@@ -26,5 +26,4 @@ cache/
 /src/client/shared.ts
 /src/node/shared.ts
 pnpm-global
-TODOs.md
-article-data.json
+TODOs.md

article.data.js

@@ -0,0 +1,25 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import parseFrontmatter from 'gray-matter';
+
+const excludedFiles = ['index.md', 'tags.md', 'archives.md', 'me.md'];
+
+export default {
+  watch: ['./docs/**/*.md'],
+  load(watchedFiles) {
+    // 排除不必要文件
+    const articleFiles = watchedFiles.filter(file => {
+      const filename = path.basename(file);
+      return !excludedFiles.includes(filename);
+    });
+    // 解析文章 Frontmatter
+    return articleFiles.map(articleFile => {
+      const articleContent = fs.readFileSync(articleFile, 'utf-8');
+      const { data } = parseFrontmatter(articleContent);
+      return {
+        ...data,
+        path: articleFile.substring(articleFile.lastIndexOf('/docs/') + 6).replace(/\.md$/, ''),
+      }
+    })
+  }
+}

collect-article-data.mjs

@@ -1,20 +0,0 @@
-import glob  from 'fast-glob'
-import matter from 'gray-matter'
-import fs from 'node:fs/promises'
-
-const articleData = await Promise.all(
-  glob.sync('./docs/**/*.md', {
-    onlyFiles: true,
-    objectMode: true,
-    ignore: ['./docs/**/index.md', './docs/**/tags.md', './docs/**/archives.md', './docs/**/me.md'], // without !
-  }).map(async (article) => {
-    const file = matter.read(`${article.path}`)
-    const { data, path } = file
-    return {
-      ...data,
-      path: path.replace(/\.md$/, '').replace('./docs/', '')
-    }
-  })
-)
-
-await fs.writeFile('./article-data.json', JSON.stringify(articleData), 'utf-8')

docs/.vitepress/theme/components/Archive.vue

@@ -79,8 +79,8 @@
 </template>
 
 <script lang="ts" setup>
-  import articleData from '../../../../article-data.json';
   import { getQueryParam, goToLink } from '../utils.ts';
+  import { data as articleData } from '../../../../article.data.js';
 
   // 文章原始数据和归档数据
   let $articleData;

docs/.vitepress/theme/components/Tag.vue

@@ -60,8 +60,8 @@
 <script lang="ts" setup>
   import { computed, ref } from 'vue';
   import md5 from 'blueimp-md5';
-  import articleData from '../../../../article-data.json';
   import { getQueryParam } from '../utils.ts';
+  import { data as articleData } from '../../../../article.data.js';
 
   const tags = computed(() => initTags(articleData));
   /**

package.json

@@ -5,9 +5,9 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "dev": "node collect-article-data.mjs && vitepress dev docs",
-    "preview": "node collect-article-data.mjs && vitepress preview docs",
-    "build": "node collect-article-data.mjs && vitepress build docs"
+    "dev": "vitepress dev docs",
+    "preview": "vitepress preview docs",
+    "build": "vitepress build docs"
   },
   "devDependencies": {
     "@arco-design/web-vue": "^2.43.2",