API⁠-⁠Referenz

Das Global Astro ist in allen Kontexten in .astro-Dateien verf├╝gbar. Es hat die folgenden Funktionen:

mit Astro.glob() kannst du lokale Dateien in dein statisches Website-Setup laden.

./src/components/my-component.astro
---
const posts = await Astro.glob('../pages/post/*.md'); // gibt ein Array von Posts zur├╝ck, die sich unter ./src/pages/post/*.md befinden
themes---
<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.

Markdown-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 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 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 ist ein Objekt, das alle Werte enth├Ąlt, die als [Komponentenattribute] ├╝bergeben wurden (/de/core-concepts/astro-components/#component-props). Layoutkomponenten f├╝r .md und .mdx-Dateien erhalten Frontmatter-Werte als Props.

./src/components/Heading.astro
---
const { title, date } = Astro.props;
---
<div>
<h1>{title}</h1>
<p>{date}</p>
</div>
./src/pages/index.astro
---
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 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.

src/pages/posts/[id].astro
---
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 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

Astro.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=/;');
---
Hinzugef├╝gt in: astro@1.4.0

Astro.cookies enth├Ąlt Helfer zum Lesen und Bearbeiten von Cookies im Modus Server-Side-Rendering.

NameTypBeschreibung
get(key: string) => AstroCookieHolt das Cookie als AstroCookie-Objekt, das den Wert und Hilfsfunktionen zur Umwandlung des Cookies in Nicht-String-Typen enth├Ąlt.
has(key: string) => booleanOb 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) => voidSetzt 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) => voidMarkiert 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.

Das Abrufen eines Cookies ├╝ber Astro.cookies.get() liefert einen Typ AstroCookie. Er hat die folgende Struktur.

NameTypeDescription
valuestringDer 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() => numberAnalysiert den Cookie-Wert als Zahl. Gibt NaN zur├╝ck, wenn es sich nicht um eine g├╝ltige Zahl handelt.
boolean() => booleanWandelt den Cookie-Wert in einen booleschen Wert um.

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.

src/pages/account.astro
---
import { isLoggedIn } from '../utils';
const cookie = Astro.request.headers.get('cookie');
// Wenn der Benutzer nicht eingeloggt ist, leite ihn zur Anmeldeseite um
if (!isLoggedIn(cookie)) {
return Astro.redirect('/login');
}
---

Die kanonische URL der aktuellen Seite.

Hinzugef├╝gt in: astro@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 Produktionsdomain
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
// Beispiel: Konstruiere eine URL f├╝r SEO-Meta-Tags unter Verwendung deiner aktuellen Domain
const socialImageURL = new URL('/images/preview.png', Astro.url);
---
<link rel="canonical" href={canonicalURL} />
<meta property="og:image" content={socialImageURL} />
Hinzugef├╝gt in: astro@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 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.

Hinzugef├╝gt in: astro@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>

Astro.slots enth├Ąlt Funktionen, mit denen du die Slot-Kinder einer Astro-Komponente ├Ąndern kannst.

Type: (slotName: string) => boolean

Mit Astro.slots.has() kannst du pr├╝fen, ob Inhalte f├╝r einen bestimmten Slot-Namen existieren. Das kann n├╝tzlich sein, wenn du Slot-Inhalte wrappen willst, aber die Wrapper-Elemente nur dann darstellen willst, wenn der Slot verwendet wird.

---
---
<slot />
{Astro.slots.has('more') && (
<aside>
<h2>More</h2>
<slot name="more" />
</aside>
)}

Type: (slotName: string, args?: any[]) => Promise<string>

Du kannst den Inhalt eines Slots asynchron mit Astro.slots.render() in eine HTML-Zeichenkette umwandeln.

---
const html = await Astro.slots.render('default');
---
<Fragment set:html={html} />

Astro.slots.render() akzeptiert optional ein zweites Argument: ein Array von Parametern, die an alle untergeordneten Funktionen weitergeleitet werden. Dies kann f├╝r benutzerdefinierte Hilfskomponenten n├╝tzlich sein.

