昨天的文章談到如何製作導覽列，今天介紹<ContentList>文章列表這個非常相似的東西。

兩者的差別

• 導覽列是整個 Content 底下所有檔案的樹狀結構
• 文章列表可以針對特定資料夾，如果不指定資料夾的話就跟 Navigation 沒兩樣，可以透過這個元件來做文章分類顯示。

<ContentList>使用方式

1. 在 pages 資料夾建立一個 .vue 類型檔案，可以參考官方文件命名 index.vue。
2. 在裡面加入以下基本的結構。

<template>
  <main>
    <ContentList path="/articles" v-slot="{ list }">
      <div v-for="article in list" :key="article._path">
        <h2>{{ article.title }}</h2>
        <p>{{ article.description }}</p>
      </div>
    </ContentList>
  </main>
</template>

除此之外，也提供了 404 的 slot （但是我實測是會報錯的）

<template>
  <main>
    <ContentList path="/articles" v-slot="{ list }">
      <!-- ...default slot -->
      <template #not-found>
        <p>No articles found.</p>
      </template>
    </ContentList>
  </main>
</template>

3.完成，下面這張圖中顯示的 This is from Navigation 上方是使用 ContentNavigation 元件，渲染出來的是超連結，而下方 This is from ContentList 上的文字則是使用 ContentList 渲染出來的，因為沒有指定階層資料夾，會是一樣的結果。

補充：ContentList 和 ContentNavigation 一樣會有不能 hot reload 的問題，也許套件還不穩定的關係，需要把 .nuxt 刪掉重新啟動才可能正常。