Saltearse al contenido

RSS

Astro proporciona una generación rápida y automática de feeds RSS para blogs u otros sitios web con mucho contenido. Los feeds RSS proporcionan una forma fácil para que los usuarios se suscriban a tu contenido.

Configurando @astrojs/rss

Sección titulada Configurando @astrojs/rss

El paquete @astrojs/rss provee helpers para generar RSS feeds utilizando API endpoints. Esto desbloquea la generación de RSS feeds para builds estáticos y on-demand para cuando utilizamos un adaptador SSR.

  1. Instala @astrojs/rss utilizando tu gestor de paquetes favorito:

    Terminal window
    npm install @astrojs/rss

  2. Crea un archivo en src/pages/ con un nombre de tu elección y la extensión .xml.js para ser utilizado como la URL de salida de tu feed. Algunos nombres comunes de URL de feed RSS son feed.xml o rss.xml.

    El archivo de ejemplo a continuación src/pages/rss.xml.js creará un feed RSS en site/rss.xml.

  3. Importa el helper rss() del paquete @astrojs/rss en tu archivo .xml.js y exporta una función que lo devuelve utilizando los siguientes parámetros:

    src/pages/rss.xml.js
    import rss from '@astrojs/rss';
    

    export function GET(context) {
      return rss({
        // `<title>` campo en el xml generado
        title: 'Blog de Buzz',
        // `<description>` campo en el xml generado
        description: 'Guía de un humilde astronauta a las estrellas',
        // Usa el "site" desde el contexto del endpoint
        // https://docs.astro.build/en/reference/api-reference/#contextsite
        site: context.site,
        // Array de `<item>`s en el xml generado
        // Consulta la sección "Generando `items`" para ejemplos utilizando colecciones de contenido y glob imports
        items: [],
        // (opcional) inyecta xml personalizado
        customData: `<language>es</language>`,
      });
    }

Generando items

Sección titulada Generando items

El campo items acepta una lista de objetos de feed RSS, cada uno con un link, title y pubDate requeridos. También se pueden incluir tres valores opcionales: description (una breve descripción), content (el contenido completo de tu publicación) y un campo customData para incluir cualquier dato adicional, como otras propiedades de frontmatter de tus publicaciones de blog.

Puedes generar esta matriz a partir de un esquema de colección de contenido o utilizando importaciones globales para las publicaciones del blog ubicadas dentro de src/pages/.

Usando colecciones de contenido

Sección titulada Usando colecciones de contenido

Para crear un RSS feed de páginas manejadas en colecciones de contenido, utiliza la función getCollection() para recuperar la lista de tus artículos.

src/pages/rss.xml.js
export async function GET(context) {
  const blog = await getCollection('blog');
  return rss({
    title: 'Blog de Buzz',
    description: 'Guía de un humilde astronauta a las estrellas',
    site: context.site,
    items: blog.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      customData: post.data.customData,
      // Calcula el link RSS desde el `slug` del post
      // Este ejemplo asume que todos los posts son renderizados como rutas `/blog/[slug]`
      link: `/blog/${post.slug}/`,
    })),
  });
}

Opcional: reemplaza tu esquema de colección de blog existente para cumplir con las propiedades de RSS esperadas.

Para asegurarte de que cada entrada de blog produzca un elemento de feed RSS válido, puedes importar y aplicar opcionalmente rssSchema en lugar de definir cada propiedad individual de tu esquema.

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


export const collections = { blog };

Usando glob imports

Sección titulada Usando glob imports
Agregado en: @astrojs/rss@2.1.0

Para crear un RSS feed de documentos en src/pages/, utiliza la función pagesGlobToRssItems(). Esta acepta un resultado de import.meta.glob y devuelve un array de items RSS válidos (consulta más sobre escribir patrones glob para especificar qué páginas incluir).

src/pages/rss.xml.js
import rss, { pagesGlobToRssItems } from '@astrojs/rss';
export async function GET(context) {
  return rss({
    title: 'Blog de Buzz',
    description: 'Guía de un humilde astronauta a las estrellas',
    site: context.site,
    items: await pagesGlobToRssItems(
      import.meta.glob('./blog/*.{md,mdx}'),
    ),
  });
}

Incluyendo contenido completo de un artículo

Sección titulada Incluyendo contenido completo de un artículo
Agregado en: astro@1.6.14

La llave content contiene el contenido completo del post como HTML. Esto te permite hacer disponible todo el contenido del post a los lectores de RSS.

Cuando utilices colecciones de contenido, renderiza el body del post usando un parser de Markdown estándar como markdown-it y desinfecta el resultado:

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: 'Blog de Buzz',
    description: 'Guía de las estrellas para un humilde astronauta',
    site: context.site,
    items: blog.map((post) => ({
      link: `/blog/${post.slug}/`,
      // Nota: esto no procesará componentes ni expresiones JSX en archivos MDX.
      content: sanitizeHtml(parser.render(post.body)),
      ...post.data,
    })),
  });
}

Cuando utilices imports glob con Markdown, puedes utilizar el helper compiledContent() para recuperar el HTML renderizado para desinfectarlo. Nota: esta función no es compatible con archivos 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: 'Guía de un humilde astronauta a las estrellas',
    site: context.site,
    items: posts.map((post) => ({
      link: post.url,
      content: sanitizeHtml(post.compiledContent()),
      ...post.frontmatter,
    })),
  });
}

Añadiendo una hoja de estilos

Sección titulada Añadiendo una hoja de estilos

Puedes estilar tu RSS feed para proveer una experiencia de usuario más placentera a la hora de ver el archivo en el navegador.

Utiliza la opción stylesheet de la helper function rss para especificar un path absoluto a tu hoja de estilos.

rss({
  // ej. utiliza tus estilos de "public/rss/styles.xsl"
  stylesheet: '/rss/styles.xsl',
  // ...
});

Siguientes pasos

Sección titulada Siguientes pasos

Después de visitar tu feed en el navegador en your-domain.com/rss.xml y confirmar que puedes ver datos para cada una de tus publicaciones, ahora puedes promocionar tu feed en tu sitio web. Agregar el icono estándar de RSS a tu sitio informa a tus lectores que pueden suscribirse a tus publicaciones en su propio lector de feeds.

Recursos

Sección titulada Recursos