专门用途页面

主题可以通过 theme.pagesDir 提供预置页面。这些页面遵循标准的路由规则，但如果用户提供了相同路径的页面，则用户页面始终优先。

此功能非常适合提供：

定义主题页面目录

在主题入口文件中指定页面目录：

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

差异化布局

实现特殊布局最有效的方法是在页面 Frontmatter 中定义 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>
		</>
	)
}

交互式组件

对于需要复杂交互的页面（如联系表单），我们建议使用 Client-only 组件。你的主题可以在其 components/ 目录中提供这些组件（如 ContactForm.client.jsx），用户随后可以将其直接置入其 MDX 页面中。

独立 HTML 页面

专门用途页面不限于 MDX。你也可以在主题的 pagesDir 中包含纯 .html 文件。这些文件会经由 Vite 处理，并传递给主题模板。

这种方法非常适合那些需要排除侧边栏或目录等标准文档元素的独立落地页或嵌入式工具。你可以在模板中使用 ctx.page.path.endsWith('.html') 来应用“独立”布局。

路径与资源解析

Methanol 会在构建过程中自动解析资源路径。对于 public/ 下的主题静态资源，通常不需要使用 withBase()。但在 JavaScript 中动态生成 URL 以确保其在不同环境下保持基路径兼容时，它仍是一个可靠的工具。