创建博客文章存档

现在你有一些博客文章可供链接，是时候配置博客页面以自动创建它们的列表了！

¥Now that you have a few blog posts to link to, it’s time to configure the Blog page to create a list of them automatically!

准备好……

• 使用 import.meta.glob() 一次性访问所有帖子中的数据

• 在你的博客页面上显示动态生成的帖子列表

• 重构为每个列表项使用 <BlogPost /> 组件

动态显示帖子列表

标题部分 动态显示帖子列表

¥Dynamically display a list of posts

1. Add the following code to blog.astro to return information about all your Markdown files. import.meta.glob() will return an array of objects, one for each blog post.

   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. To generate the entire list of posts dynamically, using the post titles and URLs, replace your individual <li> tags with the following Astro code:

   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>

   Your entire list of blog posts is now being generated dynamically using Astro’s built-in TypeScript support, by mapping over the array returned by import.meta.glob().

3. Add a new blog post by creating a new post-4.md file in src/pages/posts/ and adding some Markdown content. Be sure to include at least the frontmatter properties used below.

   ---
   layout: ../../layouts/MarkdownPostLayout.astro
   title: My Fourth Blog Post
   author: Astro Learner
   description: "This post will show up on its own!"
   image:
       url: "https://astro.nodejs.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. Revisit your blog page in your browser preview at http://localhost:4321/blog and look for an updated list with four items, including your new blog post!

挑战：创建 BlogPost 组件

标题部分 挑战：创建 BlogPost 组件

¥Challenge: Create a BlogPost component

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

¥Try on your own to make all the necessary changes to your Astro project so that you can instead use the following code to generate your list of blog posts:

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>

Expand to see the steps

1. Create a new component in src/components/.

   Show the filename

   BlogPost.astro

2. Write the line of code in your component so that it will be able to receive a title and url as Astro.props.

   Show the code

   src/components/BlogPost.astro

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

3. Add the templating used to create each item in your blog post list.

   Show the code

   src/components/BlogPost.astro

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

4. Import the new component into your Blog page.

   Show the code

   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. Check Yourself: see the finished component code.

   Show the code

   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>

测试你的知识

标题部分 测试你的知识

¥Test your knowledge

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

¥If your Astro component contains the following line of code:

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

选择你可以编写的语法来表示：

¥Choose the syntax you could write to represent:

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

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

2. myPosts[2].frontmatter.title

3. <a href={myPosts[0].url}>First Post!!</a>

提交

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

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

2. myPosts[2].frontmatter.title

3. <a href={myPosts[0].url}>First Post!!</a>

提交

3. 每个帖子的一个组件，显示上次更新的日期。

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

2. myPosts[2].frontmatter.title

3. <a href={myPosts[0].url}>First Post!!</a>

提交

清单

标题部分 清单

¥Checklist

• 我可以从本地文件中查询数据。

• 我可以显示我所有博客文章的列表。

资源

标题部分 资源

¥Resources

• 在 Astro 中导入 glob 模式