Zum Beispiel wandelt diese <Shout />-Komponente ihre Nachricht in Gro├čbuchstaben um und ├╝bergibt sie an den Standard-Slot:

src/components/Shout.astro
---
const message = Astro.props.message.toUpperCase();
let html = '';
if (Astro.slots.has('default')) {
html = await Astro.slots.render('default', [message]);
}
---
<Fragment set:html={html} />

Eine Callback-Funktion, die als Kind von <Shout /> ├╝bergeben wird, erh├Ąlt den Parameter Nachricht in Gro├čbuchstaben:

src/pages/index.astro
---
import Shout from "../components/Shout.astro";
---
<Shout message="slots!">
{(message) => <div>{message}</div>}
</Shout>
<!-- renders as <div>SLOTS!</div> -->

Mit Astro.self k├Ânnen Astro-Komponenten rekursiv aufgerufen werden. Mit diesem Verhalten kannst du eine Astro-Komponente aus sich selbst heraus rendern, indem du <Astro.self> in der Komponentenvorlage verwendest. Dies kann bei der Iteration ├╝ber gro├če Datenspeicher und verschachtelte Datenstrukturen hilfreich sein.

NestedList.astro
---
const { items } = Astro.props;
---
<ul class="nested-list">
{items.map((item) => (
<li>
<!-- Wenn es eine verschachtelte Datenstruktur gibt, rendern wir `<Astro.self>` -->
<!-- und k├Ânnen Eigenschaften mit dem rekursiven Aufruf durchreichen -->
{Array.isArray(item) ? (
<Astro.self items={item} />
) : (
item
)}
</li>
))}
</ul>

Diese Komponente k├Ânnte dann wie folgt verwendet werden:

---
import NestedList from './NestedList.astro';
---
<NestedList items={['A', ['B', 'C'], 'D']} />

Und w├╝rde HTML wie folgt darstellen werden:

<ul class="nested-list">
<li>A</li>
<li>
<ul class="nested-list">
<li>B</li>
<li>C</li>
</ul>
</li>
<li>D</li>
</ul>

Die Endpunktfunktionen erhalten ein Kontextobjekt als ersten Parameter. Es spiegelt viele der globalen Eigenschaften von Astro wider.

endpoint.json.ts
import type { APIContext } from 'astro';
export function get(context: APIContext) {
// ...
}

context.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 Route-Pattern entspricht.

src/pages/posts/[id].json.ts
import type { APIContext } from 'astro';
export function getStaticPaths() {
return [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } }
];
}
export function get({ params }: APIContext) {
return {
body: JSON.stringify({ id: params.id })
};
}

Siehe auch: params

context.props ist ein Objekt, das alle props enth├Ąlt, die von getStaticPaths() ├╝bergeben werden. Da getStaticPaths() bei der Erstellung f├╝r SSR (Server-seitiges Rendering) nicht verwendet wird, ist context.props nur bei statischen Builds verf├╝gbar.

src/pages/posts/[id].json.ts
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 {
body: JSON.stringify({ author: props.author }),
};
}

Siehe auch: Daten├╝bergabe mit props

Ein Standard Request-Objekt. Es kann verwendet werden, um die url, headers, method und sogar den Body der Anfrage zu erhalten.

import type { APIContext } from 'astro';
export function get({ request }: APIContext) {
return {
body: `Hello ${request.url}`
}
}

Siehe auch: Astro.request

context.cookies enth├Ąlt Helfer zum Lesen und Bearbeiten von Cookies.

Siehe auch: Astro.cookies

Ein URL-Objekt, das aus dem aktuellen context.request.url-URL-String-Wert konstruiert wird.

Siehe auch: Astro.url

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.

import type { APIContext } from 'astro';
export function get({ clientAddress }: APIContext) {
return {
body: `Deine IP-Adresse lautet: ${clientAddress}`
}
}

Siehe auch: Astro.clientAddress

context.site gibt eine URL zur├╝ck, die aus site in deiner Astro-Konfiguration erstellt wurde. Wenn sie nicht definiert ist, wird eine URL von localhost zur├╝ckgegeben.

