Skip to content

Latest commit

 

History

History
230 lines (179 loc) · 9.55 KB

rss.mdx

File metadata and controls

230 lines (179 loc) · 9.55 KB
Raw
title description i18nReady type
Füge einen RSS-Feed hinzu
Füge einen RSS-Feed zu deiner Astro Website hinzu, so dass Benutzer deine Inhalte abonnieren können.
true
recipe

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:
```shell npm install @astrojs/rss ``` ```shell pnpm add @astrojs/rss ``` ```shell yarn add @astrojs/rss ```

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

  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:
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