【日記】Gatsbyの勉強⑥
前回の続き。gatsby newで作成されるページにgatsby-starter-default-i18nのソースを取り込んで色々試してみたけど、わからなかったので結局言語ごとのファイルのリンク情報を直接修正することに。
index.jp.js → page2.jp.jsの場合はこんな感じに。この部分を書き換えずにうまくルーティングしてくれる方法があれば良かったんだけど見つからなかった（ご存じの方がいればコメントで教えて下さい） 。
<Link to="/page2/">page2</Link>
↓
<Link to="/jp/page2/">page2</Link>
検証していた際の不明点のメモ。
react-helmetってなに？
headタグを管理するコンポーネントらしい。
react-intlのaddLocaleData
react-intlでググって調べるとどのサイトも大体これを使っているんだけど、廃止になっているみたい。
言語毎の設定ファイルをyamlで構造的に管理
Test:
msg: メッセージ
というようなyamlを用意して、
<FormattedMessage id="Test.msg"/>
というような形で呼び出したい。
・yaml-flat-loaderを導入
・GatsbyのWebpackの設定変更
でいけそうかな。
yaml-flat-loaderの導入は、npmでサクッと。
問題は、Webpackの設定の方かな。
To add custom webpack configurations, create (if there’s not one already) a gatsby-node.js file in your root directory. Inside this file, export a function called onCreateWebpackConfig.
ということなので、gatsby-node.jsをこんな感じに修正。
import messages from '../data/messages/jp.yml'
でyamlをjsonで読み込んで、読み込んだ情報をIntlProviderのmessagesに渡せばうまくいきました。
あと、検証していく際にVS Codeを色々とカスタマイズしました。
VS Codeもまだなれていないので、色々試して慣れていきたい。
vs codeで言語ごとのタブ設定
javascriptのタブ設定を4→2に変更
vs codeでgatsbyのデバッグ
これでchromeでデバッグできるようになりました。とても便利！