Astro 레시피

Astro 프로젝트에 기능을 추가하는 방법에 대한 안내 예시를 확인하세요.

공식 레시피

Astro의 공식 레시피는 특정 작업의 실제 예제를 완성하는 과정을 안내하는 간단하고 핵심적인 실습 가이드입니다. 레시피는 단계별 지침을 따라 Astro 프로젝트에 새로운 기능이나 동작을 추가할 수 있는 좋은 방법입니다!

• Installing a Vite or Rollup plugin

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

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

• Customize file names in the build output

  Learn how to change the default naming pattern for your built assets like JavaScript, CSS, and images in Astro using Vite's Rollup options.

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

• Add an RSS feed

  Add an RSS feed to your Astro site to let users subscribe to your content.

• Share state between islands

  Learn how to share state across framework components with Nano Stores.

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

커뮤니티 리소스

Astro Tips에서 커뮤니티에서 작성하고 제출한 더 많은 레시피를 확인하세요.