Contexte de rendu d'Astro

Lors du rendu d’une page, Astro fournit une API d’exécution spécifique au rendu actuel. Cela inclut des informations utiles telles que l’URL de la page actuelle ainsi que des API permettant d’effectuer des actions telles que la redirection vers une autre page.

Dans les composants .astro, ce contexte est disponible à partir de l’objet global Astro. Les fonctions de point de terminaison sont également appelées avec ce même objet de contexte comme premier argument, dont les propriétés reflètent les propriétés globales d’Astro.

Certaines propriétés ne sont disponibles que pour les routes rendues à la demande ou peuvent avoir des fonctionnalités limitées sur les pages pré-rendues.

L’objet global Astro est disponible pour tous les fichiers .astro. Utilisez l’objet context dans les fonctions de point de terminaison pour servir les points de terminaison de serveur statique ou en direct et dans le middleware pour injecter un comportement lorsqu’une page ou un point de terminaison est sur le point d’être rendu.

L’objet de contexte

Les propriétés suivantes sont disponibles dans l’objet global Astro (par exemple Astro.props, Astro.redirect()) et sont également disponibles dans l’objet de contexte (par exemple context.props, context.redirect()) passé aux fonctions de point de terminaison et au middleware.

`props`

props est un objet contenant toutes les valeurs qui ont été transmises en tant qu’attributs de composant.

---
const { title, date } = Astro.props;
---
<div>
  <h1>{title}</h1>
  <p>{date}</p>
</div>

---
import Heading from '../components/Heading.astro';
---
<Heading title="Mon tout premier article" date="09 Août 2022" />

En savoir plus sur la façon dont les mises en page Markdown et MDX gèrent les propriétés.

L’objet props contient également toutes les props transmises depuis getStaticPaths() lors du rendu des routes statiques.

Astro.props
context.props

---
export function getStaticPaths() {
  return [
    { params: { id: '1' }, props: { author: 'Blu' } },
    { params: { id: '2' }, props: { author: 'Erika' } },
    { params: { id: '3' }, props: { author: 'Matthew' } }
  ];
}

const { id } = Astro.params;
const { author } = Astro.props;
---

import type { APIContext } from 'astro';

export function getStaticPaths() {
  return [
    { params: { id: '1' }, props: { author: 'Blu' } },
    { params: { id: '2' }, props: { author: 'Erika' } },
    { params: { id: '3' }, props: { author: 'Matthew' } }
  ];
}

export function GET({ props }: APIContext) {
  return new Response(
    JSON.stringify({ author: props.author }),
  );
}

Voir aussi : Transmission de données avec props

`params`

params est un objet contenant les valeurs des segments de route dynamiques correspondant à une requête. Ses propriétés doivent correspondre aux paramètres du chemin d’accès à la page ou au fichier de point de terminaison.

Dans les versions statiques, il s’agira des params renvoyés par getStaticPaths() utilisés pour le pré-rendu des routes dynamiques.

Astro.params
context.params

---
export function getStaticPaths() {
  return [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } }
  ];
}
const { id } = Astro.params;
---
<h1>{id}</h1>

import type { APIContext } from 'astro';

export function getStaticPaths() {
  return [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } }
  ];
}

export function GET({ params }: APIContext) {
  return new Response(
    JSON.stringify({ id: params.id }),
  );
}

Lorsque les routes sont rendues à la demande, params peut être n’importe quelle valeur correspondant aux segments de chemin dans le modèle de route dynamique.

---
import { getPost } from '../api';

const post = await getPost(Astro.params.id);

// Aucun article trouvé avec cet identifiant
if (!post) {
  return Astro.redirect("/404")
}
---
<html>
  <h1>{post.name}</h1>
</html>

Voir aussi : params

`url`

Type : URL

Ajouté à la version : astro@1.0.0

url est un objet URL construit à partir de la valeur actuelle de request.url. Il est utile pour interagir avec les propriétés individuelles de l’URL de la requête, comme le chemin d’accès et l’origine.

