Cómo obtener el enlace de la página actual en Astro

  • 316Palabras
  • 2Minutos
  • 07 Aug, 2024

En Astro, a veces necesitamos obtener la dirección de la página actual para realizar redirecciones u otros procesos. Astro proporciona algunas herramientas y variables globales útiles que pueden ayudarnos a lograr este objetivo.

Usar Astro.url.pathname

Astro ofrece Astro.url.pathname, un objeto global que contiene la ruta de URL de la solicitud actual. Podemos usarlo en los componentes de la página para obtener el enlace de la página actual. Por ejemplo:

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>Bienvenido a mi blog</h1>
15
    <p>Enlace de la página actual: {currentPath}</p>
16
  </body>
17
</html>

Usar Astro.request.url

Otra forma es utilizar Astro.request.url para obtener la URL completa de la página actual. Esto es muy útil cuando se necesita la URL completa. Por ejemplo:

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>Bienvenido a mi blog</h1>
15
    <p>URL completa de la página actual: {currentUrl}</p>
16
  </body>
17
</html>

Usar slug en Frontmatter

Astro proporciona la información de ruta slug para las páginas generadas a partir de markdown, que podemos usar para construir el enlace de la página. Por ejemplo:

1
---
2
title: "Mi artículo del blog"
3
---

En el componente de la página, podemos usarlo de la siguiente manera:

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>Bienvenido a mi blog</h1>
16
    <p>Ruta de la página actual: {currentPath}</p>
17
  </body>
18
</html>

Conclusión

Podemos elegir diferentes métodos para obtener el enlace de la página actual en Astro según nuestras necesidades. Ya sea utilizando los objetos globales proporcionados por Astro o la información en Frontmatter, podemos acceder a la información de la URL actual en las páginas generadas.

Artículos similares

Cómo Crear un Blog: Guía Completa y Análisis de Plataformas

Cómo Crear un Blog: Guía Completa y Análisis de Plataformas