Gatsbyのカスタマイズ - マークダウン記事の目次表示
gatsby-transformer-remark の機能を利用して、マークダウンで記述した記事に、目次が自動的に表示されるようにする。目次は記事の冒頭だけでなく、サイドバーにもスティッキー(固定)に表示されるようにして、閲覧性を更に高めたい。設定時の注意点やレイアウトの乱れに対する対応策も説明する。
gatsby-transformer-remark の機能を利用して、マークダウンで記述した記事に、目次が自動的に表示されるようにする。目次は記事の冒頭だけでなく、サイドバーにもスティッキー(固定)に表示されるようにして、閲覧性を更に高めたい。設定時の注意点やレイアウトの乱れに対する対応策も説明する。
React-Bootstrap を用いて、モバイルファーストに特化した Gatsby Starter Blog に対して、レスポンシブ対応したナビゲーションメニューと2カラムレイアウトを設置する。サイドバーに設置するタグ一覧のウィジェットも作成する。
Gatsby Starter Blog ほぼそのままの状態から、視覚的カスタマイズを行う準備として、React-Bootstrap を適用して基盤を整える。全体の行間やマークダウン記事のスタイリングなどの調整も行う。