MkDocs static i18n plugin

An MkDocs plugin that helps you support multiple language versions of your site / documentation.

The mkdocs-static-i18n plugin allows you to support multiple languages of your documentation by adding static translation files to your existing documentation pages.

Multi language support is just one .<language>.md file away!

Even better, mkdocs-static-i18n also allows you to build and serve localized versions of any file extension to display localized images, medias and assets.

Localized images/medias/assets are just one .<language>.<extension> file away!

If you want to see how it looks, check out the demo documentation here.

Like what you 👀? Give it a ⭐!

Language detection logic

This plugin is made to be as simple as possible and will generate a default version of your website + one version per configured language on the <language>/ path.

• the default version will use any .md documentation file first and fallback to any .<default_language>.md file found
• the /<language> language versions will use any .<language>.md documentation file first and fallback to any .<default_language>.md file before fallbacking to any default .md file found

Since demonstrations are better than words, check out the demo documentation here which showcases the logic.

Installation

Just pip install mkdocs-static-i18n!

Configuration

Here is the list of all the options that the plugin supports.

default_language

• mandatory: yes

A 2-letter ISO-639-1 language code (en) or 5-letter language code with added territory/region/country (en_US).

default_language: en

default_language_only

• default: false

This boolean (true/false) option is used to speed up the build process while developing your documentation.

default_language_only: false

languages

• mandatory: yes

A mapping of 2-letter or 5-letter language code (like default_language) with either the display name of the language or some optional keys used to control the build process of each language.

Allowed options per language:

• name (mandatory): the name that should be displayed in the mkdocs-material language switcher
• link (default: ./<language>): the link path to be used in the mkdocs-material language switcher
• build (default: true): a boolean used to control the build of a /<language> path for the given language
• site_name (default: mkdocs.yml site_name): the site_name translation for the given language

Feature rich languages options usage:

plugins:
  - i18n:
      default_language: en
      languages:
        en:
          name: English
          build: true
        fr:
          name: Français
          build: true

Short (legacy) languages options usage:

plugins:
  - i18n:
      default_language: en
      languages:
        en: English
        fr: Français

material_alternate

• default: true

If you're using the mkdocs-material theme, this boolean (true/false) option will let you choose if you want the mkdocs-static-i18n plugin to configure the language switcher for you..

material_alternate: true

nav_translations

• default: empty

This option is a nested mapping of language: default title: translated title that allows you to translate the navigation sections of your website.

nav_translations:
  fr:
    Topic1: Sujet1
    Topic2: Sujet2

Example configuration and output

plugins:
  - i18n:
      default_language: en
      languages:
        en:
          name: English
          build: true
        fr:
          name: Français
          build: true

Using the configuration above on the following docs/ structure will build the following site/ (leaving out static files for readability):

docs
├── image.en.png
├── image.fr.png
├── index.fr.md
├── index.md
├── topic1
│   ├── index.en.md
│   └── index.fr.md
└── topic2
    ├── index.en.md
    └── index.md

site
├── en
│   ├── image.png
│   ├── index.html
│   ├── topic1
│   │   └── index.html
│   └── topic2
│       └── index.html
├── fr
│   ├── image.png
│   ├── index.html
│   ├── topic1
│   │   └── index.html
│   └── topic2
│       └── index.html
├── image.png
├── index.html
├── topic1
│   └── index.html
└── topic2
    └── index.html

Alternate aware sitemap.xml

The mkdocs-static-i18n plugin since version 0.32 provides a template that will generate automatically an alternate aware sitemap.xml so that your localized content is made available to search engines!

Localization aware sitemap.xml:

    <url>
         <loc>https://ultrabug.github.io/mkdocs-static-i18n/</loc>
         <lastmod>2022-01-31</lastmod>
         <changefreq>daily</changefreq>
         <xhtml:link rel="alternate" hreflang="en" href="https://ultrabug.github.io/mkdocs-static-i18n/en/"/>
         <xhtml:link rel="alternate" hreflang="fr" href="https://ultrabug.github.io/mkdocs-static-i18n/fr/"/>
    </url>

Not building a dedicated version for the default language

If you do not wish to build a dedicated <language>/ path for the default_language version of your documentation, just set its build option to false.

The following configuration:

plugins:
  - i18n:
      default_language: en
      languages:
        fr:
          name: Français
          build: true
        en:
          name: English
          build: false

Applied on the following structure:

docs
├── image.en.png
├── image.fr.png
├── index.fr.md
├── index.md
├── topic1
│   ├── index.en.md
│   └── index.fr.md
└── topic2
    ├── index.en.md
    └── index.md

Will build:

site
├── fr
│   ├── image.png
│   ├── index.html
│   ├── topic1
│   │   └── index.html
│   └── topic2
│       └── index.html
├── image.png
├── index.html
├── topic1
│   └── index.html
└── topic2
    └── index.html

Building only the default language for faster development

When working on your project, building a version for each supported language can be slow depending on the size of your documentation.

The default_language_only option allows you to only build the selected default_language of your documentation for faster development.

