Gatsuby の gatsby/xxx/src/pages に *.js を作ると、それが自動的にページになるそうな（ルーティングとかどうなってるんだろう？ そこは追々調べるとして…）では、早速やってみましょうか。
まず、折角ページを作るなら、この間 _s でも使った destyle.css を global.css と入れ替えて、ページ毎にスタイルも当ててみよっと。
まずはdestyle.css を global.css と入れ替えてから、gatsby-browser.js を下記の様に書き換え。
import "./src/styles/destyle.css"どうでしょう？
はい。良いですね。取り敢えずページ毎のレイアウト設定を試すので、このページをさっきまての状態にしてみます。
index.js を下記の様に修正。
import React from "react"
import "../styles/index.css"
export default function Home() {
return <div><h1>Hello world! </h1><h3>I am inohide.</h3></div>
}さて、どうでしょうか？
ふんふん。では次に新たなページを作ってみましょう。折角だからお気に入りの Google Fonts を追加しちゃおう。ってあれ？ そういえば head タグはどうやって修正するんだろう？ では公式を確認します。まずは Google Fonts で検索っと。
あったありましたよ「GoogleFontsの使用」うんうん。
Prerequisites
- A Gatsby site
- The Gatsby CLI installed
- Choosing a font package from the typefaces project
typefaces project ? あれっ？何やら Head んトコに link タグ書けば良いとかではないらしいよ。ムムム。もう少し見てみましょう。Google 先生！ 出番です。
を実行し、書体プロジェクトからインストールするフォントの名前に
npm install typeface-your-chosen-font置き換えyour-chosen-fontます。
何やらムムムな訳になってしまいましたが、書体プロジェクトとやらを見てみましょう。google font のリポジトリでした。では早速お目当てのフォントを「packages」の中から探します。あったありましたよ 「fira-sans-extra-condensed」こちらを npm からインストールする様です。
npm install --save typeface-fira-sans-extra-condensedではやってみましょう。
added 1 package, and audited 1894 packages in 3s
found 0 vulnerabilitiesどうやら無事インストール出来た様ですので、早速使ってみましょう。使用方法は公式に次の様に乗っていました（原文英語）
インポートすると、CSSスタイルシート、CSSモジュール、またはCSS-in-JSでフォント名を参照できます。
では早速 import してみましょう。
import React from "react"
import "../styles/second.css"
import "typeface-fira-sans-extra-condensed"
export default function Second() {
return <div><h1>This page is second page</h1><h3>Well, how about?</h3></div>
}さてどうかな？
でやっ！
うんうん。良いですね。
って、あれっ？トップページまで変っちゃてるよ！？
うーん。と、言うことはやっぱりページ単位で当ててるとの思い込みが間違っている様です。挙動だけ見てるとグローバルで当ってるよね。早速調べてみると、どうも import で読み込むだけではグローバルになってしまうようです。
ここで思い違いにようやく気付きます。「静的サイトジェネレーターと言っても、今までのスタティックなページ作りと同じに考えちゃうと、却ってツラミが溜まるだけなのかも。やっぱり Gatsuby のお作法に則った方が良いのでは…」と思い立ち、ひとしきりチュートリアルとガイドをグルグルぐるぐると２周３周して「ページもコンポーネントで作るんやで！」に、ようやく辿り着きました。そりゃそうか React だもんね。
…やっぱり嵌っています Oh..No..
コメント