Ajouter un flux RSS

Astro prend en charge la génération rapide et automatique de flux RSS pour les blogs et autres sites web de contenu. Les flux RSS permettent aux utilisateurs de s’abonner facilement à votre contenu.

Mise en place de @astrojs/rss

Titre de la section Mise en place de @astrojs/rss

Le paquet @astrojs/rss fournit des aides pour générer des flux RSS en utilisant des points de terminaison d’API. . Cela débloque à la fois les constructions statiques et la génération à la demande lors de l’utilisation d’un adaptateur SSR (EN).

1. Installez @astrojs/rss en utilisant votre gestionnaire de paquets préféré :

   npm

   npm install @astrojs/rss

   pnpm

   pnpm add @astrojs/rss

   Yarn

   yarn add @astrojs/rss

   Astuce

   Assurez-vous d’avoir configuré un site (EN) dans le astro.config de votre projet. Ce site sera utilisé pour générer des liens vers vos articles RSS.

2. Créez un fichier dans src/pages/ avec un nom de votre choix et l’extension .xml.js qui sera utilisé comme URL de sortie pour votre flux. Certains noms d’URL de flux RSS courants sont feed.xml ou rss.xml.

   Le fichier d’exemple ci-dessous src/pages/rss.xml.js créera un flux RSS à l’adresse site/rss.xml.

3. Importez l’aide rss() du paquetage @astrojs/rss dans votre fichier .xml.js et exportez une fonction qui la retourne en utilisant les paramètres suivants :

   src/pages/rss.xml.js

   import rss from '@astrojs/rss';
   
   export function GET(context) {
     return rss({
       // `<title>` champ dans le fichier xml de sortie
       title: 'Blog de Buzz',
       // `<description>` champ dans le fichier xml de sortie
       description: 'Le guide des étoiles d'un humble astronaute',
       // Insérez le "site" de votre projet dans le contexte du point de terminaison.
       // https://docs.astro.build/fr/reference/api-reference/#contextsite
       site: context.site,
       // Tableau des `<item>`s dans la sortie xml
       // Voir la section "Génération d'éléments" pour des exemples utilisant des collections de contenu et des importations globales.
       items: [],
       // (optional) injecter du xml personnalisé
       customData: `<language>fr-FR</language>`,
     });
   }

Générer des items

Titre de la section Générer des items

Le champ items accepte une liste d’objets de flux RSS, chacun avec un link, un title et un pubDate obligatoires. Trois valeurs optionnelles peuvent également être incluses : description (un court extrait), content (le contenu complet de votre article), et un champ customData pour inclure des données supplémentaires, telles que d’autres propriétés de vos articles de blog.

Vous pouvez générer ce tableau à partir d’un schéma de collection de contenu ou en utilisant glob imports pour les articles de blog situés dans src/pages/.

Utilisation des collections de contenu

Titre de la section Utilisation des collections de contenu

Pour créer un flux RSS de pages gérées dans les collections de contenu, utilisez la fonction getCollection() pour récupérer la liste de vos éléments.

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: 'Blog de Buzz',
    description: 'Le guide des étoiles d'un humble astronaute',
    site: context.site,
    items: blog.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      customData: post.data.customData,
      // Calculer le lien RSS à partir de l'article `slug`
      // Cet exemple suppose que tous les articles sont rendus sous forme de routes `/blog/[slug]`.
      link: `/blog/${post.slug}/`,
    })),
  });
}

Facultatif : remplacez votre schéma de collection de blogs existant pour appliquer les propriétés RSS attendues.

Pour vous assurer que chaque entrée de blog produise un élément de flux RSS valide, vous pouvez éventuellement importer et appliquer rssSchema au lieu de définir chaque propriété individuelle de votre schéma.

src/content/config.ts

import { defineCollection } from 'astro:content';
import { rssSchema } from '@astrojs/rss';

const blog = defineCollection({
  schema: rssSchema,
});

export const collections = { blog };

Utilisation des importations globales

Titre de la section Utilisation des importations globales

