Flux RSS

Astro prend en charge la gĂ©nĂ©ration rapide et automatique de flux RSS pour les blogs et autres contenus. Pour plus d’informations sur les flux RSS en gĂ©nĂ©ral, voir aboutfeeds.com.

Mise en place d’@astrojs/rss

Section titled Mise en place d’@astrojs/rss

Le package @astrojs/rss fournit des fonctions d’aide pour la gĂ©nĂ©ration de flux RSS en utilisant des “API endpoints” (ou points d’arrĂȘt API). Cela permet de dĂ©bloquer Ă  la fois les builds statiques et la gĂ©nĂ©ration Ă  la demande lors de l’utilisation d’un adaptateur SSR.

Pour commencer, installez @astrojs/rss en utilisant votre gestionnaire de Package préféré :

Terminal window
npm install @astrojs/rss

Ensuite, assurez-vous que vous avez configurĂ© la valeur site dans le fichier astro.config de votre projet. Vous l’utiliserez pour gĂ©nĂ©rer des liens vers vos articles RSS.

Maintenant que tout est prĂȘt, gĂ©nĂ©rons notre premier flux RSS ! CrĂ©ez un fichier rss.xml.js dans votre rĂ©pertoire src/pages/. rss.xml sera l’URL de sortie, donc n’hĂ©sitez pas Ă  le renommer si vous prĂ©fĂ©rez.

Ensuite, importez l’Helper rss du Package @astrojs/rss et appelez-le avec les paramùtres suivants :

src/pages/rss.xml.js
import rss from '@astrojs/rss';
export function get(context) {
return rss({
// la valeur `<title>` de votre XML de sortie
title: 'Buzz’s Blog',
// la valeur `<description>` de votre XML de sortie
description: 'A humble Astronaut’s guide to the stars',
// Insérez la valeur "site" de votre projet dans le contexte de l'endpoint.
// https://docs.astro.build/fr/reference/api-reference/#contextsite
site: context.site,
// Un tableau d'`<item>`s dans votre XML de sortie
// Voir la section "Génération des items" pour des exemples d'utilisation des collections de contenu et des importations glob.
items: [],
// (optionnel) injecter des valeurs XML personnalisés
customData: `<language>en-us</language>`,
});
}

Le champ items accepte un tableau d’objets de flux RSS, chacun avec un link, title, pubDate, et des champs optionnels description, content, et customData. Vous pouvez gĂ©nĂ©rer ce tableau Ă  partir d’une collection de contenu ou en utilisant des importations globales.

Utilisation des collections de contenu

Section titled Utilisation des collections de contenu

Pour créer un flux RSS des pages gérées dans les collections de contenus (EN), vous utilisez la fonction getCollection() pour récupérer le tableau de vos items.

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 pour atteindre les Ă©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 du post `slug`
// Cet exemple suppose que tous les posts soient rendus avec la route `/blog/[slug]`
link: `/blog/${post.slug}/`,
})),
});
}

Vous pouvez configurer votre schéma de collection pour appliquer ces propriétés RSS attendues. Importez et appliquez rssSchema pour vous assurer que chaque entrée de la collection produit un item de flux RSS valide.

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

Utilisation des importations globales

Section titled Utilisation des importations globales
Ajouté à la version : @astrojs/rss@2.1.0

Pour crĂ©er un flux RSS depuis les documents dans /src/pages, utilisez l’Helper pagesGlobToRssItems(). Elle accepte un rĂ©sultat import.meta.glob et produit un tableau d’items de flux RSS valides (en savoir plus Ă  propos de l’écriture des patterns globaux pour spĂ©cifier les pages Ă  inclure).

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

src/pages/rss.xml.js
import rss, { pagesGlobToRssItems } from '@astrojs/rss';
export async function get(context) {
return rss({
title: 'Buzz’s Blog',
description: 'A humble Astronaut’s guide to the stars',
site: context.site,
items: await pagesGlobToRssItems(
import.meta.glob('./blog/*.{md,mdx}'),
),
});
}

Incluant le contenu complet de la publication

Section titled Incluant le contenu complet de la publication
Ajouté à la version : astro@1.6.14

La clĂ© content contient le contenu complet du post au format HTML. Cela vous permet de mettre l’intĂ©gralitĂ© du contenu de votre post Ă  la disposition des lecteurs du flux RSS.

Quand vous utilisez des collections de contenu, rendez le post body en utilisant un parser Markdown standard comme markdown-it et nettoyez le résultat :

src/pages/rss.xml.js
import rss from '@astrojs/rss';
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: 'A humble Astronaut’s guide to the stars',
site: context.site,
items: blog.map((post) => ({
link: `/blog/${post.slug}/`,
// Note : cela ne traitera pas les composants ou les expressions JSX dans les fichiers MDX.
content: sanitizeHtml(parser.render(post.body)),
...post.data,
})),
});
}

Quand vous utilisez les imports globaux avec Markdown, nous vous suggĂ©rons d’utiliser l’Helper compiledContent() pour rĂ©cupĂ©rer le HTML rendu afin de le nettoyer. 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: 'Buzz’s Blog',
description: 'A humble Astronaut’s guide to the stars',
site: context.site,
items: posts.map((post) => ({
link: post.url,
content: sanitizeHtml(post.compiledContent()),
...post.frontmatter,
})),
});
}

Ajout d’une feuille de style

Section titled Ajout d’une feuille de style

Vous pouvez styliser votre flux RSS pour une expérience utilisateur plus agréable lors de la visualisation du fichier dans votre navigateur.

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

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

Si vous n’avez pas de feuille de style RSS en tĂȘte, nous recommandons la feuille de style par dĂ©faut Pretty Feed v3, que vous pouvez tĂ©lĂ©charger depuis GitHub et sauvegarder dans le rĂ©pertoire public/ de votre projet.


More recipes