title | description | i18nReady | type |
---|---|---|---|
Adicione um feed RSS |
Adiciona um feed RSS no seu site Astro que permite seus usuários se inscreverem ao seu conteúdo. |
true |
recipe |
import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';
import Since from '/components/Since.astro';
Astro suporta geração rápida e automática de feeds RSS para blogs e outros websites orientados a conteúdo. Feeds RSS fornecem uma forma fácil para usuários se inscreverem ao seu conteúdo.
O pacote @astrojs/rss
fornece utilitários para a geração de feeds RSS utilizando endpoints de API. Isso permite builds estáticas e geração sob demanda quando você estiver utilizando um adaptador de SSR.
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install @astrojs/rss
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm add @astrojs/rss
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add @astrojs/rss
```
</Fragment>
</PackageManagerTabs>
:::tip
Garanta de que você [configurou um `site`](/pt-br/reference/configuration-reference/#site) no `astro.config` do seu projeto. Você usará isso para gerar links para seus artigos RSS.
:::
-
Crie um arquivo em
src/pages/
com o nome que preferir e a extensão.xml.js
para ser usado como a URL final do seu feed. Algumas URLs comuns para feed RSS sãofeed.xml
ourss.xml
.O arquivo de exemplo abaixo
src/pages/rss.xml.js
vai criar um feed RSS emsite/rss.xml
. -
Importe o utilitário
rss()
do pacote@astrojs/rss
para o seu arquivo.xml.js
e exporte uma função que retorne ele usando os seguintes parâmetros:import rss from '@astrojs/rss'; export function GET(context) { return rss({ // campo `<title>` no xml final title: 'Blog do Buzz', // campo `<description>` no xml final description: 'O guia de um humilde Astronauta para as estrelas', // Pega o "site" do seu projeto do contexto do endpoint // https://docs.astro.build/pt-br/reference/api-reference/#contextsite site: context.site, // Array de `<item>`s no xml final // Veja a seção "Gerando items" para exemplos utilizando coleções de conteúdo e importações de glob items: [], // (opcional) injeta xml customizado customData: `<language>pt-BR</language>`, }); }
O campo items
aceita uma lista de objetos de feed RSS, que podem ser gerados a partir de entradas de coleções de conteúdo usando getCollection()
ou de seus arquivos de página usando pagesGlobToRssItems()
.
O formato padrão do feed RSS inclui os seguintes valores para cada item publicado:
title
: O título da entrada. Opcional somente se umadescription
for definida. Caso contrário, é obrigatório.description
: Um pequeno trecho ou descrição da entrada. Opcional apenas se umtitle
for definido. Caso contrário, é obrigatório.link
: Um URL para a fonte original da entrada. (opcional)pubDate
: A data de publicação da entrada. (opcional)content
: O conteúdo completo de sua postagem. (opcional)customData
: Um campo para incluir dados extras, como outras propriedades de frontmatter de suas postagens de blog.
Para criar um feed RSS de páginas gerenciadas em coleções de conteúdo, use a função getCollection()
para recuperar os dados necessários para seu array items
. Você precisará especificar os valores de cada propriedade desejada (por exemplo, title
, description
) a partir dos dados retornados.
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
export async function GET(context) {
const blog = await getCollection('blog');
return rss({
title: 'Blog do Buzz',
description: 'O guia de um humilde Astronauta para as estrelas',
site: context.site,
items: blog.map((postagem) => ({
title: postagem.data.titulo,
pubDate: postagem.data.dataPub,
description: postagem.data.descricao,
customData: postagem.data.dadosCustom,
// Computa o link RSS a partir da `slug` da postagem
// Este exemplo assume que todas as postagens são renderizadas como rotas `/blog/[slug]`
link: `/blog/${post.slug}/`,
})),
});
}
Opcional: substitua seus esquemas de coleções do blog para garantir essas propriedades de RSS esperadas.
Para garantir que cada entrada da coleção produz um item válido no feed RSS, você pode opcionalmente importar e aplicar rssSchema
ao invés de definir cada propriedade individual do seu esquema.
import { defineCollection } from 'astro:content';
import { rssSchema } from '@astrojs/rss';
const blog = defineCollection({
schema: rssSchema,
});
export const collections = { blog };
Para criar um feed RSS a partir de documentos em src/pages/
, utilize o utilitário pagesGlobToRssItems()
. Ele aceita um resultado de import.meta.glob
e devolve um array de itens de feed RSS válidos (veja mais sobre como escrever padrões de glob para especificar quais páginas incluir).
:::caution Essa função assume, mas não verifica, que todas as propriedades necessárias do feed estão presentes no frontmatter de cada documento. Se você encontrar erros, verifique o frontmatter de cada página manualmente. :::
import rss, { pagesGlobToRssItems } from '@astrojs/rss';
export async function GET(context) {
return rss({
title: 'Blog do Buzz',
description: 'O guia de um humilde Astronauta para as estrelas',
site: context.site,
items: await pagesGlobToRssItems(
import.meta.glob('./blog/*.{md,mdx}'),
),
});
}
:::note[Utilizando uma versão antiga?]
Em versões de @astrojs/rss
antes da v2.1.0, passe seu resultado de glob diretamente para items
sem ser envolto de pagesGlobToRssItems()
:
items: import.meta.glob('./blog/*.{md,mdx}'),
Esse método está descontinuado para todas as versões do Astro desde a v2.1.0 e não pode ser usado em projetos modernos. :::
A chave content
contém o conteúdo completo da postagem como HTML. Isso te permite fazer o conteúdo da sua postagem inteira disponível a leitores de feeds RSS.
:::tip
Um pacote como sanitize-html
vai garantir que o seu conteúdo é propriamente sanitizado, escapado e codificado. No processo, esse pacote também pode remover alguns elementos e atributos inofensivos, portanto, certifique-se de verificar o resultado e configurar o pacote de acordo com suas necessidades.
:::
Ao utilizar coleções de conteúdo, renderize o body
da postagem utilizando um parser padrão de Markdown como markdown-it
e sanitize o resultado, incluindo quaisquer tags extras (por exemplo, <img>
) necessárias para renderizar seu conteúdo::
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 do Buzz',
description: 'O guia de um humilde Astronauta para as estrelas',
site: context.site,
items: blog.map((postagem) => ({
link: `/blog/${postagem.slug}/`,
// Nota: isso não irá processar componentes ou expressões JSX em arquivos MDX.
content: sanitizeHtml(parser.render(post.body), {
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img'])
}),
...postagem.data,
})),
});
}
Ao utilizar importações de glob com Markdown, você pode utilizar o utilitário compiledContent()
para pegar o HTML renderizado para sanitização. Nota: essa funcionalidade não é suportada para arquivos MDX.
import rss from '@astrojs/rss';
import sanitizeHtml from 'sanitize-html';
export function GET(context) {
const resultadoImportacaoPostagem = import.meta.glob('../postagens/**/*.md', { eager: true });
const postagens = Object.values(resultadoImportacaoPostagem);
return rss({
title: 'Blog do Buzz',
description: 'O guia de um humilde Astronauta para as estrelas',
site: context.site,
items: postagens.map((postagem) => ({
link: postagem.url,
content: sanitizeHtml(postagem.compiledContent()),
...postagem.frontmatter,
})),
});
}
O feed RSS do Astro produz links com uma barra no final por padrão, independentemente do valor que você tenha configurado para trailingSlash
. Isso significa que seus links RSS podem não corresponder exatamente às URLs das postagens.
Se você tiver definido trailingSlash: “never”
em seu astro.config.mjs
, defina trailingSlash: false
no utilitário rss()
para que o feed corresponda à configuração do projeto.
import rss from '@astrojs/rss';
export function GET(context) {
const posts = Object.values(postImportResult);
return rss({
title: 'Buzz’s Blog',
description: 'A humble Astronaut’s guide to the stars',
site: context.site,
trailingSlash: false,
items: posts.map((post) => ({
link: post.url,
...post.frontmatter,
})),
});
}
Estilize seu feed RSS para tornar a experiência do usuário mais agradável quando estiver visualizando o arquivo em seu navegador.
Utilize a opção stylesheet
da função rss
para especificar um caminho absoluto para sua folha de estilos.
rss({
// ex. utiliza sua folha de estilos de "public/rss/styles.xsl"
stylesheet: '/rss/styles.xsl',
// ...
});
:::tip
Se você preferir não criar sua própria folha de estilos RSS, você pode utilizar uma folha de estilos pré-pronta como a folha de estilos padrão do Pretty Feed v3. Baixe a folha de estilos do GitHub e salve no diretório public/
do seu projeto.
:::
A descoberta automática de RSS permite que os navegadores e outros softwares localizem automaticamente o feed RSS de um site a partir da URL principal.
Para ativá-la, adicione uma tag <link>
com os seguintes atributos ao elemento head
de seu site:
<link
rel="alternate"
type="application/rss+xml"
title="Título de seu site"
href={`${Astro.site}rss.xml`}
/>
Com essa tag, os leitores do seu blog podem inserir a URL de base do seu site no leitor de RSS para assinar suas publicações sem precisar da URL específica do seu feed RSS.
Após visitar seu feed no navegador em seu-dominio.com.br/rss.xml
e confirmar que você consegue ver os dados das suas postagens, você pode agora promover seu feed em seu website. Adicionar o ícone RSS padrão ao seu site permite que os leitores saibam que podem assinar suas publicações em seus próprios leitores de feeds.