Mais Receitas

Veja exemplos guiados de como construir funcionalidades no Astro.

Receitas Oficiais

• Compartilhe Estado Entre Ilhas

  Aprenda como compartilhar estado de componentes de frameworks com Nano Stores.

• Adicione um feed RSS

  Adiciona um feed RSS no seu site Astro que permite seus usuários se inscreverem ao seu conteúdo.

• Installing a Vite or Rollup plugin

  Learn how you can import YAML data by adding a Rollup plugin to your project.

• Build a custom image component

  Learn how to build a custom image component that supports media queries using the getImage function

• Construa formulários com rotas de API

  Aprenda como usar Javascript para submeter formulários para uma rota de API

• Build HTML Forms in Astro Pages

  Learn how to build HTML forms and handle submissions in your frontmatter

• Use Bun with Astro

  Learn how to use Bun with your Astro site.

• Chame endpoints do servidor

  Aprenda como chamar endpoints do servidor com Astro.

• Verifique um Captcha

  Aprenda como criar uma rota de API e buscá-la do cliente.

• Build your Astro Site with Docker

  Learn how to build your Astro site using Docker.

• Dynamically Import Images

  Learn how to dynamically import images using Vite's import.meta.glob function

• Adicione ícones em links externos

  Aprenda como installar um plugin rehype para adicionar ícones em links externos em seus arquivos Markdown

• Adicione funcionalidades de i18n

  Use roteamento dinâmico e coleções de conteúdo para adicionar suporte à internacionalização no seu site feito com Astro.

• Add Last Modified Time

  Build a remark plugin to add the last modified time to your Markdown and MDX.

• Adicione tempo de leitura

  Construa um plugin remark para adicionar tempo de leitura aos seus arquivos Markdown ou MDX.

• Compartilhe estado entre componentes Astro

  Aprenda como compartilhar estado entre componentes Astro com Nano Stores.

• Using streaming to improve page performance

  Learn how to use streaming to improve page performance.

• Style Rendered Markdown with Tailwind Typography

  Learn how to use @tailwind/typography to style your rendered Markdown

Recursos da Comunidade

Adicione o seu aqui! Consulte nosso guia de contribuição com receitas para mais informações.

Nota dos tradutores

Apesar das descrições abaixo estarem traduzidas, o conteúdo dos links é em Inglês.

• Use um nome de arquivo dinâmico ao importar imagens
• Adicione transições de página animadas com Swup
• Use UnoCSS no Astro
• Construa um índice a partir de títulos Markdown do Astro
• Crie um plugin Remark para remover viúvas/órfãs dos seus arquivos Markdown
• Adicione pesquisa ao seu site com Pagefind
• Consiga o VSCode, ESLint e Prettier funcionando com Astro
• Melhore suas builds do Astro: modificando arquivos HTML após a build
• Adicione modo escuro ao Astro com Tailwind CSS
• Gere sitemaps localizados para seu projeto com Astro e Storyblok
• Integre Prettier com Astro e Tailwind CSS
• Adicione um feed RSS ao Astro usando stories do Storyblok
• Usando tRPC no Astro
• Como fazer seu website Astro multilíngue com Crowdin: Guia de Localização no Astro
• Adicione imagens de postagens ao seu feed RSS do Astro
• Configurando micro-frontends com Astro
• Adicione autenticação com nome e senha com Lucia
• Adicione OAuth do Github com Lucia
• Integrando Sentry com Astro
• Configurando Páginas de Rascunho de Forma Eficiente no Astro com Autoria de Conteúdo Orientada por Configuração