謎の技術研究部ホームタグ謎の技術研究部とはTop›プログラミング›Gatsby.js2020-04-21【BLOG】著者を表示するように変更【Gatsby.js】BLOG記事下部に著者が表示されるようにアップデートした。この記事は改修以前のデザインに関する記事ではあるが、現在のデザインにも一部採用されている。裏で著者設定がしてあるにもかかわらず表示していないためBLOGに著者表示機能を実装することにした。著者の詳細ツイッターアカウントこれ以外の項目も必要になればすぐに実装できるよう考慮した。CSSフレームワークこのBLOG全体がBULMAのフレームワークで出来ているためデザインはそれに準拠する。※2021/12/08:現在はMaterial-Uiでデザインし直されている。コードgatsby-config.jsに著者情報を入れた。"当BLOGのオーナー。"仮想通貨のシステムトレードに役立つ情報を配信中。どんな情報を流しても詰まらないトイレ。当BLOGのメインライター。GraphQLクエリを上記の体裁に合わせて変更する。表記が違うとエラーになるので気をつけたい。CMSの画面にてAuthorが選択できるようにしてある。初めから設定ファイルに著者名が列挙してあるのでプルダウンメニューから選択するだけでよい仕様とした。変更することにより入力項目を増やしている。optionsという箇所がその設定だ。}ここで直接ユーザーを指定。GraphQLではハイフンが使用できないので注意。ツイッターのIDも同じ仕様なのでユーザーIDの代わりにTwitterIDを使用した。mdファイル中に記述してあるデータが入ってくる。descriptionを取得。static/img/author_icons/に用意した。過去記事で著者無しになることも考慮した。慣れないデザインを除いてこれぐらいの改変であればすぐ終わるが、やはりGatsby.jsはコード修正が何箇所にも及ぶので分かりにくい。この記事は自身の備忘録としても機能しそうだ。将来的に楽になっていくのだろうか。仮想トイレプログラミングや仮想通貨のシステムトレードに関する情報を発信中。どんな情報を流しても詰まらないトイレ。謎の技術研究部とはプライバシーポリシーホーム(自動スクロールなし)ご意見、お問い合わせ。