创建文章存档页

既然你有一些要展示的博客文章了，让我们搭建博客页面，自动创建一个存档列表来展示它们吧！

1. 将以下代码添加到 blog.astro 中，以返回关于所有 Markdown 文件的信息。Astro.glob() 将返回一个对象数组，每个博客文章对应一个对象。

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "我的 Astro 学习博客";
---
<BaseLayout pageTitle={pageTitle}>
  <p>在这里，我将分享我的学习 Astro 的之旅。</p>
  <ul>
    <li><a href="/posts/post-1/">第一篇文章</a></li>
    <li><a href="/posts/post-2/">第二篇文章</a></li>
    <li><a href="/posts/post-3/">第三篇文章</a></li>
  </ul>
</BaseLayout>

2. 为了动态生成整个文章列表，展示文章的标题和链接，将个别的 <li> 标签替换为以下 Astro 代码：

   ---
   import BaseLayout from '../layouts/BaseLayout.astro'
   const allPosts = await Astro.glob('../pages/posts/*.md');
   const pageTitle = "我的 Astro 学习博客";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <p>在这里，我将分享我的学习 Astro 的之旅。</p>
     <ul>
       <li><a href="/posts/post-1/">Post 1</a></li>
       <li><a href="/posts/post-2/">Post 2</a></li>
       <li><a href="/posts/post-3/">Post 3</a></li>
   
       {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
     </ul>
   </BaseLayout>

   通过对 Astro.glob() 返回的数组进行映射，你的整个博客文章列表现在是动态生成的。

3. 通过在 src/pages/posts/ 中创建一个新的 post-4.md 文件并添加一些 Markdown 内容来添加一个新的博客文章。请确保至少包含下面使用的 frontmatter

---
layout: ../../layouts/MarkdownPostLayout.astro
title: '我的第四篇博客文章'
author: 'Astro 学习者'
description: "这篇文章会自己出现在列表中！"
image:
  url: "https://docs.astro.build/default-og-image.png"
  alt: "The word “astro” against an illustration of planets and stars."
pubDate: 2022-08-08
tags: ["astro", "successes"]
---
这篇文章应该会与其他的博客文章一起显示，因为 `Astro.glob()` 会返回一个包含所有文章的列表，以创建这个文章列表。

4. 在浏览器预览中重新访问博客页面 localhost:3000/blog，并查看更新后的包含四篇文章的列表，其中包括你的新博客文章！

<ul>
  {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>

---
const myPosts = await Astro.glob('../pages/posts/*.md');
---

• Astro.glob() API 文档