Astro.url équivaut à faire new URL(Astro.request.url).

url sera une URL localhost en mode dev. Lors de la création d’un site, les routes pré-rendues recevront une URL basée sur les options site et base. Si site n’est pas configuré, les pages pré-rendues recevront également une URL localhost pendant la compilation.

<h1>L'URL actuelle est : {Astro.url}</h1>
<h1>Le chemin d'accès actuel de l'URL est : {Astro.url.pathname}</h1>
<h1>L'origine de l'URL actuelle est : {Astro.url.origin}</h1>

Vous pouvez également utiliser url pour créer de nouvelles URL en la passant comme argument à new URL().

---
// Exemple : créer une URL canonique à l'aide de votre domaine de production
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
// Exemple : créez une URL pour les balises méta SEO en utilisant votre domaine actuel
const socialImageURL = new URL('/images/preview.png', Astro.url);
---
<link rel="canonical" href={canonicalURL} />
<meta property="og:image" content={socialImageURL} />

`site`

Type : URL | undefined

site renvoie une URL créée à partir du site défini dans votre configuration Astro. Il renvoie undefined si vous n’avez pas défini de valeur pour site dans votre configuration Astro.

<link
    rel="alternate"
    type="application/rss+xml"
    title="Le titre de votre site"
    href={new URL("rss.xml", Astro.site)}
/>

`clientAddress`

Type : string

Ajouté à la version : astro@1.0.0

clientAddress spécifie l’adresse IP de la requête. Cette propriété est uniquement disponible pour les routes rendues à la demande et ne peut pas être utilisée sur les pages pré-rendues.

Astro.clientAddress
context.clientAddress

---
export const prerender = false; // Pas nécessaire en mode `server`
---

<div>Votre adresse IP est : <span class="address">{Astro.clientAddress}</span></div>

export const prerender = false; // Pas nécessaire en mode `server`
import type { APIContext } from 'astro';

export function GET({ clientAddress }: APIContext) {
  return new Response(`Votre adresse IP est : ${clientAddress}`);
}

`isPrerendered`

Type : boolean

Ajouté à la version : astro@5.0.0

Un booléen indiquant si la page actuelle est pré-rendue ou non.

Vous pouvez utiliser cette propriété pour exécuter une logique conditionnelle dans un middleware, par exemple, pour éviter d’accéder aux en-têtes dans les pages pré-rendues.

`generator`

Type : string

Ajouté à la version : astro@1.0.0

generator fournit la version actuelle d’Astro que votre projet exécute. C’est un moyen pratique d’ajouter une balise <meta name="generator"> avec votre version actuelle d’Astro. Il suit le format "Astro v5.x.x".

Astro.generator
context.generator

<html>
  <head>
    <meta name="generator" content={Astro.generator} />
  </head>
  <body>
    <footer>
      <p>Construit avec <a href="https://astro.build">{Astro.generator}</a></p>
    </footer>
  </body>
</html>

import type { APIContext } from 'astro';

export function GET({ generator, site }: APIContext) {
  const body = JSON.stringify({ generator, site });
  return new Response(body);
}

`request`

Type : Request

Astro.request est un objet Request standard. Il peut être utilisé pour obtenir les propriétés url, headers, method, et même le corps de la requête.

Astro.request
context.request

<p>Réception d'une requête {Astro.request.method} à "{Astro.request.url}".</p>
<p>En-têtes de requête reçus :</p>
<p><code>{JSON.stringify(Object.fromEntries(Astro.request.headers))}</code></p>

import type { APIContext } from 'astro';

export function GET({ request }: APIContext) {
  return new Response(`Hello ${request.url}`);
}

`response`

Type : ResponseInit & { readonly headers: Headers }

response est un objet ResponseInit standard. Il a la structure suivante.

status : Le code de statut numérique de la réponse, par exemple 200.
statusText : Le message de statut associé au code de statut, par exemple 'OK'.
headers : Une instance Headers que vous pouvez utiliser pour définir les en-têtes HTTP de la réponse.

