如何在Nuxt.js中从Markdown前置元数据生成动态标签路由？

要实现从Markdown文件的tags前置元数据生成/tags/_id.vue的动态路由，你需要扩展现有路由生成函数，读取每个Markdown文件的前置内容并提取标签，然后去重后生成对应的标签路由。下面是具体实现步骤：

1. 安装依赖 #

首先需要安装gray-matter来解析Markdown的前置元数据：

npm install gray-matter --save-dev
# 或者用yarn
yarn add gray-matter --dev

2. 修改路由生成函数 #

我们需要修改dynamicMarkdownRoutes函数，让它同时完成两个任务：

• 保留原有生成文章动态路由的功能
• 收集所有标签并生成标签专属路由

完整代码如下：

const glob = require('glob');
const path = require('path');
const fs = require('fs');
const matter = require('gray-matter');

const markdownPaths = ['blog', 'guest', 'random'];

function dynamicMarkdownRoutes() {
  const articleRoutes = [];
  const allTags = new Set(); // 用Set自动去重标签，避免重复路由

  markdownPaths.forEach(mdPath => {
    const files = glob.sync(`${mdPath}/*.md`, { cwd: 'content' });
    
    files.forEach(filepath => {
      // 生成文章路由（原有逻辑保留）
      const articleRoute = `${mdPath}/${path.basename(filepath, '.md')}`;
      articleRoutes.push(articleRoute);

      // 读取文件内容，解析前置元数据中的tags
      const fileContent = fs.readFileSync(path.join('content', filepath), 'utf8');
      const frontMatter = matter(fileContent);
      
      // 仅当tags存在且为数组时，添加到Set中
      if (frontMatter.data.tags && Array.isArray(frontMatter.data.tags)) {
        frontMatter.data.tags.forEach(tag => {
          allTags.add(tag);
        });
      }
    });
  });

  // 生成标签路由：格式为/tags/{tagName}
  const tagRoutes = Array.from(allTags).map(tag => `/tags/${tag}`);

  // 合并文章路由和标签路由，返回给Nuxt的generate配置
  return [...articleRoutes, ...tagRoutes];
}

export default {
  // 你的其他Nuxt配置...
  generate: {
    routes: dynamicMarkdownRoutes()
  },
};

代码细节说明 #

• 用Set存储标签：利用Set的特性自动去重，确保同一个标签只会生成一条路由。
• 前置元数据解析：通过gray-matter读取Markdown文件的头部内容，精准提取tags数组。
• 路由合并：将原有文章路由和新生成的标签路由合并，保证Nuxt会同时生成两种动态路由。

注意事项 #

• 确保你的Markdown文件前置元数据中的tags是数组格式，示例如下：

  ---
  title: 我的测试文章
  tags: [前端, Nuxt, Markdown]
  ---
  

• 如果某个Markdown文件没有tags字段，或者tags不是数组，代码会自动跳过该文件的标签处理，不会生成无效路由。

内容的提问来源于stack exchange，提问作者Justin Parks