더 많은 레시피

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

공식 레시피

섹션 제목: 공식 레시피

• 아일랜드 간 상태 공유

  Nano Store를 사용하여 프레임워크 컴포넌트 전체에서 상태를 공유하는 방법을 알아보세요.

• RSS 피드 추가하기

  사용자가 콘텐츠를 구독할 수 있도록 Astro 사이트에 RSS 피드를 추가하기.

• Vite 또는 Rollup 플러그인 설치

  프로젝트에 Rollup 플러그인을 추가하여 YAML 데이터를 가져오는 방법을 알아보세요.

• 사용자 정의 이미지 컴포넌트 빌드

  getImage 함수를 사용하여 미디어 쿼리를 지원하는 사용자 정의 이미지 컴포넌트를 빌드하는 방법을 알아보세요.

• API 경로를 사용하여 양식 작성

  JavaScript를 사용하여 양식 제출을 API 경로로 보내는 방법을 알아보세요.

• Astro 페이지에서 HTML 양식 작성

  HTML 양식을 작성하고 프런트매터에서 제출을 처리하는 방법을 알아보세요.

• Astro에서 Bun 사용하기

  Astro로 만든 사이트에서 Bun을 사용하는 방법을 배워보세요.

• 서버에서 엔드포인트 호출

  Astro의 서버에서 엔드포인트를 호출하는 방법을 알아보세요.

• Captcha를 사용하여 검증하기

  API 경로를 생성하고 클라이언트에서 가져오는 방법을 알아보세요.

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

• 외부 링크에 아이콘 추가

  Markdown 파일의 외부 링크에 아이콘을 추가하기 위해 rehype 플러그인을 설치하는 방법을 알아보세요.

• Add i18n features

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

• 마지막 수정 시간 추가

  Markdown 및 MDX에 마지막 수정 시간을 추가하기 위해 remark 플러그인을 빌드하세요.

• 읽기 시간 추가

  마크다운 및 MDX 파일에 읽기 시간을 추가하기 위해 remark 플러그인을 구축합니다.

• Astro 컴포넌트 간 상태 공유

  Nano Stores를 사용하여 Astro 컴포넌트 전체에서 상태를 공유하는 방법을 알아보세요.

• 스트리밍을 사용하여 페이지 성능 향상

  스트리밍을 사용하여 페이지 성능을 향상시키는 방법을 알아보세요.

• Tailwind Typography를 사용하여 Markdown을 렌더링한 스타일

  @tailwind/typography를 사용하여 렌더링된 Markdown의 스타일을 지정하는 방법을 알아보세요.

커뮤니티 자료

섹션 제목: 커뮤니티 자료

여기에 나만의 것을 추가하세요! 자세한 내용은 레시피 기여 안내서를 참조하세요.

• 이미지를 가져올 때 동적 파일 이름을 사용
• Swup으로 애니메이션 페이지 전환 추가
• Astro에서 UnoCSS 사용
• Astro의 Markdown 제목으로 목차 작성
• Markdown 파일에서 런트를 제거하는 Remark 플러그인 만들기
• Pagefind로 사이트에 검색 기능 추가
• Fuse.js를 사용하여 사이트에 검색 기능 추가
• Astro와 함께 작동하는 VSCode, ESLint 및 Prettier 설정
• Astro 빌드 향상: 빌드 후 HTML 파일 수정
• Tailwind CSS를 사용하여 Astro에 다크 모드 추가
• Astro 및 Storyblok 프로젝트를 위한 현지화된 사이트맵 생성
• Astro 및 Tailwind CSS와 Prettier 통합
• Storyblok의 스토리를 사용하여 Astro에 RSS 피드 추가
• Astro에서 tRPC 사용
• Crowdin을 사용하여 Astro 웹사이트에 다국어를 지원하는 방법: Astro 현지화 안내서
• Astro RSS 피드에 블로그 게시물 이미지 추가
• Astro로 마이크로 프런트엔드 설정
• Lucia로 사용자 이름 및 비밀번호 인증 추가
• Lucia로 Github OAuth 추가
• Sentry를 Astro와 통합
• 구성 기반 콘텐츠 작성을 통해 Astro에서 효과적으로 초안 페이지 설정
• RSS 피드에 데이터를 보내는 방법은 무엇입니까? Astro + RSS 안내서