ブログを作りたい

noteやzenn,pixivfanboxなど様々なものを利用しているが、すべてを集約しつつ、ブログを作成したい。

公開先

https://yukyu-blog.netlify.app/

yukyu 2021/02/14

技術の選定

Gatsby.js
Netlify

yukyu 2021/02/14

yukyu 2021/02/18

Gastbyのfaviconを変える

yukyu 2021/02/18に更新

yukyu 2021/02/20に更新

Twemojiの読み込みによる、がたつきをなくす

ページを読み込む際に絵文字があとから読み込まれガタつく問題を直す

react-emoji-renderをつかう

インストール方法や使用方法などはGithubに書かれていますが、一応紹介します

インストール

npm install react-emoji-render

使用方法

import { Twemoji } from 'react-emoji-render'
...省略
<div className="emoji-warpper">
  <Twemoji svg text="🥰" />
</div>

marginやpaddingはemoji-warpperに設定すると、読み込み時のがたつきが生まれない。
Twemojiにmarginやpaddingを設定するとmarginやpaddingの分がたつきが生じた

yukyu 2021/02/20に更新

タグ機能に対して絵文字を設定したい

thinkingなら🤔をカテゴリ名と一緒に表示
以下の画像の上部のようにする

tagと絵文字を対応づけるためにyamlファイルを作成する

src/yaml/tags.yaml

- name: myself
  emoji: 🙋‍♂️
- name: thinking
  emoji: 🤔
- name: shopping
  emoji: 🛒

gatsby-transformer-yamlをインストール

以下の公式ドキュメントを参考にyamlを読み込めるように設定を行う

私の場合はこんな感じになりました

gastby-config.js

plugins: [
    `gatsby-transformer-yaml`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/yaml/`, 
      },
    },

yamlから取得して、表示

src/components/tag-list.js

const TagList =() => {
    const data = useStaticQuery(graphql`
        query {
            allTagsYaml {
                nodes {
                name
                emoji
                }
            }
        }
    `)
    const Tags = data.allTagsYaml.nodes
    return(
        <ul className="tag-list">
            {Tags.map(tag => (
                <li className="tag-list-item"  key={tag.name}>
                    <Link  to={`/tags/${_.kebabCase(tag.name)}/`}>
                        <div className="tag-list-emoji emoji-warpper">
                        <Twemoji svg text={tag.emoji} className="emoji-s"/>
                        </div>
                        <p>{tag.name}</p>
                    </Link>
                </li>
            ))}
        </ul>
    )
}

export default TagList

参考にしたもの

yukyu 2021/02/25に更新

gatsbyでブログを作る