创建自定义博客布局并向其传递数据
既然你已经为页面创建了布局,现在是时候为博客文章添加布局了!
准备好去……
- 为你的 Markdown 文件创建一个新的博客文章布局
- 将 YAML frontmatter 值作为 props 传递给布局组件
为你的博客文章添加布局
标题为“为你的博客文章添加布局”的部分当你在 .md
文件中包含 layout
frontmatter 属性时,你所有的 frontmatter YAML 值都可用于布局文件。
-
在
src/layouts/MarkdownPostLayout.astro
创建一个新文件 -
将以下代码复制到
MarkdownPostLayout.astro
中src/layouts/MarkdownPostLayout.astro ---const { frontmatter } = Astro.props;---<meta charset="utf-8" /><h1>{frontmatter.title}</h1><p>Written by {frontmatter.author}</p><slot /> -
在
post-1.md
中添加以下 frontmatter 属性src/pages/posts/post-1.md ---layout: ../../layouts/MarkdownPostLayout.astrotitle: 'My First Blog Post'pubDate: 2022-07-01description: 'This is the first post of my new Astro blog.'author: 'Astro Learner'image:url: 'https://docs.astro.js.cn/assets/rose.webp'alt: 'The Astro logo on a dark background with a pink glow.'tags: ["astro", "blogging", "learning in public"]--- -
再次在
https://:4321/posts/post-1
查看你的浏览器预览,并注意布局为你的页面添加了什么。 -
将相同的布局属性添加到你的另外两篇博客文章
post-2.md
和post-3.md
中。在浏览器中验证你的布局也已应用于这些文章。
使用布局时,你可以选择将页面标题等元素包含在 Markdown 内容或布局中。请记得目视检查你的页面预览,并进行任何必要的调整以避免元素重复。
亲自动手 - 自定义你的博客文章布局
标题为“亲自动手 - 自定义你的博客文章布局”的部分挑战:识别每篇博客文章的共同项目,并使用 MarkdownPostLayout.astro
来渲染它们,而不是在 post-1.md
和未来的每篇博客文章中都手写一遍。
这是一个重构代码的例子,将 pubDate
包含在布局组件中,而不是在 Markdown 的正文中编写它
Published on: 2022-07-01
Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
---const { frontmatter } = Astro.props;---<meta charset="utf-8" /><h1>{frontmatter.title}</h1><p>Published on: {frontmatter.pubDate.toString().slice(0,10)}</p><p>Written by {frontmatter.author}</p><slot />
尽情地重构你认为有用的部分,并向你的布局中添加任何你想要的内容,请记住,你添加到布局中的所有内容都会让你在每篇博客文章中少写一点东西!
这是一个重构后布局的示例,它只留下了由 slot 渲染的单个博客文章内容。你可以随意使用这个布局,或者创建你自己的!
---const { frontmatter } = Astro.props;---<meta charset="utf-8" /><h1>{frontmatter.title}</h1><p>{frontmatter.pubDate.toString().slice(0,10)}</p><p><em>{frontmatter.description}</em></p><p>Written by: {frontmatter.author}</p><img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /><slot />
由你的布局渲染的任何内容都不需要在你的博客文章中输入!如果你在检查浏览器预览时发现任何重复,请务必从你的 Markdown 文件中删除这些内容。
知识测验
标题为“测试你的知识”的部分你能想出空白处应该填什么,以便以下两个组件共同生成可运行的 Astro 代码吗?
-
src/pages/posts/learning-astro.md ---layout: ../../__________/MyMarkdownLayout.astrotitle: "Learning About Markdown in Astro"author: Astro Learner____: 2022-08-08---I learned so much today! Astro allows me to write in Markdown, but also use variables from the frontmatter. I can even access those values in an Astro layout component. -
src/layouts/MyMarkdownLayout.astro ---import ____________ from '../components/Footer.astro'const { ___________ } = Astro.props---<h1>{frontmatter.title}</h1><p>Written by: {frontmatter.______} on {frontmatter.pubDate}</p>< _______ /><Footer />显示填空后的答案!
-
src/pages/posts/learning-astro.md ---layout: ../../layouts/MyMarkdownLayout.astrotitle: "Learning About Markdown in Astro"author: Astro LearnerpubDate: 2022-08-08---I learned so much today! Astro allows me to write in Markdown, but also use variables from the frontmatter. I can even access those values in an Astro layout component. -
src/layouts/MyMarkdownLayout.astro ---import Footer from '../components/Footer.astro'const { frontmatter } = Astro.props---<h1>{frontmatter.title}</h1><p>Written by: {frontmatter.author} on {frontmatter.pubDate}</p><slot /><Footer />
-