Backend Training: I18n Translation

🔖 : Layout, Partial, I18n Translation, yaml

When dealing with translation, we used the Rails Internationalization (I18n) API. It is a good practice to set up the I18n even though your site does not require multi-lingual at the time to allow it to be easily extendable in the future.

The translations are store inside config/locales/ directory. By default, the default language is set to English.

# app/config/application.rb
config.i18n.default_locale = :en

You can change the default language if you want. For a list of available locales please see rails-i18n

Add translations for navbar

# app/config/locales/en.yml
en:
  navbar:
    home: HOME
    about: ABOUT

# app/views/components/_navbar.slim
li= link_to t('navbar.home'), root_path
li= link_to t('navbar.about'), '#about'

Refresh the browser Command ⌘+r, and you should see that the navbar texts have changed according.

Before moving on, this is actually not the conventional way of getting the I18n values. To fix this we know that the app/views/components/_navbar.slim is inside the components folder and the filename is _navbar.slim.

Part of Rails' magic the I18n keys are actually tied with template structure when rendering. This means that we can do the following:

# app/config/locales/en.yml
en:
  components:
    navbar:
      home: HOME
      about: ABOUT

# app/views/components/_navbar.slim
li= link_to t('.home'), root_path
li= link_to t('.about'), '#about'

p.s. the . inside t('') means use the template rendering keys.

Refresh the browser Command ⌘+r, and it should still work.

Add translations for navbar & footer

Now we know how to add I18n properly, let's go ahead and fix all the app/views/layout/components files.

# app/config/locales/en.yml
en:
  components:
    navbar:
      ......
      pricing: PRICING
      pricing/basic: Basic Package
      pricing/advanced: Advanced Package
    footer:
      copyright: 2017 © Clever Banana Studios Inc. All Rights Reserved.

# app/views/components/_navbar.slim
nav.navbar.navbar-default
  .container
    ......
    .collapse.navbar-collapse[id='main-nav']
      ul.nav.navbar-nav.navbar-right
        ......
        li.dropdown
          a.dropdown-toggle[href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"]
            = t('.pricing')
            span.caret
          ul.dropdown-menu
            li= link_to t('.pricing/basic'), pricing_path
            li= link_to t('.pricing/advanced'), pricing_path

# app/views/components/_footer.slim
footer
  .container
    .row
      .col-md-12.text-center
        h6= t('.copyright')

Refresh the browser Command ⌘+r, and everything should be working as expected.

Adding variables to yaml files

Before moving on, let's look at the app/views/components/_footer.slim. For the copyright, our I18n value is 2017 © Clever Banana Studios Inc. All Rights Reserved. It works fine for now, but we don't want to have to change it whenever a new year comes.

Let's fix this by passing a param to the translation.

# app/config/locales/en.yml
footer:
  copyright: '%{year} © Clever Banana Studios Inc. All Rights Reserved.'

# app/views/components/_footer.slim
h6= t('.copyright', year: Time.zone.now.year)

The %{} means variable in yml files, and it is necessary to add the '' around the values if there are special characters rather than plain text.

Refresh the browser Command ⌘+r, and everything should be working as expected.

Commit your code and move on to the next section.

$ git add -A
$ git commit -m 'Add I18n to layout components'

↪️ Next Section: Re-writing Git History