カスタムスニペットの作成
前提条件: スニペットファイルは snippets ディレクトリに作成する必要があります。
snippets ディレクトリ内のページはすべてスニペットとして扱われ、単独のページとしてはレンダリングされません。スニペットから単独のページを作成したい場合は、そのスニペットを別のファイルにインポートし、コンポーネントとして呼び出してください。
デフォルトエクスポート (Default export)
- 複数の場所で再利用したいコンテンツをスニペットファイルに追加します。必要に応じて、スニペットをインポートする際にプロパティ（props）を介して入力できる変数を追加することもできます。
こんにちは！これはページ間で再利用したいコンテンツです。今日のキーワードは {word} です。
インポートを機能させるには、再利用したいコンテンツが snippets ディレクトリ内にある必要があります。
- インポート先のファイルにスニペットをインポートします。
---
title: マイタイトル
description: マイ説明
---
import MySnippet from '/snippets/path/to/my-snippet.mdx';
## ヘッダー
Lorem impsum dolor sit amet.
<MySnippet word="バナナ" />
再利用可能な変数
- スニペットファイルから変数をエクスポートします：
snippets/path/to/custom-variables.mdx
export const myName = '私の名前';
export const myObject = { fruit: 'イチゴ' };
- インポート先のファイルからスニペットをインポートし、変数を使用します：
---
title: マイタイトル
description: マイ説明
---
import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';
こんにちは、私の名前は {myName} で、好きな果物は {myObject.fruit} です。
再利用可能なコンポーネント
- スニペットファイル内で、コンポーネントをアロー関数の形式でエクスポートすることで、プロパティを受け取るコンポーネントを作成します。
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (
<div>
<h1>{title}</h1>
<p>... スニペットのコンテンツ ...</p>
</div>
);
アロー関数の本体内では MDX はコンパイルされません。可能な限り HTML 構文を使用するか、MDX を使用する必要がある場合はデフォルトエクスポートを使用してください。
- インポート先のファイルにスニペットをインポートし、プロパティを渡します。
---
title: マイタイトル
description: マイ説明
---
import { MyComponent } from '/snippets/custom-component.mdx';
Lorem ipsum dolor sit amet.
<MyComponent title={'カスタムタイトル'} />
