如何从Nuxt Content中获取文件夹结构并实现分类展示？

我的content目录结构如下：

content /
-- | A /
---- | an_article.md
-- | B /
---- | another_one.md
-- | C /
---- | etc.md

我希望将这些文件夹（A、B、C）作为网站分类，在首页展示为可展开的列表（点击分类能展开显示对应文章）。我已经知道如何获取单个分类下的文章，但不清楚如何获取content根目录下的所有文件夹结构。

期望的展示效果示例 #

JavaScript代码 #

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
  event.preventDefault();
  $(this).parent(".sub-menu").children("ul").slideToggle(200);
  $(this).parent('.sub-menu').siblings().find('ul').slideUp(200);
});

CSS代码 #

body {
  font-size: 1em;
  font-family: arial;
}
a {
  text-decoration: none;
}

.menu {
  width: 50%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sub-menu li {
  border-top: 1px solid black;
}

li.sub-menu {
  margin-left: 20px;
}

HTML结构 #

<script src="jquery.min.js"></script>
<body>
  <ul class="menu">
    <li class='sub-menu'> <a href='#'>A</a>
      <ul>
        <li class='sub-menu'>
          <img src="/images/a-project.jpg" alt="项目A封面"> <br>
          <a href='/articles/A/an_article'>项目A相关内容</a>
      </ul>
    </li>
    <li class='sub-menu'> <a href='#'>B</a>
      <ul>
        <li class='sub-menu'>
          <img src="/images/b-project.jpg" alt="项目B封面"> <br>
          <a href='/articles/B/another_one'>项目B相关内容</a>
      </ul>
    </li>
    <li class='sub-menu'> <a href='#'>C</a>
      <ul>
        <li class='sub-menu'> 
          <img src="/images/c-project.jpg" alt="项目C封面"> <br>
          <a href='/articles/C/etc'>项目C相关内容</a>
      </ul>
    </li>
  </ul>
</body>

现有获取单个分类文章的代码 #

export default {
  async asyncData ({ $content, params }) {
    const articles = await $content('A', params.slug)
      .only(['title', 'description', 'img', 'slug'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return {
      articles
    }
  }
}

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