Astroでサイトを構築する際、Markdownファイルを使ってページを生成したいということがあったので、調べたことをメモしておきます。
サンプルコード
Markdownファイルを src/pages/ ディレクトリ内に設置することで、ページが生成されます。
例として、src/pages/posts/ 内にpost1.mdというファイルを生成して、以下の内容にします。
--- layout: ../../layouts/PostLayout.astro title: '記事タイトル' description: '記事説明文' --- # 見出し1サンプル 本文サンプル **強調**テスト ## 見出し2サンプル 1. リストサンプル 2. リストサンプル * リストサンプル * リストサンプル
2行目で設定しているレイアウトファイルを作成します。
src/layouts/ 内にPostLayout.astroを作成して、以下の内容にします。
---
const {frontmatter} = Astro.props;
---
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>{frontmatter.title}</title>
<meta name="description" content={frontmatter.description}>
</head>
<body>
<slot />
</body>
</html>
post1.mdで設定したtitleとdescriptionを2行目で受け取って、10～11行目で設定しています。
これでMarkdownファイルを使ったページ生成ができました。
マークダウンでHTMLを生成するデモページ
コメントが承認されるまで時間がかかります。