创建一个博客文章存档

现在你已经有几篇博客文章可以链接了，是时候配置博客页面来自动创建它们的列表了！

准备好……

• 使用 import.meta.glob() 一次性访问所有文章的数据
• 在你的博客页面上显示一个动态生成的文章列表
• 重构为每个列表项使用 <BlogPost /> 组件

动态地展示文章列表

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

   src/pages/blog.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro'
   const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
   const pageTitle = "My Astro Learning Blog";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <p>This is where I will post about my journey learning 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>
     </ul>
   </BaseLayout>

2. 要使用文章标题和 URL 动态生成整个文章列表，请用以下 Astro 代码替换你原来的 <li> 标签

   src/pages/blog.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro'
   const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
   const pageTitle = "My Astro Learning Blog";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <p>This is where I will post about my journey learning 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: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
     </ul>
   </BaseLayout>

   现在，你的整个博客文章列表是使用 Astro 内置的 TypeScript 支持，通过映射 import.meta.glob() 返回的数组动态生成的。

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

   ---
   layout: ../../layouts/MarkdownPostLayout.astro
   title: My Fourth Blog Post
   author: Astro Learner
   description: "This post will show up on its own!"
   image:
       url: "https://docs.astro.js.cn/default-og-image.png"
       alt: "The word astro against an illustration of planets and stars."
   pubDate: 2022-08-08
   tags: ["astro", "successes"]
   ---
   This post should show up with my other blog posts, because `import.meta.glob()` is returning a list of all my posts in order to create my list.

4. 在浏览器预览中重新访问你的博客页面 https://:4321/blog，你会看到一个更新后的列表，其中包含四项，包括你的新博客文章！

挑战：创建 BlogPost 组件

尝试自己对你的 Astro 项目进行所有必要的更改，以便你可以改用以下代码来生成你的博客文章列表

src/pages/blog.astro

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

展开以查看步骤

1. 在 src/components/ 中创建一个新组件。

   显示文件名

   BlogPost.astro

2. 在你的组件中编写代码行，使其能够接收 title 和 url 作为 Astro.props。

   显示代码

   src/components/BlogPost.astro

   ---
   const { title, url } = Astro.props;
   ---

3. 添加用于创建博客文章列表中每个项目的模板。

   显示代码

   src/components/BlogPost.astro

   <li><a href={url}>{title}</a></li>

4. 将新组件导入你的博客页面。

   显示代码

   src/pages/blog.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import BlogPost from '../components/BlogPost.astro';
   const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));
   const pageTitle = "My Astro Learning Blog";
   ---

5. 自查：查看完成的组件代码。

   显示代码

   src/components/BlogPost.astro

   ---
   const { title, url } = Astro.props
   ---
   <li><a href={url}>{title}</a></li>

   src/pages/blog.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import BlogPost from '../components/BlogPost.astro';
   const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));
   const pageTitle = "My Astro Learning Blog"
   ---
   <BaseLayout pageTitle={pageTitle}>
     <p>This is where I will post about my journey learning Astro.</p>
     <ul>
       {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
     </ul>
   </BaseLayout>

知识测验

如果你的 Astro 组件包含以下代码行

---
const myPosts = Object.values(import.meta.glob('./posts/*.md', { eager:  true }));
---

选择可以表示以下内容的语法

1. 你的第三篇博客文章的标题。

   1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)

   2. myPosts[2].frontmatter.title

   3. <a href={myPosts[0].url}>第一篇！！</a>

   提交

2. 一个指向你第一篇博客文章 URL 的链接。

   1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)

   2. myPosts[2].frontmatter.title

   3. <a href={myPosts[0].url}>第一篇！！</a>

   提交

3. 为每篇文章提供一个组件，显示其最后更新的日期。

   1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)

   2. myPosts[2].frontmatter.title

   3. <a href={myPosts[0].url}>第一篇！！</a>

   提交

清单

• 我可以从本地文件中查询数据。
• 我可以显示所有博客文章的列表。

相关资源

• 在 Astro 中导入 glob 模式