Gatsbyのカスタマイズ

2021-11-09Gatsbywebsite

Gatsby 関連の記事が増えてきたので、Gatsby のカスタマイズの全貌を整理する。

初期設定

Gatsby Starter Blog でブログサイトを新規作成して、サイト全体の属性情報や日本語対応など初期設定を行う。

Gatsby を選んだ理由と初期設定

マークダウン

数式

KaTeX\KaTeX で数式が記述できるようにする。

Δ(z)=qn=1(1qn)24=n=1τ(n)qn\Delta(z) = q \prod_{n=1}^{\infty} (1 - q^n)^{24} = \sum_{n=1}^{\infty} \tau(n)q^n

Gatsby で数式が正しく表示されない問題の対処法

CSS フレームワークの適用

CSS フレームワークである React-Bootstrap を適用して、この先、見通しよくスピーディーにカスタマイズ出来るように基盤を整える。

Gatsby のカスタマイズ - React-Bootstrap の適用と調整

レイアウト

2 カラムレイアウト

レスポンシブ対応の 2 カラムレイアウトを構成する。

2-Column Layout in Wide Screen

Gatsby のカスタマイズ - ナビゲーションメニューとカラムレイアウト

ナビゲーション

ナビゲーションメニュー

レスポンシブ対応のナビゲーションメニューを設置する。

Navigation Bar in Wide Screen

Gatsby のカスタマイズ - ナビゲーションメニューとカラムレイアウト

マークダウン記事のタグ機能

記事一覧表示と記事の個別表示で、タグが表示されるようにする。

an example of a blog post w/ tags

タグ空間を巡れるように、全てのタグの一覧表示や、特定のタグに関連付けられた記事の一覧が表示できるようにする。

an example of a tag list

Gatsby のカスタマイズ - マークダウン記事のタグ機能

マークダウン記事の目次表示

マークダウンで記述した記事に、目次が自動的に表示されるようにする。

ToC in the Header

目次は記事の冒頭だけでなく、サイドバーにもスティッキー(固定)に表示されるようにして、更なる閲覧性の向上を図る。

ToC in the Sidebar

Gatsby のカスタマイズ - マークダウン記事の目次表示