如何在Nuxt Content中按分类获取嵌套Markdown文件并渲染到折叠面板

1. 给Markdown文件添加分类标识 #

先确保content目录下的每篇Markdown文件，都在front matter里声明所属分类，比如：

---
title: "Vue组件优化技巧"
category: "A" # 对应A/B/C其中一个分类
---
正文内容...

2. 在asyncData中按分类分组文章 #

拿到所有文章后，用reduce把文章按分类归类，生成键为分类名、值为对应文章数组的对象，方便后续直接调用：

export default {
  async asyncData({ $content }) {
    // 获取所有文章数据
    const allArticles = await $content().fetch()
    
    // 按category字段分组
    const groupedArticles = allArticles.reduce((result, article) => {
      const cat = article.category
      if (!result[cat]) {
        result[cat] = []
      }
      result[cat].push(article)
      return result
    }, {})

    // 固定目标分类为A、B、C（如果需要动态获取所有存在的分类，改用Object.keys(groupedArticles)）
    const targetCategories = ['A', 'B', 'C']

    return { groupedArticles, targetCategories }
  }
}

3. 折叠面板中渲染对应分类的文章 #

结合你已有的v-for折叠面板逻辑，在每个面板的插槽内遍历对应分类的文章即可：

<template>
  <div class="category-panels">
    <!-- 遍历A/B/C分类渲染折叠面板 -->
    <collapse-panel 
      v-for="category in targetCategories" 
      :key="category"
      :panel-title="`分类${category}`"
    >
      <!-- 插槽内容：当前分类下的文章列表 -->
      <div class="article-list">
        <div 
          v-for="article in groupedArticles[category] || []" 
          :key="article.slug"
          class="article-item"
        >
          <h4>{{ article.title }}</h4>
          <p class="article-excerpt">{{ article.excerpt || article.text.slice(0, 100) }}...</p>
        </div>
        <!-- 空状态提示 -->
        <p v-if="!groupedArticles[category] || groupedArticles[category].length === 0">
          该分类下暂无文章
        </p>
      </div>
    </collapse-panel>
  </div>
</template>

额外提示 #

• 如果你的折叠面板组件有命名插槽（比如#content），记得把文章列表放到对应插槽位置；
• 要是需要对分类内的文章排序，可以在分组时添加排序逻辑，比如按发布时间倒序：result[cat].sort((a, b) => new Date(b.date) - new Date(a.date))。

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