自定义组件

Methanol 会加载 components/ 目录下的组件，并使其在每个 MDX 文件中可用。组件使用 rEFui 进行渲染，因此在构建自定义 UI 时，你可以依赖其 JSX 运行时和 API。

组件发现

支持的文件扩展名：.jsx, .tsx, .js, .ts。
文件名即为组件名。
用户自定义组件会覆盖同名的主题组件。

示例：

components/
  Callout.jsx
  Hero.client.jsx
  Toc.static.jsx

客户端组件

使用 .client 后缀标记仅在客户端运行的组件。这对于依赖浏览器 API 的组件非常有用。

components/ThemeSearch.client.jsx

静态组件

使用 .static 后缀标记应在构建时求值的组件。

如果客户端组件没有对应的服务端/静态副本，Methanol 会尝试静态渲染该客户端组件。如果客户端组件使用了仅限浏览器的 API，则必须提供相应的静态组件以供服务端渲染。

components/Notice.static.jsx

定义与使用

// components/Callout.jsx
export default function Callout({ title }, ...children) {
	return (
		<div class="callout">
			<strong>{title}</strong>
			<div>{...children}</div>
		</div>
	)
}

<Callout title="Tip">
  保持段落简短，以便于快速浏览。
</Callout>