如何在Astro中获取当前页链接

443字
2分钟
2024-08-07
- Astro

在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>