💻

GatsbyJSで作っているブログに月別/年別アーカイブページを追加した

2020-02-18

モチベーション

  • 月ごと、年ごとに何記事書いたかを把握したかった
  • よくあるブログの機能を実現してみたかった

やったこと

  • 基本的に生成される系のページは、gatsby-node.js内でGraphQLで条件を指定して記事を取得し、テンプレートに当てはめて作成していく流れになる
  • 自分なりにリファクタを少し加えたり、テンプレートを置き換えたりしたが、基本的に下記の記事を参考に作成した

サンプル

おわりに

  • アーカイブページを作成しただけなので、フッターなどに配置する用の各アーカイブページへのリンクを生成するコンポーネントを作成する必要があるのだが、そちらはまた別の機会に実装する
  • この辺のページの生成ロジックとリンク集のコンポーネントはプラグインになってても良い気もした

キクナントカ

ソフトウェアエンジニアをしています。Flutter、Rails、GatsbyJSを主に触っています。趣味でボードゲームを制作したり、個人開発したりしています。詳しくはこちら