Webサイト制作において、TOPページとその他のページで表示する内容を変えたい場合がありますね。
例えば、TOPページではロゴをh1タグにしたいが、下層ページではaタグでリンクを設定したいという場面がよくあります。
そこで今回の記事では、AstroでTOPページやその他のページで条件分岐する方法を紹介します。
開発環境のバージョン
当記事で紹介する方法は、以下のバージョンで動作確認を行っています。
検証環境のバージョン情報
バージョンの違いによっては、この記事の通りに動作しない可能性がありますので、ご理解いただけますと幸いです。
AstroでTOPページかどうかを判定する
Astroで現在表示中のページがTOPページかどうかを判定するには、以下のコードを.astroファイル内のフロントマターに記述します。
---
// TOPページならtrue、それ以外ならfalse
const isTopPage = Astro.url.pathname === '/';
---
Astro.url.pathnameは、現在のページのパスを取得できます。
現在のパスが'/' = TOPページとなるので、isTopPageはtrueになります。
反対に、/aboutや/contactなどのパスの場合はfalseになり、その他のページと判定されます。
TOPページでのみ表示する場合
TOPページでのみ表示する場合は、isTopPageがtrueの場合に表示するようにします。
---
const isTopPage = Astro.url.pathname === "/";
---
{
isTopPage && (
<div>TOPページでのみ表示する内容</div>
)
}
TOPページ以外で表示する場合
TOPページ以外で表示する場合は、isTopPageがfalseの場合に表示するようにします。
---
const isTopPage = Astro.url.pathname === "/";
---
{
!isTopPage && (
<div>TOPページ以外で表示する内容</div>
)
}
TOPページとその他のページで表示を分ける場合
TOPページとその他のページで表示する内容を分けたい場合は、以下のように記述します。
---
const isTopPage = Astro.url.pathname === "/";
---
{
isTopPage ? (
<div>TOPページでのみ表示する内容</div>
) : (
<div>TOPページ以外で表示する内容</div>
)
}
【実用例1】TOPページのみロゴをh1タグにする
サイトのヘッダーやフッターに置かれることの多いロゴ画像を、
- TOPページでは
h1タグにしたい - 下層ページでは
aタグにしてTOPページへのリンクを設定したい
という場合がよくありますが、この場合は以下のように記述します。
---
const isTopPage = Astro.url.pathname === "/";
---
<header>
{
isTopPage ? (
<h1>ロゴ</h1>
) : (
<a href="/">ロゴ</a>
)
}
</header>
これでTOPページならロゴはh1タグに、それ以外ではTOPページへと遷移するaタグになります。
【実用例2】TOPページのみプロモーションバナーを表示する
TOPページにはプロモーションバナーを表示し、他のページでは省略する場合は、以下のように記述します。
---
import PromoBanner from '@/components/PromoBanner.astro';
const isTopPage = Astro.url.pathname === '/';
---
{isTopPage && (
<PromoBanner />
)}
<main>
<slot />
</main>
これでTOPページのみ<PromoBanner />コンポーネントが表示され、他のページでは非表示になります。
【まとめ】AstroでTOPページやその他のページで条件分岐する方法
今回の記事では、AstroでTOPページかその他のページかどうかを判定し、条件分岐する方法を紹介しました。
---
// TOPページならtrue、それ以外ならfalse
const isTopPage = Astro.url.pathname === '/';
---
Astro.url.pathnameで現在のページのパスを取得し、'/'ならTOPページ、それ以外ならその他のページと判定することで条件分岐しています。
もしTOPページとその他のページで表示を分ける必要がある場合は、ぜひ参考にしてみてください。
また、今回使用したAstro.urlオブジェクトに関しては以下の記事で詳しく解説していますので、併せてご覧いただければと思います。