Siehe auch: Astro.site

context.generator ist ein praktischer Weg, um die Version von Astro anzugeben, die in deinem Projekt l├Ąuft. Es hat das Format ÔÇťAstro v1.x.xÔÇŁ.

src/pages/site-info.json.ts
import type { APIContext } from 'astro';
export function get({ generator, site }: APIContext) {
const body = JSON.stringify({ generator, site });
return new Response(body);
}

Siehe auch: Astro.generator

Die Funktion context.redirect() gibt ein Response-Objekt zur├╝ck, mit dem du auf eine andere Seite umleiten kannst. Diese Funktion ist nur verf├╝gbar, wenn du f├╝r SSR (server-side rendering) baust und sollte nicht f├╝r statische Seiten verwendet werden.

import type { APIContext } from 'astro';
export function get({ redirect }: APIContext) {
return redirect('/login', 302);
}

Siehe auch: Astro.redirect()

Wenn eine Seite dynamische Parameter im Dateinamen verwendet, muss diese Komponente eine Funktion getStaticPaths() exportieren.

Diese Funktion ist erforderlich, weil Astro ein statischer Website-Builder ist. Das bedeutet, dass deine gesamte Website vor der Zeit erstellt wird. Wenn Astro nicht wei├č, dass eine Seite zum Zeitpunkt der Erstellung generiert werden soll, werden deine Nutzer sie nicht sehen, wenn sie deine Website besuchen.

---
export async function getStaticPaths() {
return [
{ params: { /* required */ }, props: { /* optional */ } },
{ params: { ... } },
{ params: { ... } },
// ...
];
}
---
<!-- Deine HTML-Vorlage hier. -->

Die Funktion getStaticPaths() sollte ein Array von Objekten zur├╝ckgeben, um zu bestimmen, welche Pfade von Astro vorgerendert werden.

