設定
Methanol は、プロジェクトのルートにある以下の設定ファイルを自動的にスキャンします。
methanol.config.{js,mjs,cjs,ts,jsx,tsx,mts,cts}
設定ファイルが存在しない場合、カレントディレクトリを基準としたデフォルトの構成仕様が適用されます。
設定ファイルの基本構造
設定ファイルは、構築コンテキストを受け取り設定オブジェクトを返す関数を export する必要があります。
export default ({ mode, root, HTMLRenderer }) => ({
// 各種設定値
})
コンテキストプロパティの説明:
mode:developmentまたはproductionroot: プロジェクトのルートパスHTMLRenderer: rEFui の HTML ユーティリティ(rawHTML、serializeなど)
主要なオプション設定
root
プロジェクトの基準となるディレクトリ。デフォルトはカレントディレクトリ(CWD)です。
site
テンプレート内で参照されるサイトのメタ情報。
site.name: サイトのタイトルsite.logo: ロゴファイルへのパス(文字列)、またはfalse(デフォルトテーマで非表示にする場合)site.favicon: ファビコンへのパス(文字列)、またはfalse(デフォルトテーマで非表示にする場合)site.base: サブパス配信時のベースパス(例:'/docs/')site.repoBase: ソースリポジトリのベース URL。デフォルトテーマの「Edit this page」リンクの生成に使用されます。
注意点:
site.baseは、自動的に先頭と末尾に/を含む形式に正規化されます(例:docs→'/docs/')。vite.baseを明示的に指定しない限り、site.baseの値が Vite のbaseパスとしても使用されます。- 開発モード(
methanol dev)ではsite.baseの設定は無視され、常に/(ルート)として扱われます。サブパス配信の動作を確認するには、build実行後にserveコマンドを使用してください。
pagefind
Pagefind 全文検索の有効化および設定。デフォルト: false。
pagefind: false
// または
pagefind: { enabled: true }
// または詳細設定
pagefind: {
enabled: true,
excerptLength: 30,
build: {
outputSubdir: 'pagefind',
verbose: true
}
}
注意点:
enabledおよびbuild以外のキーは、Pagefind JS のoptions()に直接渡されます。buildオブジェクトはビルド時専用の構成エントリです。
starryNight
構文ハイライト(rehype-starry-night)の制御。デフォルト: false。
starryNight: false
// または
starryNight: true
// または詳細設定
starryNight: {
// rehype-starry-night に渡されるオプション
}
starryNightプロパティがオブジェクトの場合、enabled: falseが明示されない限り機能が有効になります。- 各ページのフロントマターで設定された
starryNightの値が常に最優先されます。 - CLI の
--code-highlightingフラグにより、実行ごとにグローバル設定を切り替えることが可能です。
gfm
GitHub Flavored Markdown (GFM) の有効/無効設定。デフォルト: true。
有効な場合、GFM 特有の記法(テーブル、タスクリスト、取り消し線、脚注、自動リンクなど)がフルサポートされます。
gfm: true
// または
gfm: false
pagesDir
MDX/MD ソースファイルの配置ディレクトリ。デフォルトは pages です。pages/ が存在しない場合は、自動的に docs をスキャンします。
componentsDir
JSX/TSX コンポーネントの配置ディレクトリ。デフォルトは components です。
pagesDir や componentsDir を明示的に指定(CLI 引数を含む)した場合、対象のディレクトリが存在しないとビルドエラーとなります。
publicDir
静的アセットの配置ディレクトリ(サイトルート直下で配信されます。例: public/foo.png → /foo.png)。デフォルトは public です。
Methanol は、テーマ側の静的アセット(theme.publicDir)も同時に統合します。ユーザープロジェクト側のファイルと同名のパスが衝突した場合は、ユーザー側のファイルが優先的に適用されます。
統合が必要な際、内部的な作業ディレクトリとして node_modules/.methanol/assets(node_modules/ がない場合は {pagesDir}/.methanol/assets)が一時的に構築されます。
publicDir: false を設定すると、テーマ側のアセットを含め、静的アセットの配信機能が完全に無効化されます。
distDir
本番環境用ビルド成果物の出力先。デフォルトは dist です。
buildDir
ビルド時の中間作業用ディレクトリ(emitIntermediate 用)。デフォルトは build です。
emitIntermediate
true に設定すると、ビルド実行時に build/ ディレクトリへレンダリング後の中間 HTML ファイルを出力します。
theme
テーマに関する詳細設定。詳細は アドバンスド・テーマ を参照してください。
主要なフィールド:
theme.root: テーマのルートディレクトリ(必須設定)。theme.template: HTML テンプレート関数({ ctx, PageContent, ExtraHead, withBase, HTMLRenderer, components }を引数に取ります)。theme.components: テーマ標準の MDX コンポーネント定義。theme.componentsDir: テーマ固有のコンポーネントディレクトリ。theme.pagesDir: テーマ同梱のページディレクトリ。theme.publicDir: テーマ同梱の静的アセット。theme.sources: 仮想パスを物理ファイルにマッピングするための定義。theme.mdx: ユーザー設定とマージされるテーマ標準の MDX オプション。theme.vite: ユーザー設定とマージされるテーマ標準の Vite 設定。
mdx
MDX のコンパイル設定をカスタマイズします。{ mode, root } を引数として受け取ります。
vite
Vite の設定を詳細にマージします。{ command, mode, root, isPreview } を引数として受け取ります。
preBuild / preBundle / postBundle / postBuild
ビルド一連のプロセスにフックを挿入するための設定です。
preBuild: 開発サーバーの起動時、およびビルドプロセスの開始前に実行されます。preBundle: ビルド時のみ実行され、ページレンダリングの完了後かつ Vite バンドル実行前に呼び出されます。postBundle: ビルド時のみ実行され、Vite バンドル完了後かつ Pagefind インデックス生成前に呼び出されます。postBuild: ビルドプロセス全体の完了後にのみ実行されます(開発サーバーでは実行されません)。
いずれも単一の関数、または関数の配列を指定可能です。
フックコンテキストの主要なプロパティ:
mode,root,command,isDev,isBuild,isPreviewHTMLRenderersite(設定オブジェクトのsiteプロパティ)data: フック間で永続的にデータを共有するための可変オブジェクト
CLI による設定の上書きルール
コマンドライン引数で渡された値は、常に設定ファイルの値よりも優先されます。
--inputおよび--components: それぞれpagesDirとcomponentsDirを上書きします。--assets:publicDirを上書きします。--output:distDirを上書きします。--site-name:site.nameを上書きします。--base: 実行時のsite.baseを一時的に上書きします。-v/--verbose: 詳細なログ出力を有効化します。--config: 使用する設定ファイルのパスを指定します。- 位置引数としての
input/outputは、--input/--outputフラグと同等の動作をします。
設定ファイルの記述例
import tailwindcss from '@tailwindcss/vite'
export default ({ mode }) => ({
site: { name: 'My Docs' },
theme: {
root: '.',
template: ({ PageContent, ExtraHead, ctx, withBase, HTMLRenderer, components }) => (
<>
{HTMLRenderer.rawHTML`<!doctype html>`}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<ExtraHead />
<title>{ctx.page.title || ctx.site.name}</title>
<link rel="icon" href="/favicon.png" />
</head>
<body>
{components.Callout ? <components.Callout>Hi</components.Callout> : null}
<PageContent />
</body>
</html>
</>
),
components: {
Callout: ({ children }) => <div class="callout">{children}</div>
}
},
mdx: () => ({
development: mode !== 'production'
}),
vite: () => ({
server: { port: 5173 },
plugins: [tailwindcss()]
})
})