Gatsbyのフッターへサイト名のリンクを追加する

March 23, 2023

Gatsbyのスターターから作成したブログのフッターへサイト名のリンクを追加する。

フッターを表示しているlayout.jsを修正する

/src/components/layout.jsのfooterタグ記載を修正する。

<footer>
  © {new Date().getFullYear()}, Built with	
  {` `}
  <a href="https://www.gatsbyjs.com">Gatsby</a>
</footer>

もともとの記述を削除し、Linkタグを追加し、toへ"/"を指定する。
{title}の変数を指定することで、サイトのタイトルが表示される。

<footer>
  © {new Date().getFullYear()}
  {` `}
  <Link to="/">{title}</Link>
</footer>

Linkタグは、htmlのaタグに置き換わる。
フッターのリンクの下線の表示を消し、色をテキストと同じカラーへ変更する。
/src/style.cssファイルへフッターリンク用の定義を追加する。
※--color-textは、style.cssファイル内に定義されているテキストのカラー

.footer-link {
  text-decoration: none;
  color: var(--color-text);
}

/src/components/layout.jsのLinkタグにclassNameを追加する。

<footer>
  © {new Date().getFullYear()}
  {` `}
  <Link to="/" className="footer-link">{title}</Link>
</footer>