ブログ

Astroのファイル内でトップページとそれ以外で条件分岐する方法

2024.07.21

WordPressのis_front_page()のように、.astroファイル内でトップページとそれ以外のページで条件分岐する方法を解説しています。

フロントマター内で使用できるAstro.url.pathnameを利用することで、現在開いているページのパスの情報を取得することができます。

トップページだけ要素を表示する

---
const isIndexPage = Astro.url.pathname === "/";
---

{isIndexPage && <p>トップページで表示する要素</p>}

トップページ以外で要素を表示する

---
const isIndexPage = Astro.url.pathname === "/";
---

{!isIndexPage && <p>トップページ以外で表示する要素</p>}

トップページのロゴだけタグをh1にする

サイトによってはトップページのロゴを<h1>タグにし、下層ページでは<div>タグにすることがあると思います。その場合は次のようにするとうまくいきます。

---
const isIndexPage = Astro.url.pathname === "/";
const Tag = isIndexPage ? "h1" : "div";
---

<header>
  <Tag>ロゴ</Tag>
  <nav>
    <ul>
      <li>...</li>
    </ul>
  </nav>
</header>

他にもAstro.url.pathnameを使用することでトップページだけでなく、パスに応じて個別にページ単位で条件分岐をすることが可能です。