Setup
Project Creation
npm create astro@latest -- --template psephopaiktes/astro-i18n-starter
Configuration
1. Configure /src/locales.ts
First, update the language settings file.
Set the default locale in DEFAULT_LOCALE_SETTING
and the list of desired locales in LOCALES_SETTING
. This follows the Starlight configuration.
// Set your site's default locale.
export const DEFAULT_LOCALE_SETTING: string = "en";
export const LOCALES_SETTING: LocaleSetting = {
// Add or remove support locales.
en: {
label: "English",
lang: "en-US", // optional
},
ja: {
label: "日本語",
},
"zh-cn": {
label: "简体中文",
lang: "zh-CN",
},
ar: {
label: "العربية",
dir: "rtl", // optional
},
};
Please refer to the following link for information on language codes.
2. Configure astro.config.mjs
Set your URL in site
.
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,
},
},
...
Please refer to the official documentation for detailed configuration options for Astro.
note: Changing the settings of prefixDefaultLocale
and redirectToDefaultLocale
is not recommended. Astro i18n Starter manages the redirect process with client-side JavaScript. If the URL does not contain a locale, it will redirect to the default locale. For example, /setup/
will be redirected to /en/setup/
.
Project Structure
Follows the Astro project structure.
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
Directory for UI components used in multilingual websites.
src/pages
- The files under
src/pages/[lang]/
generate HTML files for each locale dynamically from a single.astro
file. - You can also generate HTML files for each language from folders like
src/pages/en/
,src/pages/ja/
, etc.
src/consts.ts
File for constant data that can be imported and used within the project. It can also be omitted if not needed.
src/i18n.ts
File containing definitions of functions used in Astro i18n Starter. There is generally no need to edit this file.