autorenew

Astro i18n Starter

设置

项目创建

npm create astro@latest -- --template psephopaiktes/astro-i18n-starter

配置

1. 配置 /src/locales.ts

首先，更新语言设置文件。

在 DEFAULT_LOCALE_SETTING 中设置默认语言，并在 LOCALES_SETTING 中设置所需语言列表。这遵循 Starlight 配置。

// 设置站点的默认语言。
export const DEFAULT_LOCALE_SETTING: string = "en";

export const LOCALES_SETTING: LocaleSetting = {
    // 添加或删除支持的语言。
    en: {
        label: "English",
        lang: "en-US", // 可选
    },
    ja: {
        label: "日本語",
    },
    "zh-cn": {
        label: "简体中文",
        lang: "zh-CN",
    },
    ar: {
        label: "العربية",
        dir: "rtl", // 可选
    },
};

有关语言代码的信息，请参阅以下链接。

lang - HTML: 超文本标记语言 | MDN

2. 配置 astro.config.mjs

在 site 中设置您的 URL。

import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import { defineConfig } from 'astro/config';
import { DEFAULT_LOCALE_SETTING, LOCALES_SETTING } from './src/locales';

export default defineConfig({
- site: 'https://astro-i18n-starter.pages.dev',
+ site: 'https://your-site.com',
  i18n: {
    defaultLocale: DEFAULT_LOCALE_SETTING,
    locales: Object.keys(LOCALES_SETTING),
    routing: {
      prefixDefaultLocale: true,
      redirectToDefaultLocale: false,
    },
  },
...

有关 Astro 的详细配置选项，请参阅官方文档。

注意：不建议更改 prefixDefaultLocale 和 redirectToDefaultLocale 的设置。Astro i18n Starter 使用客户端 JavaScript 管理重定向过程。如果 URL 不包含语言，将重定向到默认语言。例如，/setup/ 将重定向到 /en/setup/。

项目结构

遵循 Astro 项目结构。

src/
├── assets/
│   └── en/, ja/ ...
├── blog/
│   └── en/, ja/ ...
├── components/
│   └── i18n/
├── layouts/
├── pages/
│   ├── [lang]/
│   ├── en/, ja/ ...
│   ├── 404.astro
│   └── index.astro
├── styles/
├── content.config.ts
├── consts.ts
├── i18n.ts
└── locales.ts

src/components/i18n

用于多语言网站的 UI 组件目录。

src/pages

src/consts.ts

可以在项目中导入和使用的常量数据文件。如果不需要，也可以省略。

src/i18n.ts

包含 Astro i18n Starter 中使用的函数定义的文件。通常不需要编辑此文件。