创建博客文章存档
现在你有一些博客文章可供链接,是时候配置博客页面以自动创建它们的列表了!
¥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
-
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> -
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()
. -
Add a new blog post by creating a new
post-4.md
file insrc/pages/posts/
and adding some Markdown content. Be sure to include at least the frontmatter properties used below.---layout: ../../layouts/MarkdownPostLayout.astrotitle: My Fourth Blog Postauthor: Astro Learnerdescription: "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-08tags: ["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. -
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:
<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
-
Create a new component in
src/components/
.Show the filename
BlogPost.astro -
Write the line of code in your component so that it will be able to receive a
title
andurl
asAstro.props
.Show the code
src/components/BlogPost.astro ---const { title, url } = Astro.props;--- -
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> -
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";--- -
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:
- 你的第三篇博客文章的标题。
- 指向你第一篇博客文章的 URL 的链接。
- 每个帖子的一个组件,显示上次更新的日期。
清单
标题部分 清单¥Checklist
资源
标题部分 资源¥Resources
Tutorials