Astro i18n 多语言配置 30分钟实战指南

1
import { defineConfig } from 'astro/config';
2

3
export default defineConfig({
4
  i18n: {
5
    // 告诉 Astro 你的网站支持哪些语言
6
    locales: ['en', 'zh-cn', 'ja'],
7

8
    // 默认语言（必须是 locales 里的某一个）
9
    defaultLocale: 'en',
10

11
    // 是否给默认语言加路径前缀
12
    prefixDefaultLocale: false,
13
  }
14
});

1
---
2
export function getStaticPaths() {
3
  const locales = ['zh-cn', 'en', 'ja'];
4
  const slugs = ['about', 'blog', 'contact'];
5

6
  return locales.flatMap((lang) =>
7
    slugs.map((slug) => ({
8
      params: { lang, slug },
9
    }))
10
  );
11
}
12

13
const { lang, slug } = Astro.params;
14
// 根据 lang 和 slug 加载对应的内容
15
---

1
import { defineCollection, z } from 'astro:content';
2

3
const blogCollection = defineCollection({
4
  schema: z.object({
5
    title: z.string(),
6
    author: z.string(),
7
    date: z.date(),
8
    lang: z.enum(['en', 'zh-cn', 'ja']),  // 语言字段
9
  }),
10
});
11

12
export const collections = {
13
  blog: blogCollection,
14
};

1
---
2
import { getCollection } from 'astro:content';
3

4
const currentLang = Astro.currentLocale;  // 获取当前语言
5
const posts = await getCollection('blog', ({ data }) => {
6
  return data.lang === currentLang;  // 只获取当前语言的文章
7
});
8
---

1
export const ui = {
2
  'en': {
3
    'nav.home': 'Home',
4
    'nav.about': 'About',
5
    'nav.blog': 'Blog',
6
    'btn.readMore': 'Read More',
7
  },
8
  'zh-cn': {
9
    'nav.home': '首页',
10
    'nav.about': '关于',
11
    'nav.blog': '博客',
12
    'btn.readMore': '阅读更多',
13
  },
14
  'ja': {
15
    'nav.home': 'ホーム',
16
    'nav.about': '概要',
17
    'nav.blog': 'ブログ',
18
    'btn.readMore': '続きを読む',
19
  },
20
} as const;

1
import { ui } from './ui';
2

3
// 从 URL 获取当前语言
4
export function getLangFromUrl(url: URL) {
5
  const [, lang] = url.pathname.split('/');
6
  if (lang in ui) return lang as keyof typeof ui;
7
  return 'zh-cn';  // 默认语言
8
}
9

10
// 获取翻译函数
11
export function useTranslations(lang: keyof typeof ui) {
12
  return function t(key: keyof typeof ui[typeof lang]) {
13
    return ui[lang][key] || ui['zh-cn'][key];
14
  }
15
}

1
---
2
import { getRelativeLocaleUrl } from 'astro:i18n';
3

4
const locales = {
5
  'zh-cn': '简体中文',
6
  'en': 'English',
7
  'ja': '日本語',
8
};
9

10
const currentLang = Astro.currentLocale || 'zh-cn';
11
const currentPath = Astro.url.pathname
12
  .replace(`/${currentLang}/`, '/')
13
  .replace(/^\//, '');
14
---
15

16
<div class="language-switcher">
17
  <button class="lang-button">
18
    {locales[currentLang]} ▼
19
  </button>
20
  <div class="lang-dropdown">
21
    {Object.entries(locales).map(([lang, label]) => {
22
      const url = getRelativeLocaleUrl(lang, currentPath);
23
      return (
24
        <a
25
          href={url}
26
          class={lang === currentLang ? 'active' : ''}
27
        >
28
          {label}
29
        </a>
30
      );
31
    })}
32
  </div>
33
</div>
34

35
<style>
36
  .language-switcher {
37
    position: relative;
38
    display: inline-block;
39
  }
40

41
  .lang-button {
42
    padding: 8px 16px;
43
    background: #f3f4f6;
44
    border: 1px solid #d1d5db;
45
    border-radius: 6px;
46
    cursor: pointer;
47
  }
48

49
  .lang-button:hover {
50
    background: #e5e7eb;
51
  }
52

53
  .lang-dropdown {
54
    display: none;
55
    position: absolute;
56
    top: 100%;
57
    right: 0;
58
    margin-top: 4px;
59
    background: white;
60
    border: 1px solid #d1d5db;
61
    border-radius: 6px;
62
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
63
    min-width: 150px;
64
  }
65

66
  .language-switcher:hover .lang-dropdown {
67
    display: block;
68
  }
69

70
  .lang-dropdown a {
71
    display: block;
72
    padding: 10px 16px;
73
    color: #374151;
74
    text-decoration: none;
75
    transition: background 0.2s;
76
  }
77

78
  .lang-dropdown a:hover {
79
    background: #f3f4f6;
80
  }
81

82
  .lang-dropdown a.active {
83
    background: #dbeafe;
84
    color: #1e40af;
85
    font-weight: 500;
86
  }
87
</style>
88

89
<script>
90
  document.querySelector('.lang-button')?.addEventListener('click', (e) => {
91
    e.stopPropagation();
92
    const dropdown = document.querySelector('.lang-dropdown');
93
    dropdown?.classList.toggle('show');
94
  });
95

96
  document.addEventListener('click', () => {
97
    document.querySelector('.lang-dropdown')?.classList.remove('show');
98
  });
99
</script>

1
---
2
import LanguageSwitcher from '@/components/LanguageSwitcher.astro';
3
---
4

5
<header>
6
  <nav>
7
    <LanguageSwitcher />
8
  </nav>
9
</header>

1
import { defineMiddleware } from 'astro:middleware';
2

3
export const onRequest = defineMiddleware((context, next) => {
4
  const url = context.url;
5
  const currentLocale = context.currentLocale;
6
  const preferredLocale = context.preferredLocale;
7

8
  if (url.pathname === '/' && preferredLocale && preferredLocale !== currentLocale) {
9
    return context.redirect(`/${preferredLocale}/`);
10
  }
11

12
  return next();
13
});

1
export default defineConfig({
2
  i18n: {
3
    locales: ['en', 'zh-cn', 'ja'],
4
    defaultLocale: 'en',
5
    fallback: {
6
      ja: 'en',
7
      'zh-cn': 'en',
8
    },
9
  }
10
});

1
export default defineConfig({
2
  output: 'server',  // 必须启用 SSR
3
  adapter: node(),
4
  i18n: {
5
    locales: ['en', 'zh-cn', 'ja'],
6
    defaultLocale: 'en',
7
    domains: {
8
      'zh-cn': 'https://example.cn',
9
      ja: 'https://example.jp',
10
    },
11
  }
12
});

1
---
2
import { getAbsoluteLocaleUrl } from 'astro:i18n';
3

4
const locales = ['en', 'zh-cn', 'ja'];
5
const currentPath = Astro.url.pathname
6
  .replace(/^\/(en|zh-cn|ja)\//, '')
7
  .replace(/^\//, '');
8
---
9

10
<html>
11
<head>
12
  {locales.map((lang) => (
13
    <link
14
      rel="alternate"
15
      hreflang={lang}
16
      href={getAbsoluteLocaleUrl(lang, currentPath)}
17
    />
18
  ))}
19

20
  <link
21
    rel="alternate"
22
    hreflang="x-default"
23
    href={getAbsoluteLocaleUrl('en', currentPath)}
24
  />
25

26
  <link rel="canonical" href={getAbsoluteLocaleUrl(currentLang, currentPath)} />
27
</head>
28
</html>