特殊用途のページ

テーマは、theme.pagesDir を通じてプリセットページを同梱できます。これらのページは標準的なルーティング規則に従いますが、ユーザーが同じパスのページを提供した場合は、ユーザー側のページが常に優先されます。

この機能は、以下のようなページの提供に最適です。

テーマ同梱ページの定義

テーマのエントリポイントでページディレクトリを指定します。

export default () => ({
	theme: {
		root: '.',
		pagesDir: './pages'
	}
})

レイアウトの条件分岐

特殊なレイアウトを実装する最も効果的な方法は、ページのフロントマターで layout プロパティを定義することです。

例: menu.mdx

---
title: メニュー
layout: menu
hidden: true
---

# メニューの内容

テンプレートでの実装例:

const MenuLayout = ({ ctx, PageContent }) => (
	<div class="menu-layout">
		<h1>{ctx.page.title}</h1>
		<PageContent />
	</div>
)

const DocLayout = ({ ctx, PageContent }) => (
	<div class="doc-layout">
		<aside>{/* サイドバー */}</aside>
		<main>
			<PageContent />
		</main>
	</div>
)

export default function PageTemplate({ PageContent, ExtraHead, ctx }) {
	const layout = ctx.page.frontmatter?.layout
	return (
		<>
			<html>
				<head>
					<ExtraHead />
					<title>{ctx.page.title || ctx.site.name}</title>
				</head>
				<body>
					{layout === 'menu' ? (
						<MenuLayout ctx={ctx} PageContent={PageContent} />
					) : (
						<DocLayout ctx={ctx} PageContent={PageContent} />
					)}
				</body>
			</html>
		</>
	)
}

インタラクティブなコンポーネント

コンタクトフォームなどの複雑なインタラクションが必要なページでは、クライアントコンポーネントの使用を推奨します。テーマの components/ ディレクトリにコンポーネント（例: ContactForm.client.jsx）を用意し、ユーザーが MDX 内で呼び出せるようにします。

独立した HTML ページ

特殊用途のページは MDX に限定されません。テーマの pagesDir に純粋な .html ファイルを含めることも可能です。これらは Vite によって処理され、テーマのテンプレートを通過します。

このアプローチは、サイドバーや目次などの標準的なドキュメント要素を除外したいランディングページや組み込みツールに最適です。テンプレート内で ctx.page.path.endsWith('.html') を判定し、専用のレイアウトを適用できます。

パスとアセットの解決

Methanol はビルドプロセス中にアセットパスを自動的に解決します。public/ 配下の静的アセットに対して withBase() は通常不要ですが、異なる環境間でもベースパスを維持する必要がある動的な URL 生成においては、引き続き有効なツールです。