Markdown・MDX
ここでは紹介文をMarkdownのページとして追加します。本文中心のページにはMarkdown、本文の中でReactコンポーネントを使いたい場合にはMDXを利用できます。どちらもpluginSsg()で標準対応しており、追加のministaプラグインは不要です。
Table of Contents
Markdownのページを作る
---
title: 私たちについて
---
# 私たちについて
小さなチームでWebサイトを制作しています。
- 設計
- デザイン
- 実装このファイルから/aboutのページが生成されます。JSX・TSXのページと同じ共通レイアウトが適用されます。
構成と出力を確認する
前のガイドでabout.tsxを作った場合は、その内容をabout.mdへ置き換えます。同じURLのファイルを二つ残すと競合します。
src/pages/
├── index.tsx
├── about.md
└── news/
├── index.tsx
└── hello.tsxdist/
├── index.html
├── about.html
└── news/
├── index.html
└── hello.htmlソースの形式を変えても、公開するファイルはHTMLです。この段階ではレイアウトなしで試せます。レイアウトを追加すると、Markdown・MDXのページにも共通の構造が適用されます。
フロントマターでページデータを指定する
ファイル先頭の---で囲んだ部分をフロントマターと呼びます。デフォルトではmetadataとして読み込まれ、レイアウトやページのpropsへ渡されます。
---
title: 制作中の記事
draft: true
---
# 制作中の記事draft: trueは本番ビルドから除外されます。タイトルをheadへ反映するには、レイアウト側でtitleを利用してください。独自の項目も追加できますが、項目を書くだけでHTMLの要素やレイアウトの切り替えが自動生成されるわけではありません。
+++で囲んだTOML形式のフロントマターも利用できます。
MDXでコンポーネントを使う
次のコンポーネントを用意します。
import type { ReactNode } from "react"
export default function Note({ children }: { children: ReactNode }) {
return <aside className="note">{children}</aside>
}.mdxファイルでは、importしたコンポーネントを本文へ挿入できます。
---
title: ご利用ガイド
---
import Note from "../components/note"
# ご利用ガイド
はじめに設定を確認してください。
<Note>設定変更後は再ビルドしてください。</Note>静的なコンポーネントとして使う限り、MDXのためのクライアントサイドJavaScriptは配信されません。
本文をコンポーネントとして読み込む
ページとして公開しない本文は、src/pages/以外へ置いてimportします。
## 利用条件
ご利用前に内容をご確認ください。import Terms from "../components/terms.md"
export default function TermsPage() {
return (
<article>
<h1>利用規約</h1>
<Terms />
</article>
)
}Markdownの変換を拡張する
例えば表や取り消し線などのGFM構文を利用するには、remark-gfmを追加します。
npm install --save-dev remark-gfmimport { defineConfig, pluginSsg } from "minista"
import remarkGfm from "remark-gfm"
export default defineConfig({
plugins: [
pluginSsg({
mdx: {
remarkPlugins: [remarkGfm],
},
}),
],
})Markdownの処理にはremarkPlugins、HTMLへ変換した後の処理にはrehypePluginsを設定します。シンタックスハイライトや見出しIDも、用途に合うプラグインで追加できます。
MDXを利用しない構成で変換を無効にする場合は、pluginSsg({ mdx: false })を指定します。設定値の詳細はpluginSsgを参照してください。
次は404ページで、存在しないURLへアクセスしたときに表示するページを作ります。