Astro.response est utilisé pour définir le status, le statusText et les headers de la réponse d’une page.

---
if(condition) {
  Astro.response.status = 404;
  Astro.response.statusText = 'Non trouvé';
}
---

Ou de définir un en-tête :

---
Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;');
---

`redirect()`

Type : (path: string, status?: number) => Response

Ajouté à la version : astro@1.5.0

redirect() renvoie un objet Response qui vous permet de rediriger vers une autre page et éventuellement de fournir un code d’état de réponse HTTP comme deuxième paramètre.

Une page (et non un composant enfant) doit renvoyer le résultat de Astro.redirect() pour que la redirection se produise.

Pour les routes générées de manière statique, cela produira une redirection client à l’aide d’une balise <meta http-equiv="refresh"> et ne prend pas en charge les codes d’état.

Pour les routes rendues à la demande, la définition d’un code d’état personnalisé est prise en charge lors de la redirection. S’il n’est pas spécifié, les redirections seront servies avec un code d’état 302.

L’exemple suivant redirige un utilisateur vers une page de connexion :

Astro.redirect()
context.redirect()

---
import { isLoggedIn } from '../utils';

const cookie = Astro.request.headers.get('cookie');

// Si l'utilisateur n'est pas connecté, redirigez-le vers la page de connexion
if (!isLoggedIn(cookie)) {
  return Astro.redirect('/login');
}
---

<p>Informations de l'utilisateur</p>

import type { APIContext } from 'astro';

export function GET({ redirect, request }: APIContext) {
  const cookie = request.headers.get('cookie');
  if (!isLoggedIn(cookie)) {
    return redirect('/login', 302);
  } else {
    // renvoyer les informations de l'utilisateur
  }
}

`rewrite()`

Type : (rewritePayload: string | URL | Request) => Promise<Response>

Ajouté à la version : astro@4.13.0

rewrite() vous permet de diffuser du contenu à partir d’une URL ou d’un chemin différent sans rediriger le navigateur vers une nouvelle page.

La méthode accepte soit une chaîne de caractères, une URL ou un objet Request pour l’emplacement du chemin.

Utilisez une chaîne de caractères pour fournir un chemin explicite :

Astro.rewrite()
context.rewrite()

---
return Astro.rewrite("/login")
---

import type { APIContext } from 'astro';

export function GET({ rewrite }: APIContext) {
  return rewrite('/login');
}

Utilisez un type URL lorsque vous devez construire le chemin de l’URL pour la réécriture. L’exemple suivant affiche le chemin parent d’une page en créant une nouvelle URL à partir du chemin relatif "../" :

Astro.rewrite()
context.rewrite()

---
return Astro.rewrite(new URL("../", Astro.url))
---

import type { APIContext } from 'astro';

export function GET({ rewrite }: APIContext) {
  return rewrite(new URL("../", Astro.url));
}

Utilisez un type Request pour un contrôle complet de la requête (Request) envoyée au serveur pour le nouveau chemin. L’exemple suivant envoie une requête pour afficher la page parent tout en fournissant des en-têtes :

Astro.rewrite()
context.rewrite()

---
return Astro.rewrite(new Request(new URL("../", Astro.url), {
  headers: {
    "x-custom-header": JSON.stringify(Astro.locals.someValue)
  }
}))
---

import type { APIContext } from 'astro';

export function GET({ rewrite }: APIContext) {
  return rewrite(new Request(new URL("../", Astro.url), {
    headers: {
      "x-custom-header": JSON.stringify(Astro.locals.someValue)
    }
  }));
}

`originPathname`

Type : string

Ajouté à la version : astro@5.0.0

originPathname définit le chemin d’accès d’origine de la requête, avant que les réécritures ne soient appliquées.

Astro.originPathname
context.originPathname

<p>Le chemin d'origine est {Astro.originPathname}</p>
<p>Le chemin réécrit est {Astro.url.pathname}</p>

