メインコンテンツへスキップ

再利用可能なスニペット

One of the core principles of software development is DRY (Don't Repeat Yourself). This is a principle that applies to documentation as well. If you find yourself repeating the same content in multiple places, you should consider creating a custom snippet to keep your content in sync.

カスタムスニペットの作成​

前提条件: スニペットファイルは snippets ディレクトリ内に作成する必要があります。

情報

snippets ディレクトリ内のすべてのページはスニペットとして扱われ、スタンドアロンページとしてレンダリングされません。スニペットからスタンドアロンページを作成したい場合は、スニペットを別のファイルにインポートし、コンポーネントとして呼び出してください。

デフォルトエクスポート​

  1. 複数の場所で再利用したいコンテンツをスニペットファイルに追加します。オプションで、スニペットをインポートする際に props 経由で入力できる変数を追加できます。
Hello world! This is my content I want to reuse across pages. My keyword of the
day is {word}.
警告

再利用したいコンテンツは、インポートが機能するように snippets ディレクトリ内にある必要があります。

  1. スニペットをコピー先のファイルにインポートします。
title: My title
description: My Description

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Header

Lorem impsum dolor sit amet.

<MySnippet word="bananas" />

再利用可能な変数​

  1. スニペットファイルから変数をエクスポートします：
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
  1. コピー先のファイルからスニペットをインポートし、変数を使用します：
title: My title
description: My Description

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Hello, my name is {myName} and I like {myObject.fruit}.

再利用可能なコンポーネント​

  1. スニペットファイル内で、矢印関数の形式でコンポーネントをエクスポートし、props を受け取るようにします。
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... snippet content ...</p>
  </div>
);
警告

MDX は矢印関数の本体内ではコンパイルされません。可能な限り HTML 構文を使用するか、MDX を使用する必要がある場合はデフォルトエクスポートを使用してください。

  1. スニペットをコピー先のファイルにインポートし、props を渡します。
title: My title
description: My Description

import { MyComponent } from '/snippets/custom-component.mdx';

Lorem ipsum dolor sit amet.

<MyComponent title={'Custom title'} />