Gatsby.js ブログのサムネイルで絵文字を使う

2021-01-14

目標

記事一覧とブログ記事のトップに画像サムネイルの代わりにTwemojiを用いた絵文字サムネイルをつける。

terminal

npm install react-emoji-render

絵文字TwemojiというTwitterが運営するライブラリを使用する。

記事ごとにそれっぽい絵文字を指定します。フロントマターにemoji項目を追加します。書き忘れた時は💻が自動挿入されます。

article.md

ーーー
title: "Gatsby.js ブログ記事に目次を追加する"
date: "2021-01-14"
tags: ["Gatsby"]
emoji: "🐱"
ーーー

garphQLのクエリでも、frontmatter.emojiを追加します。

の２箇所に追加します。

blogTemplate.js

import { Twemoji } from 'react-emoji-render';
//...
<Twemoji
svg
text={props.data.markdownRemark.frontmatter.emoji || "💻"}
/>

//...

ブログのサムネイルは欲しいけど毎回良い感じの画像を生成するのが面倒だという方にとっては良いアイデアだと思います。