Closed8
gatsbyでブログを作る
ブログを作りたい
noteやzenn,pixivfanboxなど様々なものを利用しているが、すべてを集約しつつ、ブログを作成したい。
公開先
技術の選定
- Gatsby.js
- Netlify
Gastbyのfaviconを変える
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の分がたつきが生じた
タグ機能に対して絵文字を設定したい
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
参考にしたもの
Tailwindを導入する
このスクラップは2021/03/23にクローズされました
作成者以外のコメントは許可されていません