Agregar una fuente RSS

Astro permite generar de forma rápida y automática fuentes RSS para blogs y otras páginas web con contenido. Las fuentes RSS ofrecen a los usuarios una forma sencilla de suscribirse a tu contenido.

Configuración de @astrojs/rss

El paquete @astrojs/rss ofrece funciones de utilidad para generar fuentes RSS mediante endpoints de la API (EN). Esto permite tanto las compilaciones estáticas como la generación bajo demanda al usar un adaptador SSR.

1. Instala @astrojs/rss con tu gestor de paquetes preferido:

   npm

   npm install @astrojs/rss

   pnpm

   pnpm add @astrojs/rss

   Yarn

   yarn add @astrojs/rss

   Consejo

   Asegúrate de haber configurado un site (EN) en el archivo astro.config de tu proyecto. Se usará para generar enlaces a tus artículos RSS.

2. Crea un archivo en src/pages/ con el nombre que prefieras y la extensión .xml.js, que se usará como URL de salida para tu fuente RSS. Algunos nombres habituales para las URL de fuentes RSS son feed.xml o rss.xml.

   El archivo de ejemplo que aparece a continuación, src/pages/rss.xml.js, creará una fuente RSS en site/rss.xml.

3. Importa la función auxiliar rss() del paquete @astrojs/rss a tu archivo .xml.js y exporta una función que la devuelva usando los siguientes parámetros:

   src/pages/rss.xml.js

   import rss from '@astrojs/rss';
   
   export function GET(context) {
     return rss({
       // Campo `<title>` en el XML de salida
       title: 'Blog de Buzz',
       // Campo `<description>` en el XML de salida
       description: 'Una humilde guía de un astronauta para conocer las estrellas',
       // Obtén el "site" de tu proyecto a partir del contexto del endpoint
       // https://docs.astro.build/es/reference/api-reference/#site
       site: context.site,
       // Una lista de elementos `<item>` en el XML de salida
       // Consulta la sección "Generación de items" para ver ejemplos en los que se usan colecciones de contenido e importaciones globales.
       items: [],
       // (opcional) insertar XML personalizado
       customData: `<language>es-ES</language>`,
     });
   }

See the @astrojs/rss README for the full configuration reference.

Generación de items

El campo items acepta una lista de objetos de fuentes RSS, que pueden generarse a partir de entradas de colecciones de contenido mediante getCollection() o a partir de los archivos de tus páginas mediante pagesGlobToRssItems().

El formato estándar de las fuentes RSS incluye metadatos para cada elemento publicado, entre los que se encuentran valores como:

• title: El título de la entrada. Es opcional solo si se ha establecido una descripción. En caso contrario, es obligatorio.
• description: Un breve extracto de la entrada o una descripción de la misma. Opcional solo si se ha establecido un título. En caso contrario, es obligatorio.
• link: Una URL que remita a la fuente original de la entrada. (opcional)
• pubDate: La fecha de publicación de la entrada. (opcional)
• content: El contenido completo de tu publicación. (opcional)

Consulta la referencia de configuración de items para ver una lista completa de opciones.

Uso de colecciones de contenidos

Para crear un canal RSS de las páginas gestionadas en colecciones de contenido (EN), usa la función getCollection() para recuperar los datos necesarios para tu lista de items. Tendrás que especificar los valores de cada propiedad deseada (p. ej., title, description) a partir de los datos devueltos.

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: 'Una humilde guía de un astronauta para conocer las estrellas',
    site: context.site,
    items: blog.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      // Computa el enlace RSS a partir del `id` de la entrada
      // En este ejemplo se da por hecho que todas las entradas se muestran mediante rutas del tipo `/blog/[id]`
      link: `/blog/${post.id}/`,
    })),
  });
}

Opcional: sustituye el esquema de la colección de tu blog actual para garantizar que se cumplan las propiedades RSS esperadas.

Para garantizar que cada entrada del blog genere un elemento válido en el canal RSS, puedes, si lo deseas, importar y aplicar rssSchema en lugar de definir cada propiedad del esquema por separado.

src/content.config.ts

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

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

export const collections = { blog };

Uso de importaciones glob

Agregado en: @astrojs/rss@2.1.0

Para crear un canal RSS a partir de los documentos de src/pages/, utiliza la función auxiliar pagesGlobToRssItems(). Esta función acepta un resultado de import.meta.glob y devuelve una lista de elementos válidos para el canal RSS (consulta más información sobre cómo escribir patrones glob (EN) para especificar qué páginas incluir).

Precaución

Esta función da por hecho, aunque no verifica, que todas las propiedades de tu fuente RSS necesarias estén presentes en la información preliminar de cada documento. Si detectas algún error, comprueba manualmente la información preliminar de cada página.

src/pages/rss.xml.js

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

export async function GET(context) {
  return rss({
    title: 'Blog de Buzz',
    description: 'Una humilde guía de un astronauta para conocer las estrellas',
    site: context.site,
    items: await pagesGlobToRssItems(
      import.meta.glob('./blog/*.{md,mdx}'),
    ),
  });
}

¿Estás usando una versión anterior?

En las versiones de @astrojs/rss anteriores a la v2.1.0, pasa el resultado de glob directamente a items sin usar la función pagesGlobToRssItems():

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

Este método ha quedado obsoleto en todas las versiones de Astro a partir de la v2.1.0 y no se puede usar en proyectos actuales.

Incluyendo el contenido completo de la entrada

Agregado en: astro@1.6.14

