Zum Inhalt springen

Füge einen RSS-Feed hinzu

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:
Terminal-Fenster
npm install @astrojs/rss
  1. 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.

  1. 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:
src/pages/rss.xml.js
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 (EN) verwaltet werden, verwende die Hilfsfunktion getCollection() um die Liste deiner Elemente abzurufen.

src/pages/rss.xml.js
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.

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

Verwendung von Glob-Imports

Hinzugefügt in: @astrojs/rss@2.1.0

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).

src/pages/rss.xml.js
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}'),
),
});
}

Den Vollständigen Beitragsinhalt beifügen

Hinzugefügt in: astro@1.6.14

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.

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

src/pages/rss.xml.js
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.

src/pages/rss.xml.js
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',
});

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