【BLOG】著者を表示するように変更【Gatsby.js】

April 21, 2020

BLOG記事下部に著者が表示されるようにアップデートした。

logo

はじめに

もしかしたらBLOG著者が増えるかもしれない & もともと裏で著者設定がしてあるにもかかわらず表示していないためBLOGに著者表示機能を実装することにした。

サンプル

  • 著者が設定されていない場合

no author

  • 著者が設定されている場合

author: kaso toilet

設定出来る項目

  • 表示名
  • 著者の詳細
  • ツイッターアカウント

これ以外の項目も必要になればすぐに実装できるよう考慮した。

CSSフレームワーク

このBLOG全体がBULMAのフレームワークで出来ているためデザインはそれに準拠する。

コード

gatsby-config.jsに著者情報を入れた。

module.exports = {    
    authors: { 
      Neve1074: {
        name: "Ultra-Noob",
        author_name: "Ultra-Noob",
        twitter: "Neve1074",
        description: "当BLOGのオーナー。元DTMer。",
      },
      CrypticToilet: {
        name: "Cryptic-Toilet",
        author_name: "仮想トイレ",
        twitter: "CrypticToilet",
        description: "仮想通貨のシステムトレードに役立つ情報を配信中。どんな情報を流しても詰まらないトイレ。当BLOGのメインライター。",
      }
    }

GraphQLで宣言

SiteMetadata.js のGraphQLクエリを上記の体裁に合わせて変更する。

  const { site } = useStaticQuery(
    graphql`
      query SITE_METADATA_QUERY {
        site {
          siteMetadata {
            title
            description
            authors {
              Neve1074 {
                name
                author_name
                twitter
                description
              }
              CrypticToilet {
                name
                author_name
                twitter
                description
              }
            }

これを忘れる or 表記が違うとエラーになるので気をつけたい。

GraphQLの注意

  • gatsby-configsiteMetadataには配列が使用できない(他に方法がある?)
  • 上記の通り連想配列は指定できるが、キー名をID番号のような数字にすることは出来ない(文字としてダブルクォーテーションで囲っても何故かエラーになる)

記事作成時に著者を選択できるように

Netlify CMSの画面にてAuthorが選択できるようにしてある。

初めから設定ファイルに著者名が列挙してあるのでプルダウンメニューから選択するだけでよい仕様とした。

author sentaku

このようなプルダウンメニューはNetlify CMSの設定ファイル static/admin/config.yml を変更することにより入力項目を増やしている。optionsという箇所がその設定だ。

- {label: "Author", name: "author", widget: "select", options: ["Neve1074", "CrypticToilet"] }

ここで直接ユーザーを指定。GraphQLではハイフンが使用できないので注意。丁度ツイッターのIDも同じ仕様なのでユーザーIDの代わりにTwitterIDを使用した。

BLOG記事のコード

data にmdファイル中に記述してあるデータが入ってくる。つまり上のyamlで設定した通り data.author にIDが入っている。

SiteMetadata の中から data.author を探してname, twitter, descriptionを取得。

    const { authors } = useSiteMetadata()
    
    // 著者データ取得
    // アイコンデータはstatic/img/author_icons/ツイッターアカウント.jpg
    let author = {
        name: "著者情報なし",
        twitter: "no_account",
        description: "詳細不明"
    }
    for(const key in authors){
        if(key === data.author){
            author.name = authors[key].author_name
            author.twitter = authors[key].twitter
            author.description = authors[key].description
        }
    }

HTML部(JSX)

アイコン画像は static/img/author_icons/に用意した。サイズはBULMAis-64x64 により自動変換。FontAwesomeでTwitteのアイコンを取得している(本記事では解説しない)

            <div className="container">
                <div className="media">
                    <figure className="media-left">
                        <p className="image is-64x64">
                            <img src={"/img/author_icons/" + author.twitter + ".jpg"} alt="author icon"/>
                        </p>
                    </figure>
                    <div className="media-content">
                        <div className="content">
                            <p>
                                <strong>{author.name}</strong> <small><a href={ author.twitter !== "no_account" ?
                                    "https://twitter.com/" + author.twitter
                                    :
                                    "#"
                                    }>@{author.twitter}</a></small>
                                <br />
                                {author.description}
                        </p>
                        </div>
                        <nav className="level is-mobile">
                            <div className="level-left">
                                <a className="level-item" href={"https://twitter.com/" + author.twitter}>
                                    <span className="icon is-small"><FontAwesomeIcon icon={faTwitter} /></span>
                                </a>                                
                            </div>
                        </nav>
                    </div>
                </div>
            </div>

記事作成時にAuthorは強制的に選択するので必ずどちらかになるが、なんらかの変更 or 過去記事で著者無しになることも考慮した。

所感

慣れないデザインを除いてこれぐらいの改変であればすぐ終わるが、やはりGatsby.jsはコード修正が何箇所にも及ぶので分かりにくい。この記事は自身の備忘録としても機能しそうだ。

将来的に楽になっていくのだろうか。

この記事をシェア:

author icon

仮想トイレ @CrypticToilet
プログラミングや仮想通貨のシステムトレードに関する情報を更新中!どんな情報を流しても詰まらないトイレ。