Sie kann auch in statischen Datei-Endpunkten f├╝r [dynamisches Routing] verwendet werden (/de/core-concepts/endpoints/#params-und-dynamisches-routing).

Der Schl├╝ssel params jedes zur├╝ckgegebenen Objekts sagt Astro, welche Routen gebaut werden sollen. Die zur├╝ckgegebenen Params m├╝ssen den dynamischen Parametern und den Restparametern entsprechen, die in deinem Komponenten-Dateipfad definiert sind.

params werden in der URL kodiert, daher werden nur Strings als Werte unterst├╝tzt. Der Wert f├╝r jedes params-Objekt muss mit den im Seitennamen verwendeten Parametern ├╝bereinstimmen.

Nehmen wir zum Beispiel an, du hast eine Seite unter src/pages/posts/[id].astro. Wenn du getStaticPaths von dieser Seite exportierst und folgendes f├╝r Pfade zur├╝ckgibst:

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

Dann wird Astro statisch Posts/1, Posts/2 und Posts/3 zur Erstellungszeit erzeugen.

Um zus├Ątzliche Daten an jede generierte Seite zu ├╝bergeben, kannst du auch einen props-Wert f├╝r jedes zur├╝ckgegebene Pfadobjekt festlegen. Im Gegensatz zu params werden props nicht in der URL kodiert und sind daher nicht auf Strings beschr├Ąnkt.

Nehmen wir zum Beispiel an, du generierst Seiten auf der Grundlage von Daten, die du von einer entfernten API abrufst. Du kannst der Seitenkomponente innerhalb von getStaticPaths das vollst├Ąndige Datenobjekt ├╝bergeben:

---
export async function getStaticPaths() {
const data = await fetch('...').then(response => response.json());
return data.map((post) => {
return {
params: { id: post.id },
props: { post },
};
});
}
const { id } = Astro.params;
const { post } = Astro.props;
---
<h1>{id}: {post.name}</h1>

Du kannst auch ein regul├Ąres Array ├╝bergeben, was hilfreich sein kann, wenn du eine bekannte Liste von Routen generieren oder stubben willst.

---
export async function getStaticPaths() {
const posts = [
{id: '1', category: "astro", title: "API-Referenz"},
{id: '2', category: "react", title: "Einen React-Counter erstellen!"}
];
return posts.map((post) => {
return {
params: { id: post.id },
props: { post }
};
});
}
const {id} = Astro.params;
const {post} = Astro.props;
---
<body>
<h1>{id}: {post.title}</h1>
<h2>Kategorie: {post.category}</h2>
</body>

Dann generiert Astro statisch Posts/1 und Posts/2 zur Erstellungszeit unter Verwendung der Seitenkomponente in Pages/Posts/[id].astro. Die Seite kann diese Daten mit Astro.props referenzieren:

Paginierung ist ein h├Ąufiger Anwendungsfall f├╝r Websites, den Astro ├╝ber die Funktion paginate() unterst├╝tzt. die Funktion paginate() erzeugt automatisch ein Array, das von getStaticPaths() zur├╝ckgegeben wird und eine URL f├╝r jede Seite der paginierten Sammlung erzeugt. Die Seitennummer wird als Parameter und die Seitendaten werden als page-Prop ├╝bergeben.

export async function getStaticPaths({ paginate }) {
// Lade deine Daten mit fetch(), Astro.glob(), etc.
const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`);
const result = await response.json();
const allPokemon = result.results;
// Gibt eine paginierte Sammlung von Pfaden f├╝r alle Beitr├Ąge zur├╝ck
return paginate(allPokemon, { pageSize: 10 });
}
// Wenn sie richtig eingerichtet ist, hat die Seitenreferenz jetzt alles, was
// du brauchst um eine einzelne Seite zu rendern (siehe n├Ąchster Abschnitt).
const { page } = Astro.props;

paginate() nimmt den Dateinamen [Seite].astro oder [...Seite].astro an. Der Parameter Seite wird zur Seitennummer in deiner URL:

  • /posts/[page].astro w├╝rde die URLs /posts/1, /posts/2, /posts/3, usw. erzeugen.
  • /posts/[...page].astro w├╝rde die URLs /posts, /posts/2, /posts/3, usw. erzeugen.

Die Pagination ├╝bergibt jeder gerenderten Seite eine page-Eigenschaft, die eine einzelne Seite der Daten in der paginierten Sammlung darstellt. Dazu geh├Âren die Daten, die du paginiert hast (page.data), sowie Metadaten f├╝r die Seite (page.url, page.start, page.end, page.total, etc). Diese Metadaten sind n├╝tzlich f├╝r Dinge wie die Schaltfl├Ąche ÔÇťN├Ąchste SeiteÔÇŁ oder die Meldung ÔÇťZeige 1-10 von 100ÔÇŁ.

NameTypeDescription
page.dataArrayArray der Daten, die von data() f├╝r die aktuelle Seite zur├╝ckgegeben werden.
page.startnumberIndex of first item on current page, starting at 0 (e.g. if pageSize: 25, this would be 0 on page 1, 25 on page 2, etc.).
page.endnumberIndex des letzten Artikels auf der aktuellen Seite.
page.sizenumberWie viele Artikel pro Seite.
page.totalnumberDie Gesamtzahl der Eintr├Ąge auf allen Seiten.
page.currentpagenumberdie aktuelle Seitenzahl, beginnend mit 1.
page.lastPagenumberDie Gesamtzahl der Seiten.
page.url.currentstringErmittelt die URL der aktuellen Seite (n├╝tzlich f├╝r kanonische URLs)
page.url.prevstring | undefinedErmittelt die URL der vorherigen Seite (wird undefined sein, wenn auf Seite 1).
page.url.nextstring | undefinedErmittelt die URL der n├Ąchsten Seite (wird undefined, wenn keine weiteren Seiten vorhanden sind).

Hinzugef├╝gt in: astro@2.0.0

Inhaltssammlungen bieten APIs zur Konfiguration und Abfrage deiner Markdown- oder MDX-Dokumente in src/content/. Die Funktionen und Anwendungsbeispiele findest du in unserem Leitfaden f├╝r Inhaltssammlungen (/de/guides/content-collections/).

Mit defineCollection() kannst du eine Sammlung in einer src/content/config.*-Datei konfigurieren.

src/content/config.ts
import { z, defineCollection } from 'astro:content';
const blog = defineCollection({
schema: z.object({
title: z.string(),
permalink: z.string().optional(),
}),
});
// Mache deine definierte Sammlung f├╝r Astro sichtbar
// mit dem `collections` Export
export const collections = { blog };

Diese Funktion akzeptiert die folgenden Eigenschaften:

Type: TSchema extends ZodType

schema ist ein optionales Zod-Objekt, um den Typ und die Form des Frontmatter f├╝r eine Sammlung zu konfigurieren. Jeder Wert muss einen Zod-Validator verwenden.

[Ein Beispiel f├╝r die Verwendung findest du in der Anleitung f├╝r Inhaltssammlungen (/de/guides/content-collections/#defining-a-collection-schema).

Type: (collection: string, filter?: (entry: CollectionEntry<collection>) => boolean) => CollectionEntry<collection>[]

getCollection() ist eine Funktion, die eine Liste der Eintr├Ąge einer Inhaltssammlung nach Sammlungsnamen abruft.

Sie gibt standardm├Ą├čig alle Eintr├Ąge in der Sammlung zur├╝ck und akzeptiert eine optionale Filterfunktion, um die Eintr├Ąge nach Eigenschaften einzugrenzen. Damit kannst du ├╝ber das data-Objekt nur nach bestimmten Eintr├Ągen in einer Sammlung auf der Basis von id-, slug- oder Frontmatter-Werten suchen.

---
import { getCollection } from 'astro:content';
// Get all `src/content/blog/` entries
const allBlogPosts = await getCollection('blog');
// Gib nur Beitr├Ąge mit `draft: true` im Frontmatter zur├╝ck
const draftBlogPosts = await getCollection('blog', ({ data }) => {
return data.draft === true;
});
---

Ein Beispiel für die Verwendung findest du in der Anleitung für Inhaltssammlungen (EN).

Type: (collection: string, slug: string) => CollectionEntry<collection>

getEntryBySlug() ist eine Funktion, die einen einzelnen Sammlungseintrag anhand des Sammlungsnamens und des Eintrags slug abruft.

---
import { getEntryBySlug } from 'astro:content';
const enterprise = await getEntryBySlug('blog', 'enterprise');
---

[Ein Beispiel f├╝r die Verwendung findest du in der Anleitung f├╝r Inhaltssammlungen (/de/guides/content-collections/#querying-collections).

Die Funktionen getCollection() und getEntryBySlug() geben jeweils Eintr├Ąge vom Typ CollectionEntry zur├╝ck. Dieser Typ ist als Helferfunktion von astro:content verf├╝gbar:

import type { CollectionEntry } from 'astro:content';

Der Typ CollectionEntry<TCollectionName> ist ein Objekt mit den folgenden Werten. tCollectionName ist der Name der Sammlung, die du abfragst (z. B. CollectionEntry<'blog'>).

Example Type: 'entry-1.md' | 'entry-2.md' | ...

Eine eindeutige ID, die den Dateipfad relativ zu src/content/[collection] verwendet. Z├Ąhlt alle m├Âglichen String-Werte auf der Grundlage der Dateipfade der Sammlungseintr├Ąge auf.

Example Type: 'entry-1' | 'entry-2' | ...

Ein URL-f├Ąhiger Slug. Standardm├Ą├čig wird die id ohne die Dateierweiterung verwendet, kann aber durch Setzen der Eigenschaft [slug] (/de/guides/content-collections/#defining-custom-slugs) im Frontmatter einer Datei ├╝berschrieben werden.

Type: CollectionSchema<TCollectionName>

Ein Objekt mit Frontmatter-Eigenschaften, die aus deinem Sammlungsschema abgeleitet werden (siehe defineCollection() Referenz). Der Standardwert ist any, wenn kein Schema konfiguriert ist.

Type: string

Ein String, der den einfachen, nicht kompilierten Textk├Ârper des Markdown- oder MDX-Dokuments enth├Ąlt.

Type: () => Promise<RenderedEntry>

Eine Funktion, die ein gegebenes Markdown- oder MDX-Dokument f├╝r die Darstellung kompiliert. Sie gibt die folgenden Eigenschaften zur├╝ck:

  • <Content /> - Eine Komponente, die verwendet wird, um den Inhalt des Dokuments in einer Astro-Datei darzustellen.
  • headings - Eine generierte Liste von ├ťberschriften, die das Astro-Werkzeug getHeadings() bei Markdown- und MDX-Importen widerspiegelt.
  • remarkPluginFrontmatter - Das ge├Ąnderte Frontmatter-Objekt, nachdem ein remark- oder rehype-Plugin angewendet wurde. Wird auf den Typ any gesetzt.
---
import { getEntryBySlug } from 'astro:content';
const entry = await getEntryBySlug('blog', 'entry-1');
const { Content, headings, remarkPluginFrontmatter } = await entry.render();
---

Siehe die Anleitungs für Inhaltssammlungen (EN) für ein Anwendungsbeispiel.

Alle ESM-Module enthalten die Eigenschaft import.meta. Astro f├╝gt die Eigenschaft ÔÇťimport.meta.envÔÇŁ ├╝ber Vite hinzu.

import.meta.env.SSR kann verwendet werden, um zu wissen, wann auf dem Server gerendert wird. Manchmal willst du vielleicht eine andere Logik, zum Beispiel eine Komponente, die nur auf dem Client gerendert werden soll:

import { h } from 'preact';
export default function () {
return import.meta.env.SSR ? <div class="spinner"></div> : <FancyComponent />;
}

Astro enth├Ąlt mehrere integrierte Komponenten, die du in deinen Projekten verwenden kannst. Alle eingebauten Komponenten sind in .astro-Dateien ├╝ber import {} from 'astro/components'; verf├╝gbar.

Die Markdown-Komponente ist nicht mehr in Astro integriert. Wie du Markdown in deine Astro-Dateien importierst, findest du auf unserer Markdown-Seite.

---
import { Code } from 'astro/components';
---
<!-- Syntaxhervorhebung von JavaScript-Code. -->
<Code code={`const foo = 'bar';`} lang="js" />
<!-- Optional: passe dein Theme an. -->
<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
<!-- Optional: Aktiviere den Zeilenumbruch. -->
<Code code={`const foo = 'bar';`} lang="js" wrap />

Diese Komponente bietet Syntax-Highlighting f├╝r Codebl├Âcke zum Zeitpunkt der Erstellung (kein clientseitiges JavaScript enthalten). Die Komponente wird intern von Shiki betrieben und unterst├╝tzt alle g├Ąngigen Themen und Sprachen. Au├čerdem kannst du deine eigenen Themes und Sprachen hinzuf├╝gen, indem du sie an theme bzw. lang ├╝bergibst.

Um die Textmarker-Komponente Prism zu verwenden, musst du zuerst das Paket @astrojs/prism installieren:

Terminal-Fenster
npm install @astrojs/prism
---
import { Prism } from '@astrojs/prism';
---
<Prism lang="js" code={`const foo = 'bar';`} />

Diese Komponente bietet sprachspezifische Syntaxhervorhebung f├╝r Codebl├Âcke durch Anwendung der CSS-Klassen von Prism. Beachte, dass du ein Prism-CSS-Stylesheet bereitstellen (oder dein eigenes mitbringen) musst, damit die Syntaxhervorhebung angezeigt wird! Weitere Informationen findest du im Abschnitt Prism-Konfiguration.

In der Liste der von Prism unterst├╝tzten Sprachen findest du den entsprechenden Alias f├╝r eine Sprache. Und du kannst deine Astro-Codebl├Âcke auch mit lang="astro" anzeigen!

---
import { Debug } from 'astro/components';
const serverObject = {
a: 0,
b: "string",
c: {
nested: "object"
}
}
---
<Debug {serverObject} />

Diese Komponente bietet eine M├Âglichkeit, Werte auf der Client-Seite zu ├╝berpr├╝fen, ohne JavaScript.