import { defineMiddleware } from 'astro:middleware';

export const onRequest = defineMiddleware(async (context, next) => {
  // Enregistre le chemin d'accès d'origine avant toute réécriture
  recordPageVisit(context.originPathname);
  return next();
});

`locals`

Ajouté à la version : astro@2.4.0

locals est un objet utilisé pour stocker et accéder à des informations arbitraires pendant le cycle de vie d’une requête. Astro.locals est un objet contenant toutes les valeurs de l’objet context.locals défini par le middleware. Utilisez-le pour accéder aux données renvoyées par le middleware dans vos fichiers .astro.

Les fonctions middleware peuvent à la fois lire et écrire les valeurs de context.locals :

import type { MiddlewareHandler } from 'astro';

export const onRequest: MiddlewareHandler = ({ locals }, next) => {
  if (!locals.title) {
    locals.title = "Titre par défaut";
  }
  return next();
}

Les composants Astro et les points de terminaison de l’API peuvent lire les valeurs depuis locals lorsqu’elles s’affichent :

Astro.locals
context.locals

---
const title = Astro.locals.title;
---
<h1>{title}</h1>

import type { APIContext } from 'astro';

export function GET({ locals }: APIContext) {
  return new Response(locals.title); // "Titre par défaut"
}

`preferredLocale`

Type : string | undefined

Ajouté à la version : astro@3.5.0

preferredLocale est une valeur calculée pour trouver la meilleure correspondance entre les préférences linguistiques du navigateur de votre visiteur et les paramètres régionaux pris en charge par votre site.

Elle est calculée en vérifiant les paramètres régionaux configurés dans votre tableau i18n.locales et les paramètres régionaux pris en charge par le navigateur de l’utilisateur via l’en-tête Accept-Language. Cette valeur est undefined si aucune correspondance de ce type n’existe.

Cette propriété est uniquement disponible pour les routes rendues à la demande et ne peut pas être utilisée sur des pages statiques pré-rendues.

`preferredLocaleList`

Type : string[] | undefined

Ajouté à la version : astro@3.5.0

preferredLocaleList représente le tableau de tous les paramètres régionaux demandés par le navigateur et pris en charge par votre site web. Cela génère une liste de toutes les langues compatibles entre votre site et votre visiteur.

Si aucune des langues demandées par le navigateur n’est trouvée dans votre tableau locales, alors la valeur est []. Cela se produit lorsque vous ne prenez en charge aucun des paramètres régionaux préférés de vos visiteurs.

Si le navigateur ne spécifie aucune langue préférée, alors cette valeur sera celle de i18n.locales : tous vos paramètres régionaux pris en charge seront considérés comme également préférés par un visiteur sans préférences.

Cette propriété n’est disponible que pour l’affichage côté serveur (SSR) et ne doit pas être utilisée pour les sites statiques.

`currentLocale`

Type : string | undefined

Ajouté à la version : astro@3.5.6

Les paramètres régionaux calculés à partir de l’URL actuelle, en utilisant la syntaxe spécifiée dans votre configuration locales. Si l’URL ne contient pas de préfixe /[locale]/, la valeur par défaut sera i18n.defaultLocale.

`getActionResult()`

Type : (action: TAction) => ActionReturnType<TAction> | undefined

Ajouté à la version : astro@4.15.0

getActionResult() est une fonction qui renvoie le résultat d’une soumission d’Action. Celle-ci accepte une fonction d’action comme argument (par exemple, actions.logout) et renvoie un objet data ou error lorsqu’une soumission est reçue. Sinon, elle renverra undefined.

---
import { actions } from 'astro:actions';

const result = Astro.getActionResult(actions.logout);
---

<form action={actions.logout}>
  <button type="submit">Se déconnecter</button>
</form>
{result?.error && <p>Échec de la déconnexion. Veuillez réessayer.</p>}

`callAction()`

Ajouté à la version : astro@4.15.0

