Я хочу отображать содержимое нескольких файлов .md
на одной странице с помощью Astro.
У меня есть такая файловая структура:
pages/
items/
item-1.md
item-2.md
item-3.md
// etc
index.astro
item-1.md
выглядит так:
---
title = 'Item 1'
---
Item 1 main text
И в index.astro
:
---
const items = await Astro.glob([
'./items/*.md',
]);
---
<html lang = "en">
<body>
{items.map((item) =>
item.Content
)}
</body>
</html>
Что я получаю в результате:
[object Object][object Object][object Object]
Вместо ожидаемого:
Item 1 main text
Item 2 main text
Item 3 main text
Как я могу сделать так, чтобы выходной HTML-код, рассчитанный из Markdown, отображался на странице?
item.Content
— это компонент Astro, поэтому в вашем файле index.astro
вам нужно будет отобразить его следующим образом:
---
const items = await Astro.glob('./items/*.md');
---
<html lang = "en">
<body>
{items.map((item) =>
<item.Content />
)}
</body>
</html>
Вы также можете деструктурировать его на карте, но они функционально эквивалентны:
{items.map(({ Content }) =>
<Content />
)}