Establece la clave content en rss.items para proporcionar el contenido completo de una entrada en formato HTML. Esto permite que @astrojs/rss ponga a disposición de los lectores de fuentes RSS el texto completo en Markdown de tu entrada. También se admiten imágenes y enlaces con rutas URL completas. Sin embargo, no se admiten las imágenes ni los enlaces internos a otras páginas que usen rutas relativas.

Al renderizar el contenido completo de una entrada, deberás tener en cuenta las imágenes, los enlaces relativos, los estilos, los scripts y otros elementos que vayan más allá del texto estándar de Markdown y que puedas incluir en tus entradas. Es posible que tengas que añadir lógica adicional en tu endpoint src/pages/rss.xml.js para tener en cuenta estos elementos o para eliminar aquellos que no sean necesarios para una fuente RSS (p. ej., los que solo se usan para el estilo o la interacción en tu sitio web).

Puedes consultar una implementación concreta de la comunidad que aborda algunas de estas cuestiones, a modo de ejemplo de cómo proceder.

Consejo

Un paquete como sanitize-html se encargará de que tu contenido se depure, se escape y se codifique correctamente. Durante el proceso, es posible que dicho paquete también elimine algunos elementos y atributos inofensivos, así que asegúrate de comprobar el resultado y de configurar el paquete según tus necesidades.

Al utilizar colecciones de contenido, procesa el body de la entrada con un procesador Markdown estándar, como markdown-it, y depura el resultado, incluyendo cualquier etiqueta adicional (p. ej., <img>) necesaria para mostrar el contenido:

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: 'Una humilde guía de un astronauta para conocer las estrellas',
    site: context.site,
    items: blog.map((post) => ({
      link: `/blog/${post.id}/`,
      // Nota: esto no procesará los componentes ni las expresiones JSX de los archivos MDX.
      content: sanitizeHtml(parser.render(post.body), {
        allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img'])
      }),
      ...post.data,
    })),
  });
}

Al usar importaciones glob con Markdown, puedes usar la función auxiliar compiledContent() para recuperar el código HTML renderizado para su depuración. 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 async function GET(context) {
  const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true });
  const posts = Object.values(postImportResult);
  return rss({
    title: 'Blog de Buzz',
    description: 'Una humilde guía de un astronauta para conocer las estrellas',
    site: context.site,
    items: await Promise.all(posts.map(async (post) => ({
      link: post.url,
      content: sanitizeHtml((await post.compiledContent())),
      ...post.frontmatter,
    }))),
  });
}

Eliminar las barras finales

Por defecto, el canal RSS de Astro genera enlaces con una barra al final, independientemente del valor que hayas configurado para trailingSlash. Esto significa que es posible que tus enlaces RSS no coincidan exactamente con las URL de tus entradas.

Si has establecido trailingSlash: "never" en tu archivo astro.config.mjs, configura trailingSlash: false en la función auxiliar rss() para que tu fuente RSS se ajuste a la configuración de tu proyecto.

src/pages/rss.xml.js

import rss from '@astrojs/rss';

export function GET(context) {
  const posts = Object.values(postImportResult);
  return rss({
    title: 'Blog de Buzz',
    description: 'Una humilde guía de un astronauta para conocer las estrellas',
    site: context.site,
    trailingSlash: false,
    items: posts.map((post) => ({
      link: post.url,
      ...post.frontmatter,
    })),
  });
}

Agregar una hoja de estilo

Personaliza el aspecto de tu fuente RSS para ofrecer una experiencia de usuario más agradable al visualizar el archivo en el navegador.

Usa la opción stylesheet de la función rss para especificar una ruta absoluta a tu hoja de estilos.

rss({
  // Por ejemplo, usa tu hoja de estilos ubicada en "public/rss/styles.xsl"
  stylesheet: '/rss/styles.xsl',
  // ...
});

Consejo

Si prefieres no crear tu propia hoja de estilos, puedes usar una hoja de estilos ya preparada, como la hoja de estilos predeterminada de Pretty Feed v3. Descarga la hoja de estilos de GitHub y guárdala en el directorio public/ de tu proyecto.

Habilitar la detección automática de fuentes RSS

Detección automática de RSS permite a los navegadores y a otros programas encontrar automáticamente el canal RSS de un sitio web a partir de la URL principal.

Para habilitarlo, agrega una etiqueta <link> con los siguientes atributos al elemento head de tu sitio web:

<link
    rel="alternate"
    type="application/rss+xml"
    title="El título de tu sitio"
    href={new URL("rss.xml", Astro.site)}
/>

Con esta etiqueta, los lectores de tu blog pueden introducir la URL base de tu sitio web en su lector RSS para suscribirse a tus entradas sin necesidad de conocer la URL específica de tu fuente RSS.

Próximos pasos

Después de visitar tu fuente RSS en el navegador en tu-dominio.com/rss.xml y comprobar que puedes ver los datos de cada una de tus entradas, ya puedes [promocionar tu fuente RSS en tu página web] (https://medium.com/samsung-internet-dev/add-rss-feeds-to-your-website-to-keep-your-core-readers-engaged-3179dca9c91e#:~:text=com/~deno%2Drss-,Cómo%20promocionar%20tu%20feed%20RSS,-Ahora%20que%20ya%20tienes). Añadir el icono estándar de RSS a tu sitio web permite a tus lectores saber que pueden suscribirse a tus entradas en su propio lector de fuentes RSS.

Recursos

• Fuentes RSS