GatsbyJS + microCMS でブログ構築していた時にやったことの備忘録。
絵文字を使用できるようにする
タイトルのままなのですが先人たちを参考に、トップページの記事一覧のサムネイルと単一記事のアイキャッチに、画像を用意せず絵文字を使うことでなんかそれっぽく見せるようにカスタマイズ。
使用するツール
まずは npm install を。
npm install react-emoji-render
Twemoji が使えるのでTwemojiを使います。
必要なコンポーネント/ページで読み込む。
import { Twemoji } from 'react-emoji-render';
表示させたいところには
<Twemoji
svg
text={emoji || "💻"}
/>
のようにして、emoji
のフィールドが空でもラップトップの絵文字が表示されるように。
GraphQLで情報を取得しようとするとCannot query fieldエラー
コンテンツはmicroCMSで管理しています。フィールドIDはわかりやすく emoji
にしました。記事毎のemoji
の記入は任意。
入力しないと、空の値が発生します。
空の値がある場合にGraphQLで情報を取得しようとすると、エラーでbuildできない。 https://github.com/gatsbyjs/gatsby/issues/2392
解決策はgatsby-node.jsで、emoji
(空の可能性があるフィールド)にスキーマを設定する。
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions
const typeDefs = `
type allMicrocmsPost implements Node {
emoji: String
}
type microcmsPost {
emoji: String
}
`
createTypes(typeDefs)
}
ブロックの中央に絵文字を配置
ブロック内で左右上下中央配置にするためにCSSで次を指定した。
display: flex;
align-items: center;
justify-content: center;
絵文字のサイズを調整
絵文字のサイズ指定はCSSで width, height を指定します。
img{
width:5rem !important;
height:5rem !important;
}
そんな感じ。