如何在Astro单页面中渲染多个Markdown文件？

问题原因 #

直接输出item.Content会得到[object Object]，是因为Content是Astro生成的组件对象，并非字符串，不能直接作为文本输出，必须以组件形式渲染。

修正后的代码 #

修改index.astro文件，将item.Content改为组件调用语法：

---
const items = await Astro.glob('./items/*.md');
---

<html lang="en">
    <body>
        {items.map((item) => (
            <item.Content />
        ))}
    </body>
</html>

可选：渲染Markdown的标题 #

如果需要同时展示每个Markdown文件的标题（来自frontmatter），可以调整代码：

---
const items = await Astro.glob('./items/*.md');
---

<html lang="en">
    <body>
        {items.map((item) => (
            <div class="item-container">
                <h2>{item.frontmatter.title}</h2>
                <item.Content />
            </div>
        ))}
    </body>
</html>

额外提示 #

你的Markdown文件frontmatter使用了title = 'Item 1'的语法，这是Astro旧版的语法，建议改为标准YAML格式：

---
title: 'Item 1'
---

Item 1 main text

内容的提问来源于stack exchange，提问作者Santa