callAction() est une fonction utilisée pour appeler un gestionnaire d’Action directement depuis votre composant Astro. Celle-ci accepte une fonction Action comme premier argument (par exemple actions.logout) et toute entrée que l’action reçoit comme deuxième argument. Elle renvoie le résultat de l’action sous forme de promesse.

---
import { actions } from 'astro:actions';

const { data, error } = await Astro.callAction(actions.logout, { userId: '123' });
---

`routePattern`

Type : string

Ajouté à la version : astro@5.0.0

Le modèle de route chargé de générer la page ou la route actuelle. Dans le routage basé sur des fichiers, cela ressemble au chemin d’accès au fichier de votre projet utilisé pour créer la route. Lorsque les intégrations créent des routes pour votre projet, context.routePattern est identique à la valeur de injectRoute.pattern.

La valeur commencera par une barre oblique et ressemblera au chemin d’un composant de page par rapport à votre dossier src/pages/ sans extension de fichier.

Par exemple, le fichier src/pages/en/blog/[slug].astro renverra /en/blog/[slug] pour routePattern. Chaque page de votre site générée par ce fichier (par exemple /en/blog/post-1/, /en/blog/post-2/, etc.) partage la même valeur pour routePattern. Dans le cas des routes index.*, le modèle de route n’inclura pas le mot « index ». Par exemple, src/pages/index.astro renverra /.

Vous pouvez utiliser cette propriété pour comprendre quelle route effectue le rendu de votre composant. Cela vous permet de cibler ou d’analyser ensemble les URL de pages générées de manière similaire. Par exemple, vous pouvez l’utiliser pour restituer certaines informations de manière conditionnelle ou collecter des mesures sur les routes les plus lentes.

`cookies`

Type : AstroCookies

Ajouté à la version : astro@1.4.0

cookies contient des utilitaires pour lire et manipuler les cookies pour les routes rendues à la demande.

Utilitaires de cookies

`cookies.get()`

Type : (key: string, options?: AstroCookieGetOptions) => AstroCookie | undefined

Obtient le cookie sous la forme d’un objet AstroCookie, qui contient la value et des fonctions utilitaires pour convertir le cookie en types autres que des chaînes de caractères.

`cookies.has()`

Type : (key: string, options?: AstroCookieGetOptions) => boolean

Détermine si ce cookie existe. Si le cookie a été défini via Astro.cookies.set() cela retournera true, sinon cela vérifiera les cookies dans Astro.request.

`cookies.set()`

Type : (key: string, value: string | object, options?: AstroCookieSetOptions) => void

Définit la clé du cookie (key) sur la valeur donnée. Cela tentera de convertir la valeur du cookie en une chaîne de caractères. Les options permettent de définir les caractéristiques du cookie, comme maxAge ou httpOnly.

`cookies.delete()`

Type : (key: string, options?: AstroCookieDeleteOptions) => void

Invalide un cookie en définissant la date d’expiration dans le passé (0 en temps Unix).

Une fois qu’un cookie est « supprimé » (expiré), Astro.cookies.has() retournera false et Astro.cookies.get() retournera un AstroCookie avec une valeur (value) indéfinie (undefined). Les options disponibles lors de la suppression d’un cookie sont : domain, path, httpOnly, sameSite, et secure.

`cookies.merge()`

Type : (cookies: AstroCookies) => void

Fusionne une nouvelle instance AstroCookies dans l’instance actuelle. Tous les nouveaux cookies seront ajoutés à l’instance actuelle et tous les cookies portant le même nom remplaceront les valeurs existantes.

`cookies.headers()`

Type : () => Iterator<string>

Obtient les valeurs de l’en-tête Set-Cookie qui seront envoyées avec la réponse.

Type `AstroCookie`

Le type renvoyé après l’obtention d’un cookie via Astro.cookies.get(). Il a la structure suivante :

`value`

Type : string

La valeur brute de la chaîne du cookie.

`json`

Type : () => Record<string, any>

