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

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 など）は、引き続きすべてのページで読み込まれます。