Internationalization (i18n)
The i18n feature allows you to translate your content into multiple languages. To enable i18n, open the config.toml file in the src/config folder and find the following section:
# Multilingual settings (check src/config/language.json for changing the languages)# NOTE: Manually restart your server when you change the following multilingual table values[settings.multilingual] # Set `enable` to `true` for enabling the multilingual feature or `false` for disabling it. # Run `npm run remove-multilingual` for removing multilingual content files after disabling the feature. enable = true defaultLanguage = "en" disableLanguages = [""] # List of languages to disable (e.g., ["fr", "es"]) showDefaultLangInUrl = false # Show default language in URL (e.g., https://getastrothemes.com/en/)enable→ Enables/disables multilingual support.defaultLanguage→ Defines the primary language.disableLanguages→ Lists languages to disable.showDefaultLangInUrl→ Determines whether to show the default language code in the URL.
Disable Internationalization Feature
To remove the i18n feature, first disable it by setting enable to false in the config.toml as shown below.
# Multilingual settings (check src/config/language.json for changing the languages)# NOTE: Manually restart your server when you change the following multilingual table values[settings.multilingual] # Set `enable` to `true` for enabling the multilingual feature or `false` for disabling it. # Run `npm run remove-multilingual` for removing multilingual content files after disabling the feature. enable = false defaultLanguage = "en" disableLanguages = [""] # List of languages to disable (e.g., ["fr", "es"]) showDefaultLangInUrl = false # Show default language in URL (e.g., https://getastrothemes.com/en/)Then, run npm run remove-multilingual in the terminal to completely remove the i18n feature. This command removes other languages from the language.json file and deletes language-specific content files from the src/content and src/i18n folders.
Add a New Language
To add a new language, follow these three steps:
-
Update
language.json
Open thesrc/config/language.jsonfile in thesrc/configfolder. Add the new language configuration as shown below. In this example, we addDeutsch (de):[{"languageName": "En","languageCode": "en","contentDir": "english","weight": 1},{"languageName": "Fr","languageCode": "fr","contentDir": "french","weight": 2},{"languageName": "De","languageCode": "de","contentDir": "deutsch","weight": 3}] -
Create i18n Files
Clone any existing file insidesrc/i18nusing the newly added language code. For example, cloneen.jsontode.jsonand update its content:{"common": {"readMore": "mehr lesen"},"footer": {"quickLinks": "Schnellverbindungen","legal": "Rechtliches"}} -
Add Language Menu and Content
- Clone
menu.en.jsonand rename it tomenu.de.jsoninside thesrc/configfolder, then update its content accordingly. - Add Deutsch content inside the
src/contentfolder as shown below:
Directorysrc/
Directorycontent/
Directoryabout/
Directoryenglish/
- index.md
Directoryfrench/
- index.md
Directorydeutsch/
- index.md
Directoryhomepage/
Directoryenglish/
- index.md
Directoryfrench/
- index.md
Directorydeutsch/
- index.md
Directorypages/
- …
Directorysections/
- …
- env.d.ts
- .editorconfig
- astro.config.mjs
- Clone