Analyse la valeur du cookie via JSON.parse(), retournant un objet. Génère une erreur si la valeur du cookie n’est pas un JSON valide.

`number`

Type : () => number

Analyse la valeur du cookie en tant que nombre. Renvoie NaN s’il ne s’agit pas d’un nombre valide.

`boolean`

Type : () => boolean

Convertit la valeur du cookie en un booléen.

`AstroCookieGetOptions`

Ajouté à la version : astro@4.1.0

L’interface AstroCookieGetOption vous permet de spécifier des options lorsque vous recevez un cookie.

`decode`

Type : (value: string) => string

Permet de personnaliser la manière dont un cookie est désérialisé en une valeur.

`AstroCookieSetOptions`

Ajouté à la version : astro@4.1.0

AstroCookieSetOptions est un objet qui peut être transmis à Astro.cookies.set() lors de la définition d’un cookie pour personnaliser la manière dont le cookie est sérialisé.

`domain`

Type : string

Spécifie le domaine. Si aucun domaine n’est défini, la plupart des clients interpréteront cela comme s’appliquant au domaine actuel.

`expires`

Type : Date

Spécifie la date d’expiration du cookie.

`httpOnly`

Type : boolean

Si la valeur est true, le cookie ne sera pas accessible côté client.

`maxAge`

Type : number

Spécifie un nombre, en secondes, pour lequel le cookie est valide.

`path`

Type : string

Spécifie un sous-chemin du domaine dans lequel le cookie est appliqué.

`sameSite`

Type : boolean | 'lax' | 'none' | 'strict'

Spécifie la valeur de l’en-tête du cookie SameSite.

`secure`

Type : boolean

Si c’est vrai, le cookie n’est défini que sur les sites https.

`encode`

Type : (value: string) => string

Permet de personnaliser la façon dont le cookie est sérialisé.

`session`

Type : AstroSession

Ajouté à la version : astro@5.7.0

session est un objet qui permet de stocker des données entre les requêtes pour les routes rendues à la demande. Il est associé à un cookie qui contient uniquement l’ID de session : les données elles-mêmes ne sont pas stockées dans le cookie.

La session est créée lors de la première utilisation et le cookie de session est automatiquement défini. L’objet session a pour valeur undefined si aucun stockage de session n’a été configuré, ou si la route actuelle est pré-rendue, et enregistrera une erreur si vous essayez de l’utiliser.

Consultez le guide des sessions pour plus d’informations sur la façon d’utiliser les sessions dans votre projet Astro.

`get()`

Type : (key: string) => Promise<any>

Renvoie la valeur de la clé donnée dans la session. Si la clé n’existe pas, la fonction renvoie undefined.

Astro.session
context.session

---
const cart = await Astro.session?.get('cart');
---
<button>🛒 {cart?.length}</button>

import type { APIContext } from 'astro';

export async function GET({ session }: APIContext) {
  const cart = await session.get('cart');
  return Response.json({ cart });
}

`set()`

Type : (key: string, value: any, options?: { ttl: number }) => void

Définit la valeur de la clé donnée dans la session. Cette valeur peut être de tout type sérialisable. Cette méthode est synchrone et la valeur est immédiatement disponible pour récupération, mais elle n’est enregistrée dans le backend qu’à la fin de la requête.

Astro.session
context.session

---
const { slug } = Astro.params;
Astro.session?.set('lastViewedProduct', slug);
---

import type { APIContext } from 'astro';

export async function POST({ session, request }: APIContext) {
  const cart = await session.get('cart');
  const newItem = await request.json();
  cart.push(newItem);
  // Enregistrer le panier mis à jour dans la session
  session.set('cart', cart);
  return Response.json({ cart });
}

`regenerate()`

Type : () => void

Régénère l’ID de session. Appelez cette fonction lorsqu’un utilisateur se connecte ou augmente ses privilèges, afin d’éviter les attaques par fixation de session.

Astro.session
context.session

---
Astro.session?.regenerate();
---

