import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro' import Since from '/components/Since.astro'

Astro unterstützt die schnelle, automatische Generierung von RSS-Feeds für Blogs und andere Content-Websites. RSS-Feeds machen es einfach für Benutzer deine Inhalte zu abbonieren.

Einrichten von @astrojs/rss

Das @astrojs/rss-Paket bietet Hilfsfunktionen zur Erzeugung von RSS-Feeds mithilfe von API-Endpunkten. Dies ermöglicht statische Feeds und die On-Demand-Generierung bei Verwendung eines SSR-Adapters.

1. Installiere @astrojs/rss mit deinem bevorzugten Paketmanager:

:::tip Stelle sicher, dass du in deiner astro.config eine site konfiguriert hast. Diese wird zur Erzeugung von Links in deinem RSS-Feed genutzt. :::

2. Erstelle eine Datei in src/pages mit einem Namen deiner Wahl und der Dateierweiterung .xml.js um die Ausgabe-URL für deinen Feed zu erzeugen. Einige übliche Namen für RSS-Feed URLs sind feed.xml oder rss.xml.

Die untere Beispiels-Datei src/pages/rss.xml.js wird einen RSS-Feed unter site/rss.xml erstellen.

3. Importiere die rss()-Hilfsfunktion aus dem @astrojs/rss-Paket in deine .xml.js Datei und exportiere eine Funktion, die sie mit folgenden Parametern zurückgibt:

