Mehr Anleitungen

Schau dir geführte Beispiele für das Hinzufügen von Features zu deinem Astro-Projekt an.

Offizielle Anleitungen

Abschnitt betitelt Offizielle Anleitungen

• Installation eines Vite- oder Rollup-Plugins

  Erfahre, wie du YAML-Daten importieren kannst, indem du ein Rollup-Plugin zu deinem Projekt hinzufügst.

• Analyze Bundle Size

  Learn how to analyze the bundle generated by Astro using `rollup-plugin-visualizer`.

• Build a custom image component

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

• Build forms with API routes

  Learn how to use JavaScript to send form submissions to an API Route.

• 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.

• Call endpoints from the server

  Learn how to call endpoints from the server in Astro.

• Verify a Captcha

  Learn how to create an API route and fetch it from the client.

• 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.

• Add icons to external links

  Learn how to install a rehype plugin to add icons to external links in your Markdown files.

• Add i18n features

  Use dynamic routing and content collections to add internationalization support to your Astro site.

• Create a dev toolbar app

  Learn how to create a dev toolbar app for your site.

• Add last modified time

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

• Add reading time

  Build a remark plugin to add reading time to your Markdown or MDX files.

• Zustand zwischen Astro-Inseln teilen

  Lerne, wie du den Zustand von Komponenten - und Frameworks! - mit Nano Stores teilst.

• Share state between Astro Components

  Learn how to share state across Astro components with 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.

Ressourcen aus der Community

Abschnitt betitelt Ressourcen aus der Community

Füge hier deine eigene Anleitung hinzu! Weitere Informationen findest du in unserem recipes contributing guide.

• Use a dynamic filename when importing images
• Add animated page transitions with Swup
• Use UnoCSS in Astro
• Build a table of contents from Astro’s Markdown headings
• Create a Remark plugin to remove runts from your Markdown files
• Add searching to your site with Pagefind
• Add searching to your site with Fuse.js
• Get VSCode, ESLint & Prettier working with Astro
• Enhance your Astro builds: modify HTML files post-build
• Add dark mode to Astro with Tailwind CSS
• Generate localized sitemaps for your Astro and Storyblok project
• Integrate Prettier with Astro and Tailwind CSS
• Add an RSS feed to Astro using Storyblok’s stories
• Using tRPC in Astro
• How to make your Astro website multilingual with Crowdin: Astro localization guide
• Add blog post images to your Astro RSS Feed
• Setting up micro-frontends with Astro
• Add username and password authentication with Lucia
• Add Github OAuth with Lucia
• Integrating Sentry with Astro
• Set Up Draft Pages Effectively in Astro with Config-Driven Content Authoring