Hugo Advance has full multilingual support and ships with extensive demo content for english (default language) and french.
The default language is preconfigured in the
# config.toml languageCode = "en-us" defaultContentLanguage = "en" defaultContentLanguageInSubdir = false
Languages are declared in the
config.toml using the standard Hugo
# config.toml [languages] [languages.en] weight = 0 languageName = "English" contentDir = "content/en" [languages.fr] weight = 1 languageName = "Français" contentDir = "content/fr" title = "Hugo Avance"
Multilingual content is stored in the
content folder using sub folders. This makes it easier to add new languages or remove multilingual if you only want english or a single language.
content - en - _index.md - services - _index.md - branding.md ... - fr - _index.md - services - _index.md - branding.md ...
Let’s say you want to create a new service page.
Create a file called
content/en/services/my-new-service.md like normal. This will create the english version of the page.
Create another file called
content/fr/services/my-new-services.md. This will create the french version of the page.
You can set different front-matter for each language. Which means you can have different images, settings etc.
// content/en/services/my-new-services.md - the english version --- title: 'Branding' description: 'The expression of a brand including its name, trademark, and visual appearance.' date: 2019-10-03 thumbnail: 'images/services/branding.png' --- # Creating Modern Websites Web design encompasses many different skills and disciplines in the production and maintenance of websites.
// content/fr/services/my-new-services.md - the french version --- title: "l'image de marque" description: "Expression d'une marque, y compris son nom, sa marque et son apparence visuelle." date: 2019-10-03 thumbnail: 'images/services/another-branding-image.jpg' --- # Création de sites Web modernes La conception Web englobe de nombreuses compétences et disciplines différentes dans la production et la maintenance de sites Web.
Hugo’s approach to multilingual requires that you create a
.md file for each page, in each language. And while this can sometimes seem tedious, the flexibility it provides is worthwhile.
Note: If you only create a page for one language, the language switcher will not display the other languages for that page.
Let’s run through an example of adding a new language, Spanish.
First add the language in the
config.toml - Add a new
[languages.es] (you will need to use the correct language code)
# config.toml [languages] [languages.en] weight = 0 languageName = "English" contentDir = "content/en" [languages.fr] weight = 1 languageName = "Français" contentDir = "content/fr" title = "Hugo Avance" [languages.es] weight = 1 languageName = "Español" contentDir = "content/es" title = "Hugo Advance"
Then create a new folder in the
content directory ie
Create a new homepage for Spanish. Create a new markdown file in
content/es/_index.md - You can copy the english version of this file from
content/en/_index.md and then begin editing and translating the front-matter and markdown content. Reload the homepage in the language dropdown in the top right Spanish will now be an option.