在Astro中用Markdown添加内容：一键生成静态站点 📝

Markdown（Markdown）允许你使用一种易于阅读、易于编写的纯文本格式进行写作，Astro 包含对 Markdown 文件的内置支持。
这样，你可以构建个人博客和其他任何类型的项目。
在这篇文章中，我们将来看看它的功能 🎊
开始吧！🤩

等等

Astro 内置了对 Markdown 文件的原生支持，无需任何第三方插件，这样你可以轻松构建博客或文档网站。这个功能真是太酷了，让 Astro 成为了一个非常有趣的解决方案 🖖

你的本地 Markdown 文件可以放在 src/ 目录下的任何位置，也可以放在其他位置。你可以通过导入语句将单个 Markdown 文件引入到 .astro 组件中，或者使用 Vite 的 import.meta.glob() 同时查询多个 Markdown 文件。

如果你有一组相关的 Markdown 文件，可以考虑将它们定义为集合。这会给你带来几个好处，包括可以将 Markdown 文件存放在你文件系统的任何位置或远程位置等等。

是的，在导入或查询之后，Astro 允许你如下所示使用 Markdown 文件：

---
title: '为您的网站添加Markdown内容：📝'
author: 'Domenico Tenace'
---

在这篇文章里，我们要来看看Markdown的一些有趣功能 🎊

点击进入全屏模式 点击退出全屏模式

---
import * as astroMarkdown from '../posts/astro-markdown.md';
---

<p>{astroMarkdown.frontmatter.title}</p>
<p>作者：{astroMarkdown.frontmatter.author}。</p>

全屏模式 退出全屏

你可以在 .astro 组件中编写动态 HTML 模板，这些模板可以包含 frontmatter 数据和正文内容 🧠

在从您的集合中获取数据时，Markdown 的 frontmatter 属性会被放在 data 对象里。另外，body 会包含原始未编译的正文内容，作为字符串。

在你的 .astro 组件里，当你使用 import 或 import.meta.glob() 来导入 Markdown 时，以下导出属性可以使用：

• file ：文件的完整路径。
• url ：页面的 URL。
• frontmatter ：此属性包含文件元数据中指定的任何数据（例如上面示例中的 title）。
• __：此组件返回文件的内容。
• rawContent() ：此函数返回原始 Markdown 文档的字符串形式。
• compiledContent() ：此异步函数将 Markdown 文档编译为 HTML 字符串。
• getHeadings() ：此异步函数返回文件中所有标题列表，每个标题包含层级深度、链接标识符和文本。每个标题的 slug 对应于给定标题生成的 ID，可用于锚点链接。

<Content /> 组件在从 Markdown 文件导入时可用。该组件会返回并渲染文件的整个正文内容为 HTML。
你也可以通过渲染一个 <Content /> 组件来展示 Markdown 集合条目的 HTML 内容 👻
请参考以下示例：

    --- 
    import { Content as AstroArticle } from '../components/astroArticle.md';
    import { getEntry, render } from 'astro:content';

    const post = await getEntry('post', 'shirt');
    const { Content } = await render(post);
    ---
    <h2>Astro：前端框架的新领域</h2>
    <AstroArticle />

    <p>发布时间： {post.data.publishingDate.toDateString()}</p>
    <Content />

全屏显示；退出全屏

在 Astro 中管理 Markdown 文件既简单又功能强大，因为它可以非常轻松地搭建博客。接下来...祝你编程愉快！✨

嗨👋🏻
我叫多梅尼科（Domenico），是一名热爱Vue.js框架的软件开发者，我写文章分享我的Vue.js知识和经验。
别忘了看我的Linktree，发现我的项目 🫰🏻

Linktree: 链接如下: https://linktr.ee/domenicotenace

点击下方关注我，关注我在 dev.to 上的其他文章👇🏻

来看看dvalin99的个人资料哦

热爱IT世界及其周边的一切 ✌🏻 热爱Vue和开源 🦠 [https://dev.to/dvalin99]

如果你喜欢我的内容或想要支持我在 GitHub 上的工作，你可以通过小额打赏来支持我。
我会非常感激你谢谢🙏

](https://www.buymeacoffee.com/domenicotenace)