API-Referenz
Astro
Global
Abschnitt betitelt Astro GlobalDas Global Astro
ist in allen Kontexten in .astro
-Dateien verfügbar. Es hat die folgenden Funktionen:
Astro.glob()
Abschnitt betitelt Astro.glob()mit Astro.glob()
kannst du lokale Dateien in dein statisches Website-Setup laden.
---const posts = await Astro.glob('../pages/post/*.md'); // gibt ein Array von Posts zurück, die sich unter ./src/pages/post/*.md befindenthemes---
<div>{posts.slice(0, 3).map((post) => ( <article> <h2>{post.frontmatter.title}</h2> <p>{post.frontmatter.description}</p> <a href={post.url}>Read more</a> </article>))}</div>
">glob()
benötigt nur einen Parameter: einen relativen URL-Glob der lokalen Dateien, die du importieren möchtest. Die Funktion arbeitet asynchron und gibt ein Array mit den Exporten der passenden Dateien zurück.
.glob()
kann keine Variablen oder Strings annehmen, die sie interpolieren, da sie nicht statisch analysierbar sind. (Siehe die Anleitung zur Fehlerbehebung für einen Workaround) Das liegt daran, dass Astro.glob()
ein Wrapper von Vite’s import.meta.glob()
ist.
Du kannst auch import.meta.glob()
selbst in deinem Astro-Projekt verwenden. Du solltest dies tun, wenn:
- Du brauchst diese Funktion in einer Datei, die nicht
.astro
ist, wie zum Beispiel eine API-Route. astro.glob() ist nur in Astro-Dateien verfügbar, während import.meta.glob() überall im Projekt verfügbar ist. - Du willst nicht jede Datei sofort laden. Die Funktion
import.meta.glob()
kann Funktionen zurückgeben, die den Inhalt der Datei importieren, anstatt den Inhalt selbst zurückzugeben. - Du willst Zugriff auf den Pfad jeder Datei. Die Funktion
import.meta.glob()
gibt eine Abbildung des Dateipfads auf den Inhalt zurück, währendAstro.glob()
eine Liste des Inhalts zurückgibt. - Du möchtest mehrere Pattern übergeben; zum Beispiel möchtest du ein “negatives Muster” hinzufügen, das bestimmte Dateien herausfiltert. die Funktion
import.meta.glob()
kann optional ein Array von glob-Zeichenfolgen entgegennehmen, anstatt einer einzelnen Zeichenfolge.
Mehr dazu findest du in der [Vite-Dokumentation] (https://vitejs.dev/guide/features.html#glob-import).
Markdown-Dateien
Abschnitt betitelt Markdown-DateienMarkdown-Dateien haben die folgende Schnittstelle:
export interface MarkdownInstance<T extends Record<string, any>> { /* Alle Daten, die im YAML-Frontmatter dieser Datei angegeben sind */ frontmatter: T; /* Der Dateipfad für diese Datei */ file: string; /* Der gerenderte Pfad zu dieser Datei */ url: string | undefined; /* Astro-Komponente, die den Inhalt dieser Datei wiedergibt */ Content: AstroComponent; /* Funktion, die ein Array mit den h1...h6-Elementen in dieser Datei zurückgibt */ getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>;}
Du kannst optional einen Typ für die Variable “frontmatter” angeben, indem du eine TypeScript-Generik verwendest.
---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>
Astro-Dateien
Abschnitt betitelt Astro-DateienAstro-Dateien haben die folgende Schnittstelle:
export interface AstroInstance { /* Der Dateipfad für diese Datei */ file: string; /* Die URL für diese Datei (wenn sie sich im Seitenverzeichnis befindet) */ url: string | undefined; default: AstroComponent;}
Andere Dateien
Abschnitt betitelt Andere DateienAndere Dateien können verschiedene Schnittstellen haben, aber Astro.glob()
akzeptiert eine TypeScript-Generik, wenn du genau weißt, was ein nicht erkannter Dateityp enthält.
---interface CustomDataFile { default: Record<string, any>;}const data = await Astro.glob<CustomDataFile>('../data/**/*.js');---
Astro.props
Abschnitt betitelt Astro.propsAstro.props
ist ein Objekt, das alle Werte enthält, die als [Komponentenattribute] übergeben wurden (/de/basics/astro-components/#component-props). Layoutkomponenten für .md
und .mdx
-Dateien erhalten Frontmatter-Werte als Props.
---const { title, date } = Astro.props;---<div> <h1>{title}</h1> <p>{date}</p></div>
---import Heading from '../components/Heading.astro';---<Heading title="Mein erster Beitrag" date="09 Aug 2022" />
📚 Erfahre mehr darüber, wie Markdown und MDX Layouts mit Eigenschaften umgehen.
📚 Lerne, wie du TypeScript-Typdefinitionen für deine Eigenschaften hinzufügst.
Astro.params
Abschnitt betitelt Astro.paramsAstro.params
ist ein Objekt, das die Werte der dynamischen Routensegmente enthält, die für diese Anfrage angepasst wurden.
Bei statischen Builds sind dies die Parameter
, die von getStaticPaths()
zurückgegeben und für das Prerendering von dynamischen Routen verwendet werden.
Bei SSR-Builds kann dies ein beliebiger Wert sein, der den Pfadsegmenten im dynamischen Routenmuster entspricht.
---export function getStaticPaths() { return [ { params: { id: '1' } }, { params: { id: '2' } }, { params: { id: '3' } } ];}
const { id } = Astro.params;---<h1>{id}</h1>
Siehe auch: params
Astro.request
Abschnitt betitelt Astro.requestAstro.request
ist ein Standard-Request Objekt. Es kann verwendet werden, um die url
, den header
, die method
und sogar den Body der Anfrage zu erhalten.
<p>Empfang einer {Astro.request.method} Anfrage an "{Astro.request.url}".</p><p>Empfangene Anfrage-Header:<code>{JSON.stringify(Object.fromEntries(Astro.request.headers))}</code>
Siehe auch: Astro.url
Mit der Standardoption output: 'static'
-Option enthält Astro.request.url
keine Suchparameter, wie z.B. ?foo=bar
, da es nicht möglich ist, diese bei statischen Builds im Voraus zu bestimmen. Im Modus output: 'server'
-Modus enthält die Option Astro.request.url
Suchparameter, da sie aus einer Serveranfrage ermittelt werden können.
Astro.response
Abschnitt betitelt Astro.responseAstro.response
ist ein Standard-ResponseInit-Objekt. Es wird verwendet, um den status
, den statusText
und die heading
für die Antwort einer Seite zu setzen.
---if(condition) { Astro.response.status = 404; Astro.response.statusText = 'Not found';}---
Oder um einen Header zu setzen:
---Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;');---
Astro.cookies
Abschnitt betitelt Astro.cookiesastro@1.4.0
Astro.cookies
enthält Helfer zum Lesen und Bearbeiten von Cookies im Modus Server-Side-Rendering.
Name | Typ | Beschreibung |
---|---|---|
get | (key: string) => AstroCookie | Holt das Cookie als AstroCookie -Objekt, das den Wert und Hilfsfunktionen zur Umwandlung des Cookies in Nicht-String-Typen enthält. |
has | (key: string) => boolean | Ob dieses Cookie existiert. Wenn das Cookie über Astro.cookies.set() gesetzt wurde, wird hier true zurückgegeben, andernfalls werden die Cookies in Astro.request überprüft. |
set | (key: string, value: string | number | boolean | object, options?: CookieOptions) => void | Setzt den Cookie key auf den angegebenen Wert. Dabei wird versucht, den Cookie-Wert in eine Zeichenkette umzuwandeln. Optionen bieten Möglichkeiten, Cookie-Funktionen zu setzen, wie z. B. maxAge oder htpOnly . |
delete | (key: string, options?: CookieDeleteOptions) => void | Markiert das Cookie als gelöscht. Sobald ein Cookie gelöscht ist, gibt Astro.cookies.has() den Wert false und Astro.cookies.get() einen AstroCookie mit einem Wert von undefined zurück. Mit den Optionen können die Domain und der Pfad des zu löschenden Cookies festgelegt werden. |
headers | () => Iterator<string> | ermittelt die header-Werte für “Set-Cookie”, die mit der Antwort gesendet werden. |
AstroCookie
Abschnitt betitelt AstroCookieDas Abrufen eines Cookies über Astro.cookies.get()
liefert einen Typ AstroCookie
. Er hat die folgende Struktur.
Name | Type | Description |
---|---|---|
value | string | Der eigentliche String-Wert des Cookies. |
json | () => Record<string, any> | Analysiert den Cookie-Wert mit JSON.parse() und gibt ein Objekt zurück. Wirft einen Fehler, wenn der Cookie-Wert kein gültiges JSON ist. |
number | () => number | Analysiert den Cookie-Wert als Zahl. Gibt NaN zurück, wenn es sich nicht um eine gültige Zahl handelt. |
boolean | () => boolean | Wandelt den Cookie-Wert in einen booleschen Wert um. |
Astro.redirect()
Abschnitt betitelt Astro.redirect()Im Modus server-side-rendering kannst du mit Astro.redirect()
zu einer anderen Seite umleiten.
Eine Seite (und nicht eine untergeordnete Komponente) muss das Ergebnis von `Astro.redirect()” zurückgeben, damit die Umleitung erfolgt.
---import { isLoggedIn } from '../utils';
const cookie = Astro.request.headers.get('cookie');
// Wenn der Benutzer nicht eingeloggt ist, leite ihn zur Anmeldeseite umif (!isLoggedIn(cookie)) { return Astro.redirect('/login');}---
Astro.canonicalURL
Abschnitt betitelt Astro.canonicalURLVerwende Astro.url
, um deine eigene kanonische URL zu erstellen.
Die kanonische URL der aktuellen Seite.
Astro.url
Abschnitt betitelt Astro.urlastro@1.0.0-rc
Ein URL-Objekt, das aus dem aktuellen Astro.request.url
-URL-String-Wert erstellt wird. Nützlich für die Interaktion mit einzelnen Eigenschaften der Anfrage-URL, wie Pfadname und Herkunft.
Das ist gleichbedeutend mit neue URL(Astro.request.url)
.
<h1>Die aktuelle URL ist: {Astro.url}</h1><h1>Der aktuelle URL-Pfadname ist: {Astro.url.pathname}</h1><h1>Der aktuelle URL-Ursprung ist: {Astro.url.origin}</h1>
Du kannst auch Astro.url
verwenden, um neue URLs zu erstellen, indem du es als Argument an neue URL()
übergibst.
---// Beispiel: Erstelle eine kanonische URL mit deiner Produktionsdomainconst canonicalURL = new URL(Astro.url.pathname, Astro.site);// Beispiel: Konstruiere eine URL für SEO-Meta-Tags unter Verwendung deiner aktuellen Domainconst socialImageURL = new URL('/images/preview.png', Astro.url);---<link rel="canonical" href={canonicalURL} /><meta property="og:image" content={socialImageURL} />
Astro.clientAddress
Abschnitt betitelt Astro.clientAddressastro@1.0.0-rc
Gibt die IP-Adresse der Anfrage an. Diese Eigenschaft ist nur bei der Erstellung für SSR (Server-seitiges Rendering) verfügbar und sollte nicht für statische Websites verwendet werden.
---const ip = Astro.clientAddress;---
<div>Deine IP-Adresse lautet: <span class="address">{ ip }</span></div>
Astro.site
Abschnitt betitelt Astro.siteAstro.site
gibt eine URL zurück, die aus site
in deiner Astro-Konfiguration stammt. Wenn site
in deiner Astro-Konfiguration nicht definiert ist, wird Astro.site
auch nicht definiert.
Astro.generator
Abschnitt betitelt Astro.generatorastro@1.0.0
Mit Astro.generator
kannst du bequem ein <meta name="generator">
-Tag mit deiner aktuellen Astro-Version hinzufügen. Es hat das Format “Astro v1.x.x”.
<html> <head> <meta name="generator" content={Astro.generator} /> </head> <body> <footer> <p>Built with <a href="https://astro.build">{Astro.generator}</a></p> </footer> </body></html>