Astroで現在のページリンクを取得する方法

  • 525単語
  • 3分
  • 07 Aug, 2024

Astroでは、現在のページのアドレスを取得する必要がある場合があります。これにより、リダイレクトやその他の処理を行うことができます。Astroはこの目的を達成するために便利なツールとグローバル変数を提供しています。

Astro.url.pathname を使用する

Astroは Astro.url.pathname というグローバルオブジェクトを提供しており、現在のリクエストのURLパスを含んでいます。これをページコンポーネント内で使用して、現在のページのリンクを取得できます。例えば:

1
---
2
import { Astro } from "astro";
3
const currentPath = Astro.url.pathname;
4
---
5
6
<!doctype html>
7
<html lang="en">
8
<head>
9
<meta charset="UTF-8" />
10
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11
<title>My Astro Blog</title>
12
</head>
13
<body>
14
<h1>私のブログへようこそ</h1>
15
<p>現在のページリンク: {currentPath}</p>
16
</body>
17
</html>

Astro.request.url を使用する

別の方法として、Astro.request.url を使用して現在のページの完全なURLを取得することができます。これは完全なURLが必要な場合に非常に便利です。例えば:

1
---
2
import { Astro } from "astro";
3
const currentUrl = Astro.request.url;
4
---
5
6
<!doctype html>
7
<html lang="en">
8
<head>
9
<meta charset="UTF-8" />
10
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11
<title>My Astro Blog</title>
12
</head>
13
<body>
14
<h1>私のブログへようこそ</h1>
15
<p>現在のページ完全URL: {currentUrl}</p>
16
</body>
17
</html>

Frontmatter の slug を使用する

AstroはMarkdownから生成されたページに slug パス情報を提供しています。これを利用してページリンクを構築することができます。例えば:

1
---
2
title: "私のブログ記事"
3
---

ページコンポーネント内で、次のように使用できます:

1
---
2
import { Astro } from "astro";
3
const { slug } = Astro.props;
4
const currentPath = `/posts/${slug}`;
5
---
6
7
<!doctype html>
8
<html lang="en">
9
<head>
10
<meta charset="UTF-8" />
11
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
12
<title>My Astro Blog</title>
13
</head>
14
<body>
15
<h1>私のブログへようこそ</h1>
16
<p>現在のページパス: {currentPath}</p>
17
</body>
18
</html>

結論

Astroで現在のページリンクを取得する方法は、利用するニーズに応じて異なる選択肢があります。Astroが提供するグローバルオブジェクトを使用する方法や、Frontmatterに含まれる情報を利用する方法のいずれも、生成されたページで現在のURL情報にアクセスするのに役立ちます。