08 Multi language setup for developers - 18F/federalist-jekyll-netlify-cms-guides GitHub Wiki

Internationalization (i18n) within Jekyll is a common problem encountered. There are a few components that work together to make i18n function on the ChildCare.gov Jekyll site.

Language picker

The language picker component is how users interact with the i18n system. It’s located at _includes/components/language-picker.html

URL localizer plugin

This Jekyll plugin makes two new filters available Liquid templates that support i18n. This plugin is located at _plugins/locale_url_filter.rb. Any changes to Jekyll plugins such as this one require a restart of the local development server to take effect. These two filters work together within the language picker component to generate a clickable link for each language listed in _config.yml under the languages key that always points to the localized permalink of the current page.

locale_url

This filter is used to prepend the appropriate language code to a URL based on the locale (language) passed into the filter via its named property, locale.

delocalize_url

This filter is used to strip any language code from a URL and return just the permalink to the current page. This method uses a regular expression to do its work and there are some web links commented in the code that will explain what the regular expression is doing and allow you to play around with changes to the regular expression in the browser in case changes need to be made in the code.

Page permalinks

In order for the links generated by the localization filters to work, the permalink for a particular page should match for each language other than the beginning language code.

Here’s an example table showing the page permalinks required for Alabama. Notice that the document path such as “financial-assistance-for-families” doesn’t get localized into the target language.

English Permalink	Spanish Permalink
/state-resources/alabama	/es/state-resources/alabama
/state-resources/alabama/financial-assistance-for-families	/es/state-resources/alabama/financial-assistance-for-families
/state-resources/alabama/health-and-social-services	/es/state-resources/alabama/health-and-social-services
/state-resources/alabama/child-development-and-early-learning	/es/state-resources/alabama/child-development-and-early-learning