Recently when developing a site using middleman, my client wonder that if we can do localization for the website. Fortunately, Middleman comes with the localization extension i18n which is pretty simple to integrate it into the site. Although there’s a quick overview of Middleman Localization available on the middlemanapp.com, I still find it a little bit confused for Middleman beginners. Here are quick steps how to set it up:
1. Activate i18n and update your bundle.
To activate, going to your config.rb file, then add at the end of file.
activate :i18nOpen terminal and direct to your middleman app, then run.
$ bundle update
2. Organize your middleman folders so that it knows where translated files located.
source build config.rb Gemfile Gemfile.lock locales
3. Add translation text into your translated files:
For example, in my en.yml file, it contains:
— en: siteName: “Khoa Pham” footer: privacy: “Privacidad” legal_disclosure: “Aviso legal” terms_of_use: “Términos de uso” copyright: “Copyright”
4. Output translation text to your template files.
Since you already put your template files into the localizable folders, now you can go to files in that folder and output localizable text. My site only has one template file called index.html.erb:
To output translated text from the translated files, we use: <%= I18n.t(“your_key_here”) %>. For example,
<%= I18n.t(“siteName”) %> <%= I18n.t(“footer.privacy”) %> <%= I18n.t(“footer.legal_disclosure”) %> <%= I18n.t(“footer.terms_of_use”) %> <%= I18n.t(“footer.copyright”) %>
You can view your site under Spanish by going to: http://localhost:4567/es/index.html