Ajouté à la version : @astrojs/rss@2.1.0

Pour créer un flux RSS à partir des documents contenus dans src/pages/, utilisez l’aide pagesGlobToRssItems(). Elle accepte un résultat import.meta.glob et produit un tableau d’éléments de flux RSS valides (voir plus d’informations sur l’écriture de motifs glob pour spécifier les pages à inclure).

Attention

Cette fonction suppose, mais ne vérifie pas, que toutes les propriétés de flux nécessaires sont présentes dans le premier plan de chaque document. Si vous rencontrez des erreurs, vérifiez manuellement le recto de chaque page.

src/pages/rss.xml.js

import rss, { pagesGlobToRssItems } from '@astrojs/rss';

export async function GET(context) {
  return rss({
    title: 'Blog de Buzz',
    description: 'Le guide des étoiles d'un humble astronaute',
    site: context.site,
    items: await pagesGlobToRssItems(
      import.meta.glob('./blog/*.{md,mdx}'),
    ),
  });
}

Vous utilisez une version plus ancienne ?

Dans les versions de @astrojs/rss antérieures à v2.1.0, passez le résultat de votre glob directement à items sans le wrapper pagesGlobToRssItems() :

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

Inclure le contenu intégral de l’article

Titre de la section Inclure le contenu intégral de l’article

Ajouté à la version : astro@1.6.14

La clé content contient le contenu complet de l’article en HTML. Cela vous permet de mettre l’intégralité du contenu de votre article à la disposition des lecteurs de flux RSS.

Astuce

Un paquet comme sanitize-html s’assurera que votre contenu est correctement assaini, échappé et encodé.

Lorsque vous utilisez des collections de contenu, rendez le body du message en utilisant un analyseur Markdown standard comme markdown-it et désinfectez le résultat :

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: 'Blog de Buzz',
    description: 'Le guide des étoiles d'un humble astronaute',
    site: context.site,
    items: blog.map((post) => ({
      link: `/blog/${post.slug}/`,
      // Note : ceci ne traitera pas les composants ou les expressions JSX dans les fichiers MDX.
      content: sanitizeHtml(parser.render(post.body)),
      ...post.data,
    })),
  });
}

Lorsque vous utilisez des importations globales avec Markdown, vous pouvez utiliser l’aide compiledContent() pour récupérer le HTML rendu pour l’assainissement. Note : cette fonctionnalité n’est pas supportée pour les fichiers MDX.

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: 'Blog de Buzz',
    description: 'Le guide des étoiles d'un humble astronaute',
    site: context.site,
    items: posts.map((post) => ({
      link: post.url,
      content: sanitizeHtml(post.compiledContent()),
      ...post.frontmatter,
    })),
  });
}

Ajouter une feuille de style

Titre de la section Ajouter une feuille de style

Stylez votre flux RSS pour une expérience utilisateur plus agréable lorsque vous visualisez le fichier dans votre navigateur.

Utilisez l’option stylesheet de la fonction rss pour spécifier un chemin absolu vers votre feuille de style.

...

rss({
  // ex. utilisez votre feuille de style depuis "public/rss/styles.xsl"
  stylesheet: '/rss/styles.xsl',
});

Astuce

Si vous préférez ne pas créer votre propre feuille de style, vous pouvez utiliser une feuille de style préétablie comme la Pretty Feed v3 default stylesheet. Téléchargez la feuille de style depuis GitHub et enregistrez-la dans le répertoire public/ de votre projet.

Prochaines étapes

Titre de la section Prochaines étapes

Après avoir consulté votre flux dans le navigateur à l’adresse votre-domaine.com/rss.xml et confirmé que vous pouvez voir les données de chacun de vos articles, vous pouvez maintenant promouvoir votre flux sur votre site web. L’ajout de l’icône RSS standard sur votre site permet à vos lecteurs de savoir qu’ils peuvent s’abonner à vos articles dans leur propre lecteur de flux.

Resources

Titre de la section Resources

• RSS Feeds