从零开始搭建自己的博客 五：博客文章列表

通过前面的介绍，我们现在已经可以将博客文章渲染成网页了。但是这里还有一个问题：当别人访问我们的网站的时候，他们并不知道我们网站有哪些文章，所以我们还需要一个博客文章列表。

那么我们把博客文章列表放哪呢？我们这里选择把博客文章列表放在 /blog/ 这个地方，当然你也可以选择把博客文章列表放主页。

创建示例博客文件

为了示例，我们先创建三篇博客文章，分别名为 example1.md、example2.md 以及 example3.md，内容上分别只填一个标题即可（例如 # 示例一、# 示例二 以及 # 示例三）。

创建博客文章列表文件

那么既然博客文章列表的路径是 /blog/，我们就创建 @/blog/index.vue 这个文件。

之后在新创建的文件里填充如下内容，是按照 Nuxt content 官方给的示例代码写的：

<template>
    <main>
        <ContentList v-slot="{ list }">
            <ul>
                <li v-for="article in list" :key="article._path">
                    <NuxtLink :to="article._path">
                        {{ article.title }}
                    </NuxtLink>
                </li>
            </ul>
        </ContentList>
    </main>
</template>

随后我们打开 http://localhost:3000/blog，会发现内容已经渲染出来了。

之后点击蓝色的链接就可以进入文章。

这里我们发现显示出来的名称不是 example1、example2 以及 example3，而是 示例一、示例二 以及 示例三，这是因为我们在代码中设置显示的是 {{ article.title }}，然后 nuxt content 会自动帮我们解析文章的名字（即 # 后面的内容），在没有设置一级标题的情况下，nuxt content 会退而求其次，使用文章文件的名称。注意解析出来的路径依旧是 /blog/example1 等，不会受到文章内一级标题的影响。