import rss from '@astrojs/rss';export function GET(context) {  return rss({    // `<title>`-Feld in der XML-Ausgabe    title: 'Buzz’s Blog',    // `<description>`-Feld in der XML-Ausgabe    description: 'Eines bescheidenen Astronauts Handbuch zu den Sternen',    // Ziehe die "site" deines Projektes von dem Endpunkt-Kontext ein    // https://docs.astro.build/de/reference/api-reference/#endpunkt-kontext    site: context.site,    // Liste von `<item>`-Elementen in der XML-Ausgabe    // Siehe Abschnitt "Generieren von 'items'" für Beispiele mit Inhalts-Sammlungen und Glob-Imports    items: [],    // (optional) Benutzerdefinierten XML-Code einfügen    customData: `<language>de</language>`,  });}

Generieren von items

Das items-Feld akzeptiert eine Liste von RSS-Feed-Objekten, jeweils mit den erforderlichen Werten link, title und pubDate. Drei optionale Werte können auch inbegriffen sein: description (ein kurzer Auszug), content (der gesamte Inhalt deines Beitrages), und das customData-Feld zum Einfügen zusätzlicher Daten, wie z. B. anderer Frontmatter-Eigenschaften aus deinen Blog-Beiträgen.

Du kannst diese Liste aus einem Inhalts-Sammlungs-Schema erzeugen oder durch die Verwendung von Glob-Imports für Blogbeiträge, die sich in src/pages/ befinden.

Verwendung von Inhalts-Sammlungen

Um einen RSS-Feed von Seiten zu erstellen, die durch Inhalts-Sammlungen verwaltet werden, verwende die Hilfsfunktion getCollection() um die Liste deiner Elemente abzurufen.

import rss from '@astrojs/rss';import { getCollection } from 'astro:content';export async function GET(context) {  const blog = await getCollection('blog');  return rss({    title: 'Buzz’s Blog',    description: 'Eines bescheidenen Astronauts Handbuch zu den Sternen',    site: context.site,    items: blog.map((post) => ({      title: post.data.title,      pubDate: post.data.pubDate,      description: post.data.description,      customData: post.data.customData,      // Berechne den RSS link vom Beitrags-`slug`      // In diesem Beispiel wird davon ausgegangen, dass alle Beiträge als `/blog/[slug]`-Routen gerendert werden      link: `/blog/${post.slug}/`,    })),  });}

Optional: Ersetze dein vorhandenes Blog-Sammlungsschema, um die erwarteten RSS-Eigenschaften durchzusetzen.

Um sicherzustellen, dass jeder Blogeintrag ein gültiges RSS-Feed-Element erzeugt, kannst du optional rssSchema importieren und anwenden, anstatt jede einzelne Eigenschaft deines Schemas zu definieren.

import { defineCollection } from 'astro:content';import { rssSchema } from '@astrojs/rss';const blog = defineCollection({  schema: rssSchema,});export const collections = { blog };

Verwendung von Glob-Imports

Um einen RSS-Feed aus Dokumenten in src/pages/ zu erstellen, verwende die Hilfsfunktion pagesGlobToRssItems(). Diese akzeptiert ein import.meta.glob-Ergebnis und gibt eine Liste gültiger RSS-Feed-Elemente aus (siehe mehr über das Schreiben von Glob-Patterns um eingeschlossene Seiten anzugeben).

:::caution Diese Funktion setzt voraus, überprüft jedoch nicht, dass alle erforderlichen Feed-Eigenschaften in der Frontmatter jedes Dokuments vorhanden sind. Wenn du auf Fehler stößt, überprüfe die Frontmatter jeder Seite manuell. :::

import rss, { pagesGlobToRssItems } from '@astrojs/rss';export async function GET(context) {  return rss({    title: 'Buzz’s Blog',    description: 'Eines bescheidenen Astronauts Handbuch zu den Sternen',    site: context.site,    items: await pagesGlobToRssItems(      import.meta.glob('./blog/*.{md,mdx}'),    ),  });}

:::note[Verwendest du eine ältere Version?] Übergebe in Versionen von @astrojs/rss vor v2.1.0 dein Glob-Ergebnis direkt an items, ohne den Wrapper pagesGlobToRssItems():

items: import.meta.glob('./blog/*.{md,mdx}'),

:::

Den Vollständigen Beitragsinhalt beifügen

Der content Schlüssel enthält den gesamten Inhalt des Beitrages in HTML. Auf diese Weise kannst du den gesamten Inhalt deines Beitrages RSS-Feed-Readern zur Verfügung stellen.

:::tip Ein Paket wie sanitize-html stellt sicher, dass deine Inhalte ordnungsgemäß bereinigt, maskiert und codiert werden. :::

Beim Verwenden von Inhalts-Sammlungen, rendere den body des Beitrages mit einem Standard-Markdown-Parser wie markdown-it und bereinige das Ergebnis:

import rss from '@astrojs/rss';import { getCollection } from 'astro:content';import sanitizeHtml from 'sanitize-html';import MarkdownIt from 'markdown-it';const parser = new MarkdownIt();export async function GET(context) {  const blog = await getCollection('blog');  return rss({    title: 'Buzz’s Blog',    description: 'Eines bescheidenen Astronauts Handbuch zu den Sternen',    site: context.site,    items: blog.map((post) => ({      link: `/blog/${post.slug}/`,      // Hinweis: Komponente oder JSX-Ausdrücke in MDX-Dateien werden hierdurch nicht verarbeitet.      content: sanitizeHtml(parser.render(post.body)),      ...post.data,    })),  });}

Beim Verwenden von Glob-Importen mit Markdown, kannst du die compiledContent Hilfsfunktion verwerden um den gerenderten HTML-Code zur Bereinigung abzurufen. Hinweis: Diese Funktion ist für MDX-Dateien nicht unterstützt.

import rss from '@astrojs/rss';import sanitizeHtml from 'sanitize-html';export function GET(context) {  const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true });   const posts = Object.values(postImportResult);  return rss({    title: 'Buzz’s Blog',    description: 'Eines bescheidenen Astronauts Handbuch zu den Sternen',    site: context.site,    items: posts.map((post) => ({      link: post.url,      content: sanitizeHtml(post.compiledContent()),      ...post.frontmatter,    })),  });}

Ein Stylesheet hinzufügen

Du kannst deinen RSS-Feed ansprechend gestalten, um die Nutzererfahrung bei der Betrachtung im Browser zu verbessern.

Nutze die Option stylesheet der rss-Funktion, um einen absoluten Pfad zu deinem Stylesheet anzugeben.

rss({  // Beispiel: Nutze dein Stylesheet aus "public/rss/styles.xsl"  stylesheet: '/rss/styles.xsl',  // ...});

:::tip Falls du lieber kein eigenes Stylesheet erstellen möchtest, kannst du ein vorgefertigtes Stylesheet wie das Pretty Feed v3 Standard-Stylesheet verwende. Lade das Stylesheet von GitHub herunter und speichere es im public/-Verzeichnis deines Projektes. :::

Nächste Schritte

Nachdem du deinen Feed im Browser unter deine-domain.com/rss.xml aufgerufen hast und bestätigt hast, dass du die Daten für jeden Beitrag sehen kannst, kannst du nun deinen Feed auf deiner Website bewerben. Durch das Hinzufügen des Standard-RSS-Symbols kannst du deine Leser wissen lassen, dass sie deine Beiträge in ihrem eigenen Feed-Reader abonnieren können.

Ressourcen

• RSS-Feeds