如何正确获取Astro Markdown文件的正文内容-html教程-PHP中文网

如何正确获取Astro Markdown文件的正文内容

碧海醫心

发布： 2025-10-21 10:51:21

原创

791人浏览过

如何正确获取Astro Markdown文件的正文内容

在astro项目中，尝试通过`frontmatter.body`获取markdown文件的正文内容会导致`undefined`错误。这是因为astro并未将正文作为frontmatter的一部分导出。正确的做法是利用markdown文件对象提供的`compiledcontent()`方法来获取已编译为html的正文，或者使用`rawcontent()`获取原始markdown字符串。本文将详细介绍这两种方法及其应用示例，帮助开发者高效地处理markdown内容。

理解Astro Markdown内容处理机制

在使用Astro构建网站时，Markdown文件不仅包含其正文内容，还可能包含Frontmatter（YAML格式的元数据）。Astro在处理Markdown文件时，会将Frontmatter解析为可访问的属性，但Markdown的正文内容并非直接作为frontmatter对象的一部分暴露。因此，直接访问frontmatter.body会得到undefined。

为了解决这个问题，Astro为导入的Markdown文件对象提供了特定的方法来访问其正文内容，这些方法是其导出属性的一部分。

获取编译后的HTML内容：compiledContent()

compiledContent()方法用于获取Markdown文件正文经过Astro编译处理后的HTML字符串。这是在大多数情况下，您希望在网页上渲染Markdown内容时使用的首选方法。它会将Markdown语法（如标题、段落、列表、代码块等）转换为相应的HTML标签。

应用场景：

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

查看详情

在页面中直接渲染Markdown文章的正文。
将Markdown内容传递给组件进行展示。

示例代码：

假设您有一个PostCard组件，需要显示文章的标题和正文。您可以通过Astro.glob获取所有Markdown文件，然后使用compiledContent()来获取其正文。

---
// src/pages/index.astro
import PostCard from '../components/PostCard.astro';

// 假设 'latest' 是一个包含多个Markdown文件对象的数组
// 例如：const latest = await Astro.glob('./posts/*.md');
const latest = await Astro.glob('./posts/*.md'); // 实际项目中可能这样获取

---

<div class="posts-list">
  {latest.map(post => (
    <PostCard url={post.url} content={post.compiledContent()} />
  ))}
</div>

登录后复制

在PostCard.astro组件中，您可以通过set:html指令安全地渲染接收到的HTML内容：

<!-- src/components/PostCard.astro -->
---
interface Props {
  url: string;
  content: string; // 接收编译后的HTML字符串
}

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

<a href={url} class="post-card">
  <div class="post-content" set:html={content}></div>
</a>

<style>
  .post-card {
    /* 样式定义 */
  }
  .post-content {
    /* 样式定义 */
  }
</style>

登录后复制

获取原始Markdown字符串：rawContent()

除了编译后的HTML，Astro还提供了rawContent()方法，用于获取Markdown文件正文的原始字符串，即未经任何编译处理的纯Markdown文本。

应用场景：

需要将原始Markdown内容传递给第三方库进行自定义渲染。
在管理后台或编辑器中显示原始Markdown文本。
进行文本分析或搜索操作，需要原始文本而非HTML。

示例代码：

---
// src/pages/raw-content-example.astro
const post = await Astro.glob('./posts/my-article.md')[0]; // 假设只获取一篇

// 在服务器端或客户端脚本中访问原始内容
const rawMarkdown = post.rawContent();
console.log(rawMarkdown);
---

<div>
  <h2>原始Markdown内容示例</h2>
  <pre>{rawMarkdown}</pre>
</div>

登录后复制

完整示例：批量渲染Markdown文章列表

以下是一个更完整的示例，展示了如何使用Astro.glob获取多个Markdown文件，并将其编译后的内容渲染到页面上。

假设您的项目结构如下：

src/
├── pages/
│   ├── index.astro
│   └── posts/
│       ├── article-a.md
│       └── article-b.md
└── components/
    └── PostCard.astro

登录后复制

src/pages/index.astro：

---
// 导入所有位于 ./posts/ 目录下的 .md 文件
const posts = await Astro.glob('./posts/*.md');
---

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客文章</title>
    <style>
        body { font-family: sans-serif; line-height: 1.6; margin: 20px; }
        ul { list-style: none; padding: 0; }
        li { border: 1px solid #eee; margin-bottom: 15px; padding: 15px; border-radius: 5px; }
        h2 { margin-top: 0; }
        p { margin-bottom: 0; }
    </style>
</head>
<body>
    <h1>最新文章</h1>
    <ul>
        {posts.map(post => (
            // 对于每个文章对象，使用 post.compiledContent() 获取其HTML正文
            // 并通过 set:html 指令安全地渲染
            <li>
                <h2><a href={post.url}>{post.frontmatter.title || '无标题'}</a></h2>
                <div set:html={post.compiledContent()} />
            </li>
        ))}
    </ul>
</body>
</html>

登录后复制

src/pages/posts/article-a.md：

---
title: "Astro Markdown 文章A"
description: "这是关于Astro Markdown的示例文章A。"
---

## 欢迎阅读文章A

这是文章A的**正文内容**。

- 列表项1
- 列表项2

```javascript
console.log("Hello from code block A!");

登录后复制

`src/pages/posts/article-b.md`：
```markdown
---
title: "Astro Markdown 文章B"
description: "这是关于Astro Markdown的示例文章B。"
---

### 文章B的精彩内容

这是文章B的*正文内容*。

这是一个[链接](https://docs.astro.build/)。

登录后复制

在这个示例中，index.astro页面会动态地遍历posts数组，并为每篇文章生成一个列表项。每个列表项内部，post.compiledContent()返回的HTML会被set:html指令渲染出来，从而正确显示Markdown的正文内容。

注意事项与总结

避免使用frontmatter.body： 再次强调，frontmatter.body在Astro中是无效的，会导致undefined。
选择正确的方法：
- 当您需要将Markdown内容直接渲染到HTML页面时，使用compiledContent()。
- 当您需要访问原始Markdown文本时，使用rawContent()。
安全性： 当使用set:html指令渲染外部或用户提供的HTML内容时，请务必注意潜在的XSS（跨站脚本攻击）风险。Astro的compiledContent()方法通常会进行一些基本的清理，但对于完全不受信任的输入，仍需谨慎。
参考文档： 建议查阅Astro官方文档中关于Markdown内容处理的“导出属性”部分，以获取最权威和最新的信息：Astro Markdown Content - Exported Properties。