import type { APIContext } from 'astro';

export async function POST({ session }: APIContext) {
  // Authentifier l'utilisateur...
  doLogin();
  // Régénérer l'ID de session pour empêcher les attaques de fixation de session
  session.regenerate();
  return Response.json({ success: true });
}

`destroy()`

Type : () => void

Détruit la session en supprimant le cookie et l’objet du backend. Appelez cette fonction lorsqu’un utilisateur se déconnecte ou que sa session est invalidée.

Astro.session
context.session

---
Astro.session?.destroy();
return Astro.redirect('/login');
---

import type { APIContext } from 'astro';

export async function POST({ session }: APIContext) {
  session.destroy();
  return Response.json({ success: true });
}

`load()`

Type : (id: string) => Promise<void>

Charge une session par identifiant. En utilisation normale, une session est chargée automatiquement à partir du cookie de requête. Utilisez cette méthode pour charger une session à partir d’un identifiant différent. Ceci est utile si vous gérez vous-même l’identifiant de session ou si vous souhaitez suivre une session sans utiliser de cookies.

Astro.session
context.session

---
// Charger la session à partir d'un en-tête au lieu de cookies
const sessionId = Astro.request.headers.get('x-session-id');
await Astro.session?.load(sessionId);
const cart = await Astro.session?.get('cart');
---
<h1>Votre panier</h1>
<ul>
  {cart?.map((item) => (
    <li>{item.name}</li>
  ))}
</ul>

import type { APIRoute } from 'astro';

export const GET: APIRoute = async ({ session, request }) => {
  // Charger la session à partir d'un en-tête au lieu de cookies
  const sessionId = request.headers.get('x-session-id');
  await session.load(sessionId);
  const cart = await session.get('cart');
  return Response.json({ cart });
};

Propriétés d’objet dépréciées

`Astro.glob()`

Astro.glob() est un moyen de charger de nombreux fichiers locaux dans la configuration de votre site statique.

---
const posts = await Astro.glob('../pages/post/*.md'); // renvoie un tableau d'articles qui se trouvent dans ./src/pages/post/*.md
---

<div>
{posts.slice(0, 3).map((post) => (
  <article>
    <h2>{post.frontmatter.title}</h2>
    <p>{post.frontmatter.description}</p>
    <a href={post.url}>Lire la suite</a>
  </article>
))}
</div>

.glob() ne prend qu’un seul paramètre : une URL relative glob des fichiers locaux que vous souhaitez importer. Elle est asynchrone et renvoie un tableau des exportations des fichiers correspondants.

.glob() ne peut pas prendre de variables ou de chaînes de caractères qui les interpolent, car elles ne sont pas analysables statiquement. (Consultez le guide d’importation pour une solution de contournement.) Ceci est dû au fait que Astro.glob() est un wrapper de import.meta.glob() de Vite.

Vous pouvez également utiliser import.meta.glob() lui-même dans votre projet Astro. Vous pouvez le faire lorsque :

Vous avez besoin de cette fonctionnalité dans un fichier autre que .astro, comme une route API. Astro.glob() n’est disponible que dans les fichiers .astro, tandis que import.meta.glob() est disponible n’importe où dans le projet.
Vous ne souhaitez pas charger chaque fichier immédiatement. import.meta.glob() peut renvoyer des fonctions qui importent le contenu du fichier, plutôt que de renvoyer le contenu lui-même. Notez que cette importation inclut tous les styles et scripts de tous les fichiers importés. Ceux-ci seront regroupés et ajoutés à la page, qu’un fichier soit réellement utilisé ou non, car cela est décidé par une analyse statique, et non au moment de l’exécution.
Vous souhaitez accéder au chemin de chaque fichier. import.meta.glob() renvoie une association du chemin d’un fichier et de son contenu, tandis que Astro.glob() renvoie une liste de contenu.
Vous souhaitez transmettre plusieurs modèles ; par exemple, vous souhaitez ajouter un « modèle négatif » qui filtre certains fichiers. import.meta.glob() peut éventuellement prendre un tableau de chaînes glob, plutôt qu’une seule chaîne de caractères.

