自定义组件

Methanol 自动加载 components/ 目录下的组件，并使其在所有 MDX 页面中全局可用。鉴于组件由 rEFui 渲染，开发者可直接调用 rEFui 的 JSX 运行时及相关 API。

组件加载机制

支持 .jsx / .tsx / .js / .ts
组件名与文件名保持一致
若遇同名冲突，用户自定义组件优先级高于主题组件

示例：

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

客户端专用组件

若组件依赖浏览器特有 API，请使用 .client 后缀。

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>