Astroで現在のページリンクを取得する方法
- 525単語
- 3分
- 07 Aug, 2024
Astroでは、現在のページのアドレスを取得する必要がある場合があります。これにより、リダイレクトやその他の処理を行うことができます。Astroはこの目的を達成するために便利なツールとグローバル変数を提供しています。
Astro.url.pathname
を使用する
Astroは Astro.url.pathname
というグローバルオブジェクトを提供しており、現在のリクエストのURLパスを含んでいます。これをページコンポーネント内で使用して、現在のページのリンクを取得できます。例えば:
1---2import { Astro } from "astro";3const 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---2import { Astro } from "astro";3const 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---2title: "私のブログ記事"3---
ページコンポーネント内で、次のように使用できます:
1---2import { Astro } from "astro";3const { slug } = Astro.props;4const 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情報にアクセスするのに役立ちます。