Coupled with MkDocs >= 1.2 support for environment variables, this option can easily be passed dynamically within your mkdocs.yml file like this!

You can read more about the rationale behind this feature here.

Referencing localized content in your markdown pages

Focus on translating your content, not on updating all the links and references to your assets!

Let mkdocs-static-i18n do the heavy lifting of dynamically localizing your assets and just reference everything without their localized extension.

Since the generated site files have their localization extension removed during the build process, you can reference them in your markdown source without it (this includes links to .md files)!

This simple docs structure:

docs
├── image.en.png
├── image.fr.png
├── index.fr.md
├── index.md

Will generate this site tree:

site
├── fr
│   ├── image.png
│   ├── index.html
├── image.png
├── index.html

Which means that the image.png and its fr/image.png localized counterpart can be referenced the same way as ![my image](image.png) on both index.md and index.fr.md!

Translating site name

Using the site_name option for a given language, you can translate the site name that will be used to render the localized pages for the language version of your website.

site_name: Default site title

plugins:
  - i18n:
      default_language: en
      languages:
        en:
          name: English
          site_name: Site title in English for pages with path /en/
        fr:
          name: Français
          site_name: Titre du site en Français pour les pages en /fr/

Translating navigation

Using the nav_translations configuration option, you can translate all your navigation titles easily.

Translations are applied to all titles so you only need to provide a given translation once and it will be used to translate all the sections, links and pages which share the same title.

This example will translate any navigation item title from Topic1 to Sujet1 on the French version of the documentation:

plugins:
  - i18n:
      default_language: en
      languages:
        en:
          name: English
        fr:
          name: Français
      nav_translations:
        fr:
          Topic1: Sujet1
          Topic2: Sujet2

Localized content can diverge from the default version

Since version 0.20 of the plugin, localized content can diverge from the default language version. This means that you can have pages that are specific to some languages without any problem.

See #59 if you need more information about this.

Compatibility with the search plugin

If you enabled the search plugin embedded with MkDocs, this plugin will automatically populate its lang option with the the configured languages as long as they are supported by lunr.

⚠️ Search results will include all the pages from all the localized contents!

This means that your search results can't be contextual to the language you are currently browsing.

The mkdocs-static-i18n plugin will try to be smart and deduplicate the pages from the default_language so that search results are not polluted.

This is because the MkDocs search plugin is hardcoded in the themes javascript sources so there can only be one search index for the whole build.

Compatibility with other plugins

This plugin is compatible with the following mkdocs plugins:

• MkDocs Material: the search plugin text will be switched automatically to the right language depending on the version you're browsing and the language selector will automatically be setup for you (requires mkdocs-material>=7.1.0)
• MkDocs Awesome Pages Plugin: the page ordering is preserved on the language specific versions of your site
• MkDocs with PDF Plugin: you get a PDF of every localized version of your site
• MkDocs minify Plugin: to minify your JS, CSS and HTML localized files

Adding a language selector on your documentation header

Using mkdocs-material site language selector

Starting version 7.1.0, mkdocs-material supports a site language selector configuration.

The mkdocs-static-i18n plugin will detect if you're using mkdocs-material and, if its version is at least 7.1.0, will enable and configure the site language selector automatically for you unless you specified your own extra.alternate configuration!

Even better, mkdocs-static-i18n will also make it so that changing between languages keeps you on the same page instead of getting you back to the language specific home page (not compatible with theme.features = navigation.instant, see #62)!

If you wish to disable that feature, simply set the material_alternate option to false:

plugins:
  - i18n:
      default_language: en
      languages:
        en:
          name: English
        fr:
          name: Français
      material_alternate: false

Writing a custom language switcher

Let's take mkdocs-material as an example and say we would like to add two buttons to allow our visitors to switch to their preferred language.

The following explanation was showcased in the demo website up to 0.7 so you can find the files here:

• mkdocs.yml
• theme_overrides

We need to add a custom_dir to our theme configuration:

theme:
  name: material
  custom_dir: theme_overrides

Then override the header.html to insert something like:

    {% if "i18n" in config.plugins %}
      <div style="margin-left: 10px; margin-right: 10px;">
          {% include "partials/i18n_languages.html" %}
      </div>
    {% endif %}

And add a i18n_languages.html that could look like this:

{% for lang, display in config.plugins.i18n.config.languages.items() -%}
    <div style="display: inline-block; margin-right:5px;"><a href="/{{ lang }}/">{{ display }}</a></div>
{% endfor %}

The resulting files should be placed like this:

theme_overrides
└── partials
    ├── header.html
    └── i18n_languages.html

Using i18n context variables in your pages

The plugin exports some useful i18n variables that you can access through the page context:

• i18n_config: the i18n plugin configuration
• i18n_page_locale: the current rendering locale of the page
• i18n_page_file_locale: the locale suffix of the source file used to render the page

Those context variables can be accessed using Jinja2 notation, like {{ i18n_page_locale }} in your theme overrides.

See it in action

• On this repository demo website
• On my own website: ultrabug.fr

Contributions welcome

Feel free to ask questions, enhancements and to contribute to this project!