Hugo > Localization

Hugo has built-in support for the creation of multi-lingual sites.

Within your dato.config.js file, you can easily switch between your locales changing the value of i18n.locale:

// dato.config.js
module.exports = (dato, root, i18n) => {
  i18n.locale = 'en';
  dato.blogPosts[0].title;  // => "Hello world!"
  i18n.locale = 'it';
  dato.blogPosts[0].title   // => "Ciao mondo!"
};

If you need to temporarily switch locale, and then restore the previous value, you can use i18n.withLocale:

// dato.config.js
module.exports = (dato, root, i18n) => {
  i18n.locale = 'en';
  dato.blogPosts[0].title;  // => "Hello world!"
  i18n.withLocale('it', () => {
    i18n.locale;              // => "it"
    dato.blogPosts[0].title;  // => "Ciao mondo!"
  });
  i18n.locale;              // => "en"
  dato.blogPosts[0].title;  // => "Hello world!"
};

You can also obtain the list of languages of your administrative area with i18n.availableLocales:

// dato.config.js
module.exports = (dato, root, i18n) => {
  i18n.availableLocales;  // => [ 'en', 'it' ]
};

You can also configure the config file so that if a particular field in a specific locale is not empty, it will try to return the value for other languages. In the following example, if a blog post does not have a title in italian, it will use the english one:

module.exports = (dato, root, i18n) => {
  i18n.fallbacks = {
    it: ['en']
  };
  i18n.locale = 'it';
  dato.blogPosts[0].title;  // => "Hello world!"
}

Here's an complete example that creates multiple versions of your articles, one for each available locale:

// dato.config.js
module.exports = (dato, root, i18n) => {
  // inside the "src/article" directory...
  root.directory("content/article", (articlesDir) => {
    // iterate over all the available locales...
    i18n.availableLocales.forEach((locale) => {
      // switch to the nth locale
      i18n.withLocale(locale, () => {
        // iterate over the "Blog post" records...
        dato.blogPosts.forEach((article) => {
          // ...and create a localized markdown file for each article
          articlesDir.createPost(
            `${article.slug}.${locale}.md`, "yaml", {
              frontmatter: {
                title: article.title
              },
              content: article.content
            }
          );
        });
      });
    });
  });
};

Learn more about localization with DatoCMS

DatoCMS allows a great deal of customization when dealing with localization. Check out these tutorial videos for a hands-on learning experience:

Localizing Content in DatoCMS

Play video »

Creating a localized blog using Next.js

Play video »