국제화 기능 추가

이 레시피에서는 콘텐츠 컬렉션과 동적 라우팅을 사용하여 자체 국제화 (i18n) 솔루션을 구축하고 콘텐츠를 다양한 언어로 제공하는 방법을 배웁니다.

이 예시는 자체 하위 경로에서 각 언어를 제공합니다. 영어의 경우 example.com/en/blog, 프랑스어의 경우 example.com/fr/blog입니다.

다른 언어와 달리 기본 언어가 URL에 표시되지 않도록 하려면 아래의 기본 언어를 숨기는 방법을 참조하세요.

1. 지원하려는 각 언어에 대한 디렉터리를 만듭니다. 예를 들어, 영어와 프랑스어를 지원하는 경우 en/ 및 fr/:

   • 디렉터리src/

     • 디렉터리pages/

       • 디렉터리en/

         • about.astro
         • index.astro
       • 디렉터리fr/

         • about.astro
         • index.astro
       • index.astro

2. 기본 언어로 리디렉션하려면 src/pages/index.astro를 설정하세요.

   • 정적 사이트
   • 요청 시 렌더링

   <meta http-equiv="refresh" content="0;url=/en/" />

   이 접근 방식은 meta refresh를 사용하며 사이트를 배포하는 방식에 따라 작동합니다. 일부 정적 호스트에서는 사용자 정의 구성 파일을 사용하여 서버 리디렉션을 구성할 수도 있습니다. 자세한 내용은 배포 플랫폼의 설명서를 참조하세요.

1. 포함하려는 각 콘텐츠 유형에 대해 src/content/에 폴더를 만들고 지원되는 각 언어에 대한 하위 디렉터리를 추가합니다. 예를 들어 영어 및 프랑스어 블로그 게시물을 지원하려면 다음을 수행하세요.

   • 디렉터리src/

     • 디렉터리content/

       • 디렉터리blog/

         • 디렉터리en/ 영어로 된 블로그 게시물

           • post-1.md
           • post-2.md
         • 디렉터리fr/ 프랑스어로 된 블로그 게시물

           • post-1.md
           • post-2.md

2. src/content.config.ts 파일을 만들고 각 콘텐츠 유형에 대한 컬렉션을 내보냅니다.

   import { defineCollection } from 'astro:content';
   import { z } from 'astro/zod';
   
   const blogCollection = defineCollection({
     schema: z.object({
       title: z.string(),
       author: z.string(),
       date: z.date()
     })
   });
   
   export const collections = {
     'blog': blogCollection
   };

   콘텐츠 컬렉션에 대해 자세히 알아보세요.

3. 동적 경로를 사용하여 lang 및 slug 매개변수를 기반으로 콘텐츠를 가져와 렌더링하세요.

   • 정적 사이트
   • 요청 시 렌더링

   정적 렌더링 모드에서는 getStaticPaths를 사용하여 각 콘텐츠 항목을 페이지에 매핑합니다.

   ---
   import { getCollection, render } from 'astro:content';
   
   export async function getStaticPaths() {
     const pages = await getCollection('blog');
   
     const paths = pages.map(page => {
       const [lang, ...slug] = page.id.split('/');
       return { params: { lang, slug: slug.join('/') || undefined }, props: page };
     });
   
     return paths;
   }
   
   const { lang, slug } = Astro.params;
   const page = Astro.props;
   const formattedDate = page.data.date.toLocaleString(lang);
   
   const { Content } = await render(page);
   ---
   <h1>{page.data.title}</h1>
   <p>by {page.data.author} • {formattedDate}</p>
   <Content/>

   동적 라우팅에 대해 자세히 알아보세요.

사이트 주변의 UI 요소에 대한 레이블을 번역하기 위한 용어 사전을 만듭니다. 이를 통해 방문자는 여러분의 사이트를 완전히 자신의 언어로 경험할 수 있습니다.

1. 번역 문자열을 저장할 src/i18n/ui.ts 파일을 만듭니다.

   export const languages = {
     en: 'English',
     fr: 'Français',
   };
   
   export const defaultLang = 'en';
   
   export const ui = {
     en: {
       'nav.home': 'Home',
       'nav.about': 'About',
       'nav.twitter': 'Twitter',
     },
     fr: {
       'nav.home': 'Accueil',
       'nav.about': 'À propos',
     },
   } as const;

2. 두 개의 도우미 함수를 만듭니다. 하나는 현재 URL을 기반으로 페이지 언어를 감지하고, 다른 하나는 src/i18n/utils.ts 파일에서 UI의 다양한 부분에 대한 번역 문자열을 가져옵니다.

   import { ui, defaultLang } from './ui';
   
   export function getLangFromUrl(url: URL) {
     const [, lang] = url.pathname.split('/');
     if (lang in ui) return lang as keyof typeof ui;
     return defaultLang;
   }
   
   export function useTranslations(lang: keyof typeof ui) {
     return function t(key: keyof typeof ui[typeof defaultLang]) {
       return ui[lang][key] || ui[defaultLang][key];
     }
   }

3. 필요한 경우 도우미를 가져오고 이를 사용하여 현재 언어에 해당하는 UI 문자열을 선택합니다. 예를 들어 nav 컴포넌트는 다음과 같습니다.

   ---
   import { getLangFromUrl, useTranslations } from '../i18n/utils';
   
   const lang = getLangFromUrl(Astro.url);
   const t = useTranslations(lang);
   ---
   <ul>
       <li>
           <a href={`/${lang}/home/`}>
             {t('nav.home')}
           </a>
       </li>
       <li>
           <a href={`/${lang}/about/`}>
             {t('nav.about')}
           </a>
       </li>
       <li>
           <a href="https://twitter.com/astrodotbuild">
             {t('nav.twitter')}
           </a>
       </li>
   </ul>

    {t('nav.home')} 


4.   {t('nav.about')} 

5.   {t('nav.twitter')} 
">