Gatsby Theme Aoi でメニューを設定する

Gatsby Theme Aoi の Aoi レイアウト内にサイトコンテンツのメニューを設定する方法を説明します。Gatsby テーマの Shadowing という機能を使いますが、今はまだ Shadowing を理解する必要はありません。

Menu ファイルを作成

Gatsby プロジェクトの src ディレクトリに、@cieloazul310/gatsby-theme-aoi-layout というディレクトリを作成し、menu.tsx を作成します。Gatsby Theme Aoi のスターターを使っている場合は既にファイルが存在しているはずです。

mkdir -p src/@cieloazul310/gatsby-theme-aoi-layout
touch src/@cieloazul310/gatsby-theme-aoi-layout/menu.tsx

Gatsby プロジェクトは以下のような構成になります。

.
├── gatsby-config.js
├── package.json
└── src
    ├── @cieloazul310
    │   └── gatsby-theme-aoi-layout
    │       └── menu.tsx
    └── pages
        ├── 404.tsx
        ├── index.tsx
        └── page-2.tsx

Menu ファイルの中身

以下は作成した ./src/@cieloazul310/gatsby-theme-aoi-layout/menu.tsx の例です。

embed:ExampleCode-1.tsx

これは実際にこのサイトで使われている menu.tsx です。 title, path, icon というプロパティを持つオブジェクトの配列を作成し、デフォルトエクスポートすることで、Aoi レイアウト内のメニューコンポーネントに反映することができます。

Shadowing 第一歩

これは Gatsby テーマの Shadowing という機能を使っています。 Shadowing とは、node_modules にインストールされている特定のパッケージの src ディレクトリに含まれるファイルを独自の実装に置き換えることです。

今回の例では、
./src/@cieloazul310/gatsby-theme-aoi-layout/menu.tsx
というファイルが、
./node_modules/@cieloazul310/gatsby-theme-aoi-layout/src/menu.tsx
として機能しています。

@cieloazul310/gatsby-theme-aoi-layout というパッケージは、@cieloazul310/gatsby-theme-aoi に含まれている