Multilingual Ghost CMS Blog: 5. Making Home Links Language Aware

This guide details how to configure the home navigation links on a multilingual Ghost CMS blog to point to the appropriate language-specific homepage. The home links can be found in the navigation bar, footer, and error page. These links are currently set to point to the main page of the default language, regardless of the multilingual settings. The objective is to modify them so they direct to the active language instead.

The default.hbs file already functions correctly when handling the block lang in an if condition. However, this method does not work properly on the error page or tag page as they do not include index-ko or index-en and do not explicitly assign lang values like post or page do. Instead of relying on lang, a new approach is adopted to retrieve the selectedLanguage value stored in localStorage and update the URL accordingly.

To implement this, separate functions are created and stored in a util.js file for reusability across multiple files. The getSelectedLanguage function retrieves the selectedLanguage value from localStorage, default to en if not found. The updateLink function updates the href of a specified selector based on the selected language. These functions are then loaded from the js/util.js file using the {{asset}} helper.

The error-404.hbs, error.hbs, and tag.hbs files are updated to incorporate the getSelectedLanguage and updateLink functions. In error.hbs, JavaScript is added to change the href of the .error-link based on the selected language. Similarly, in error.hbs and tag.hbs, JavaScript is added to change the href of .error-link and .site-nav-logo respectively based on the selected language.

The default.hbs file also includes a function that initializes the language selector. This function checks if the current URL includes /tag/ and sets the selected language accordingly in localStorage and the language selector. It then listens for a change event on the language selector and updates the href of .gh-head-logo, section.copyright a, and li.nav-home a based on the selected language.