How to use gettext() function in nunjucks for localization in Webmaker.org

Using Localization & Nunjucks to update UI.

To do localization we have to first find the messages.json file. Its located in the local/ directory. Once you open that you will find all the localization folders that exist. In my case I found english, french, russian and thai. 

You can run the following command to find these files. 

Once you open the messages.json file you can add a key value pair. The key is what you will use to pass into the gettext function to get the value in messages.json which is displayed via nunjucks.

In this example I had to add an error message to display no javascript enabled to fix a bug. I wanted to share what I've learned.

Code Explained:

In the code you will see uses of {{ gettext("nojs") | safe }} which is used to go into the messages.json file and search for that key and display the localized text in it's place. The double brackets {{   }} are used to print the contents of a variable. 

Note: If your string does not contain html then you don't need the "| safe " which was added here. You will see an example of this in the title tag where I put:  {{ gettext("noJsTitle") }}.

Now your ready to work with localization in webmaker.org code.

Warning: Make sure to keep the messages.json file in alphabetical order once you've made your changes.