記事にタグを付けられるようにした

2020/12/01

Gatsby で作っている当ブログで、記事にタグを付けられるようにした。

このサイトでは gatsby-transformer-remark というプラグインを使って Markdown をパースしているが、gatsby-transformer-remark を利用すると Front Matter という文書のメタデータを YAML 形式で追加できる機能が自動的に入っている。 Front Matter に以下のように記すことで、タグを付けられるようにした。

---
tags:
  - design
  - development
---

また、特定のタグが付いた記事を一覧するページを追加した。 試しに Gatsby について書いてある記事に gatsby というタグを付けた。 以下の URL から確認できる。

https://moristapaper/tags/gatsby

このサイトを始めて2年になるが、これまではサイトの見た目の変更しかしてこなかった。 今回の機能追加で、Gatsby のルーティングやページを追加する方法、GraphQLの書き方も触りだけ知ることができた。

ちなみに当ブログでタグの運用をしていくつもりはなく、UI 上の変化は何もない。


morishitter

フリーランスのデザイナー。デジタルプロダクトのUIデザインを中心に、ブランディングからユーザー体験設計、ビジュアルデザインをおこなう。

© 2021, Masaaki Morishita