初心者による初心者のためのGatsbyJS覚書5（ページを増やす）

10112 ワード
FontAwesome React gatsby 404 404 テキストリンク

この記事について

この記事はGatsbyJS初心者の新卒２年目が作成しています。
参考資料として書籍を使用していますが、筆者がビギナークラスのため読んでいて「？」となる部分や間違っている箇所もあるかと思います。
参考までに、そして間違えている箇所がありましたらご連絡いただけると嬉しいです。

Chapter5：ページを増やす　備忘録メモ

前回作成したlayout.jsを活用してページを増やして行きます。
今回はアバウトページ（about.js）と404ページ（404.js）を作成しました。

アバウトページの作成

今回アバウトページを作成するのに必要な手順は、、、
1.　index.jsをコピーして新規ファイルを作成、中身をアバウトページ用に変更する。
2.　画像を最適化する
3.　Font Awesomeをインストールしてアイコンを表示する
4.　リンクを設定する

とこのような感じで設定していきます。
※手順2に関しては以前の記事で画像の最適化について記載しているので割愛。

index.jsをコピーして新規ファイルを作成、中身をアバウトページ用に変更する。

pages配下にabout.jsを作成して関数の名前をAboutPageに変更。
中身はダウンロード資料のHTMLをJSXへ変換して作成。

import React from "react"
import { StaticImage } from "gatsby-plugin-image"
import Layout from "../components/layout"

const AboutPage = () => (
<Layout>
 //ここにJSX要素を追加
</Layout>
)

export default AboutPage

Font Awesomeをインストールしてアイコンを表示する

まずはパッケージをインストール。

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/react-fontawesome

アイコンのスタイルはフリーで使用できるものをまとめてインストール。

#solid
npm install @fortawesome/free-solid-svg-icons

#regular
npm install @fortawesome/free-regular-svg-icons

#brand
npm install @fortawesome/free-brands-svg-icons

あとはFont Awesomeを使いたいファイルでインポートして使うだけ。
どのアイコンを使うかはFont AwesomeのIconsページで確認できるのでどのスタイルに属してるのかも
併せて確認すると◎
今回はSNSアイコンを使用したいのでこのように記載。

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faTwitter, faFacebookSquare, faInstagram } from "@fortawesome/free-brands-svg-icons"

JSX上でアイコンを表示されるにはこのように記載する。

<li>
 <a href="https://twitter.com/">
   <FontAwesomeIcon icon={faTwitter} />
    <span className="sr-only">Twitter</span>
 </a>
</li>

gatsby developではそこまで気にならないが、デプロイしたサイト上ではロードしたときに
Font Awesomeのアイコンが一瞬大きく表示されてしまうので、Font AwesomeのCSSを先読みさせることでそれを予防。
layout.jsにこのように記載する。

import "@fortawesome/fontawesome-svg-core/styles.css" //Font Awesomeを先読みさせる
import { config } from "@fortawesome/fontawesome-svg-core"　//Font Awesomeのコンポーネント内でCSSを適用させない
config.autoAddCss= false//Font Awesomeのコンポーネント内でCSSを適用させない

リンクを設定する

リンクをつけたいページのファイルで下記をインポート

import { Link } from "gatsby"

JSX内でリンクをつけたいときは

<ul>
 <li><Link to={`/`}>TOP</Link></li>
 <li><Link to={`/about/`}>ABOUT</Link></li>
</ul>

404ページの作成

404ページを作成するのに必要な手順は、、、
1.　index.jsをコピーして新規ファイルを作成、中身をアバウトページ用に変更する。

のみです。

index.jsをコピーして404.jsを作成します。
関数の名前はNotFoundPageとして作成。

import React from "react"
import Layout from "../components/layout"

const NotFoundPage = () => (
<Layout>
<h1 style={{ padding: "20vh 0", textAlign: "center"}}>お探しのページは見つかりませんでした。</h1>   
</Layout>
)

export default NotFoundPage

ファイルを作成し、サーバーを再起動、/abcdeなど存在しないURLにアクセスすると

こんなページが出てくるのでpreviewを押すと、、

簡単に404ページも完成。
gatsby developでは白いページが404ページの前に表示されるがデプロイしたサイトでは直接404ページが表示される。

今回はここまで。
次回はメタデータの設定についてポイントを書いていきたいと思います。