En savoir plus dans la documentation de Vite.

Fichiers Markdown

Les fichiers Markdown chargés avec Astro.glob() renvoient l’interface MarkdownInstance suivante :

export interface MarkdownInstance<T extends Record<string, any>> {
  /* Toutes les données spécifiées dans le frontmatter YAML/TOML de ce fichier */
  frontmatter: T;
  /* Le chemin d'accès absolu de ce fichier */
  file: string;
  /* Le chemin rendu de ce fichier */
  url: string | undefined;
  /* Composant Astro qui restitue le contenu de ce fichier */
  Content: AstroComponentFactory;
  /** (Markdown uniquement) Contenu du fichier Markdown brut, à l'exclusion de la mise en page HTML et du frontmatter YAML/TOML */
  rawContent(): string;
  /** (Markdown uniquement) Fichier Markdown compilé en HTML, à l'exclusion de la mise en page HTML */
  compiledContent(): string;
  /* Fonction qui renvoie un tableau des éléments h1...h6 dans ce fichier */
  getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>;
  default: AstroComponentFactory;
}

Vous pouvez éventuellement fournir un type pour la variable frontmatter à l’aide d’un générique TypeScript.

---
interface Frontmatter {
  title: string;
  description?: string;
}
const posts = await Astro.glob<Frontmatter>('../pages/post/*.md');
---

<ul>
  {posts.map(post => <li>{post.frontmatter.title}</li>)}
</ul>

Fichiers Astro

Les fichiers Astro ont l’interface suivante :

export interface AstroInstance {
  /* Le chemin d'accès de ce fichier */
  file: string;
  /* L'URL de ce fichier (s'il se trouve dans le répertoire des pages) */
  url: string | undefined;
  default: AstroComponentFactory;
}

Autres fichiers

D’autres fichiers peuvent avoir différentes interfaces, mais Astro.glob() accepte un générique TypeScript si vous savez exactement ce que contient un type de fichier non reconnu.

---
interface CustomDataFile {
  default: Record<string, any>;
}
const data = await Astro.glob<CustomDataFile>('../data/**/*.js');
---

Contribuer Communauté Parrainer

Contexte de rendu d'Astro

L’objet de contexte

props

params

url

site

clientAddress

isPrerendered

generator

request

response

redirect()

rewrite()

originPathname

locals

preferredLocale

preferredLocaleList

currentLocale

getActionResult()

callAction()

routePattern

cookies

Utilitaires de cookies

cookies.get()

cookies.has()

cookies.set()

cookies.delete()

cookies.merge()

cookies.headers()

Type AstroCookie

value

json

number

boolean

AstroCookieGetOptions

decode

AstroCookieSetOptions

domain

expires

httpOnly

maxAge

path

sameSite

secure

encode

session

get()

set()

regenerate()

destroy()

load()

Propriétés d’objet dépréciées

Astro.glob()

Fichiers Markdown

Fichiers Astro

Autres fichiers

`props`

`params`

`url`

`site`

`clientAddress`

`isPrerendered`

`generator`

`request`

`response`

`redirect()`

`rewrite()`

`originPathname`

`locals`

`preferredLocale`

`preferredLocaleList`

`currentLocale`

`getActionResult()`

`callAction()`

`routePattern`

`cookies`

`cookies.get()`

`cookies.has()`

`cookies.set()`

`cookies.delete()`

`cookies.merge()`

`cookies.headers()`

Type `AstroCookie`

`value`

`json`

`number`

`boolean`

`AstroCookieGetOptions`

`decode`

`AstroCookieSetOptions`

`domain`

`expires`

`httpOnly`

`maxAge`

`path`

`sameSite`

`secure`

`encode`

`session`

`get()`

`set()`

`regenerate()`

`destroy()`

`load()`

`Astro.glob()`