2020-04-21

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

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

はじめに

2021/09/22: この記事は改修以前のデザインに関する記事ではあるが、現在のデザインにも一部採用されている。

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

サンプル

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

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

設定出来る項目

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

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

CSSフレームワーク

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

※2021/12/08：現在はMaterial-Uiでデザインし直されている。

コード

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

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

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

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

このようなプルダウンメニューは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/に用意した。サイズはBULMAの is-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>