ページ専用のスクリプトとスタイル

Methanol は、ページ専用のアセット読み込み機能を標準搭載しています。MDX ページファイルと同じディレクトリにある同名のスクリプトおよびスタイルファイルを自動的に検出し、そのページ専用のアセットとして読み込みます。

仕組みと動作

以下のようなファイル構成を例に説明します。

pages/
  guide/
    components.mdx
    components.css
    components.js

/guide/components ルートがレンダリングされる際、components.css と components.js がそのページの <head> セクションに自動的に挿入されます。

スタイル:

スクリプト:

pages/
  about.mdx
  about.css
  about.ts

この例では、about.css と about.ts は /about ページでのみ読み込まれます。

パスの解決: これらのアセットは、対象のページファイルが存在するディレクトリを起点に解決されます。
グローバルアセット: プロジェクト全体に適用されるグローバルアセット（pages/style.css や pages/index.js など）は、ページ専用アセットとは別に、すべてのページで引き続き読み込まれます。