| type | title | description |
|---|---|---|
tutorial |
编写你的第一篇 Markdown 博客文章 |
教程：搭建你的 Astro 博客 -
在你的网站中添加 Markdown 页面 |
import Checklist from '/components/Checklist.astro';
import Blanks from '/components/tutorial/Blanks.astro';
import Box from '/components/tutorial/Box.astro';
import MultipleChoice from '/components/tutorial/MultipleChoice.astro';
import Option from '/components/tutorial/Option.astro'
import PreCheck from '/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"
现在你已经使用 .astro 文件构建了页面，是时候使用 .md 文件编写一些博客文章！
-
在新的
/posts/文件夹中添加一个新的（空）文件post-1.md。 -
通过将
/posts/post-1拼接到现有预览 URL 的末尾，并在浏览器中预览此页面。（例如http://localhost:4321/posts/post-1） -
将浏览器预览 URL 更改为查看
/posts/post-2。（这是你尚未创建的页面。）请注意预览“空”页面和不存在页面时控制台的不同输出。这将有助于你进行故障排查。
```markdown title="src/pages/posts/post-1.md"
---
title: '我的第一篇博客文章'
pubDate: 2022-07-01
description: '这是我 Astro 博客的第一篇文章。'
author: 'Astro 学习者'
image:
url: 'https://docs.astro.build/assets/rose.webp'
alt: 'The Astro logo on a dark background with a pink glow.'
tags: ["astro", "blogging", "learning in public"]
---
# 我的第一篇博客文章
发表于：2022-07-01
欢迎来到我学习关于 Astro 的新博客！在这里，我将分享我建立新网站的学习历程。
## 我做了什么
1. **安装 Astro**：首先，我创建了一个新的 Astro 项目并设置好了我的在线账号。
2. **制作页面**：然后我学习了如何通过创建新的 `.astro` 文件并将它们保存在 `src/pages/` 文件夹里来制作页面。
3. **发表博客文章**：这是我的第一篇博客文章！我现在有用 Astro 编写的页面和用 Markdown 写的文章了！
## 下一步计划
我将完成 Astro 教程，然后继续编写更多内容。关注我以获取更多信息。
```
-
在
localhost:4321/posts/post-1再次查看你的浏览器上的页面预览。你现在应该可以在此页面上看到文章内容。 -
使用浏览器的开发工具检查此页面。请注意，虽然你没有键入任何 HTML 元素，但你的 Markdown 已转换为 HTML。你可以看到标题、段落和列表项等元素。
:::note 文件顶部的信息，在代码块内，称为 frontmatter。此数据（包括标签和文章图像）是 Astro 可以使用的有关你的文章的信息。它不会自动出现在页面上，但你稍后会在教程中了解它的作用。 :::
1. 在 `src/pages/blog.astro` 中使用``标签链接到你的第一篇文章： ```astro title="src/pages/blog.astro" ins={16-18} --- --- <title>Astro</title> 首页 关于 博客 <h1>我的 Astro 学习博客</h1>
<p>这是我的 Astro 学习笔记</p>
<ul>
<li><a href="/posts/post-1/">文章 1</a></li>
</ul>
</body>
</html>
```
-
现在，在
src/pages/posts/中再添加两个文件：post-2.md和post-3.md。这里有一些示例代码，你可以将其复制并粘贴到你的文件中，或者，你可以编写自己的代码！--- title: 我的第二篇博客文章 author: Astro 学习者 description: "学习了一些 Astro 后，我根本停不下来！" image: url: "https://docs.astro.build/assets/arc.webp" alt: "The Astro logo on a dark background with a purple gradient arc." pubDate: 2022-07-08 tags: ["astro", "blogging", "learning in public", "successes"] --- 在学习 Astro 大约一周后，我决定尝试些新的东西。我编写并导入了一个小组件！
--- title: 我的第三篇博客文章 author: Astro 学习者 description: "我遇到了一些问题，但是在社区里面提问真的很有帮助！" image: url: "https://docs.astro.build/assets/rays.webp" alt: "The Astro logo on a dark background with rainbow rays." pubDate: 2022-07-15 tags: ["astro", "learning in public", "setbacks", "community"] --- 尽管这并不总是一帆风顺，但我很享受使用 Astro 进行搭建。并且，[Discord 社区](https://astro.build/chat)真的很友好而且乐于助人！
-
使用
<a></a>标签链接到新文章：--- --- <html lang = "zh"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width" /> <title>Astro</title> </head> <body> <a href="/">首页</a> <a href="/about/">关于</a> <a href="/blog/">博客</a> <h1>我的 Astro 学习博客</h1> <p>这是我的 Astro 学习笔记</p> <ul> <li><a href="/posts/post-1/">文章 1</a></li> <li><a href="/posts/post-2/">文章 2</a></li> <li><a href="/posts/post-3/">文章 3</a></li> </ul> </body> </html>
-
检查你的浏览器预览并确保：
文章1、文章2和文章3的所有链接都指向你网站上的工作页面。（如果你发现错误，请检查你在blog.astro上的链接或你的 Markdown 文件名。）
- Markdown (
.md) 文件中的内容将会转换为： HTML CSS JavaScript