Gatsbyテーマをカスタマイズする
2020年05月22日
Gatsby サイトにテーマを使って機能を追加することはよくあります。
ただテーマはスターターとは違い、実装のコードはアプリ内にはなく npm でインストールします。
それではどのようにカスタマイズするのでしょうか？
テーマをカスタマイズする最も簡単な方法は、
テーマが提供しているオプションを指定することです。
たとえばgatsby-theme-blogというテーマでは、以下のようなオプションを指定できます。
| Key | Default value | Description |
|---|---|---|
basePath | / | ブログ記事のルート URL を指定できる |
contentPath | content/posts | ブログ記事ファイルを置くパスを指定 |
assetPath | content/assets | アセットファイルを置くパスを指定 |
mdxOtherwiseConfigured | false | 既にgatsby-plugin-mdxがサイトで導入されていれば、trueを指定する |
disableThemeUiStyling | false | gatsby-plugin-theme-uiスタイルなしでブログテーマを使用したい場合、trueを指定する |
excerptLength | 140 | 自動生成されるブログ記事の冒頭抜粋の長さ |
webfontURL | '' | 含めたい Web フォントの URL |
ただ、このようにオプションが提供してくれていないものをカスタマイズしたいことがよくあります。 そんなときは「シャドウイング」という方法を使います。
この記事ではシャドウイングについてご紹介します。
また、こちらの記事の続きです。
やりたいこと
Before
今回は BIO を変更したいと思います。
まずは前回の最後の状態。before を御覧ください。
名前が自分の名前ではないので自分の名前に変えたいのと、
かんたんな自己紹介もいれたいですね。
以下から実際のサイトとソースコードも確認できます。
DemoソースコードAfter
名前の変更とかんたんな自己紹介を表示します。
以下から実際のサイトとソースコードも確認できます。
Demoソースコードシャドウイング
シャドウイングは、テーマの src ディレクトリ内のコンポーネント、オブジェクト、その他のものを オーバーライドしてカスタマイズできる機能です。
実・装！！
今回、gatsby-theme-blogというテーマの 2 つのコンポーネントをシャドウイングします。
シャドウイングするために、ファイルパスを把握します。
gatsby-theme-blog└── src└── components├── bio.js└── bio-content.js
これをシャドウイングするためには、自サイトに以下のパスで同名のファイルを作成します。
src└── gatsby-theme-blog└── components├── bio.js└── bio-content.js
BioContent コンポーネントのシャドウイング
レンダリングする内容を、自分の名前とかんたんな自己紹介に変えます。
<>{author}<br />ボディビル好きです。<br />好きなポージングは……ぜんぶです！<br />得意なポージングはアブドミナルアンドサイです💪</>
Bio コンポーネントのシャドウイング
BioContent コンポーネントで、gatsby-config.jsで設定した sitemetadat のauthorを使いたいので、
以下のようにauthorを渡すよう変更します。
- <BioContent />+ <BioContent author={author} />
🙌🙌
このように、オーバーライドしたいファイルを用意するだけなのでテーマは便利ですね！
