ソーシャルリンクを追加する

flabaka

gatsby-starter-blogは、gatsby-config.js>siteMetadata>social>twitterの箇所に自分のid名を設定することで、twitterへのリンク設定が簡単に出来るようになっています。

ソーシャルリンクを追加する

twitterだけではなく、他のソーシャルリンク(githubなど)を追加するには、どうすればいいのか?

siteMetadata: {
    (略)
    social: {
      twitter: `twitterのid名`,
      github: `githubのid`,

上記の様にgatsby-config.jsに追記。

次にリンクを表示させたいファイル内(bio.jsなど)のQuery内にも、githubの記述を追記

site {
        siteMetadata {
          social {
            twitter
            github

あとはbio.jsのreturn内で、以下の様にリンク設定をしてあげれば良さそうです。

<li><a href={`https://github.com/${social.github}`}>{author.name}</a></li>

Theme Conventions(GatsbyJSドキュメント)

上記ページ内にも、書かれていました。


© 2021 flabaka.com