Django Internationalization Tutorial-3

---

Translation from Templates and JavaScript files

The translation of a string in the view was implemented in the previous article of this tutorial series. However, in most commercial applications, we will be dealing with Django templates or JavaScript code.

This third post's purpose is to set up translations for Django templates and JavaScript. We will carry on with the project started in the last post.

Translation on Templates:
Although Django allows us to create templates wherever we choose, it is considered best practice to create templates within the folders of applications. Make a template folder called languages/templates/languages/ with an index.html template inside:

{% load i18n %}
<h1>{% trans 'Hello' %}</h1>
<p>{% trans 'Welcome to my site.' %}</p>

The first line is necessary to import the translate functions. The remaining lines just define some html elements and make use of the trans function. Most of the time, you will use trans to translate sentences and blocktrans to translate blocks of sentences. We must also change our view for it to render the template:

from django.shortcuts import render_to_response

def index(request):
    return render_to_response('languages/index.html')

Now we must instruct Django to search for translatable strings. Inside the languages directory do:

django-admin makemessages -l pt_pt

Open laguages/locale/pt_pt/LC_MESSAGES/django.po and translate the messages. Since the "Welcome to my site." string was already used previously, the makemessages command will reuse it.

#: .\languages\templates\languages\index.html:3
msgid "Hello"
msgstr "Olá"

#: .\languages\templates\languages\index.html:4
msgid "Welcome to my site."
msgstr "Bem-vindo ao meu site"

Last, compile the messages with:

django-admin compilemessages

Open the project settings and check that the language code is set to "pt-pt" (like we did in the previous post):

Point the browser to http://localhost:8000/languages/ and Django should render the translated template.

Translation from JavaScript files

Django also supports JavaScript code translations, albeit the procedure is slightly different. Make a simple JavaScript file called languages/static/hello.js that contains the following code

document.write(gettext('Welcome to my site.'));

The gettext function, like its Python version, matches an input string with a translated string. Even though we still have a few things to do, let us translate and build the string. Go to the languages folder and perform the following

django-admin makemessages -l pt_pt -d djangojs

Django will create a new file with the JavaScript messages in locale/pt_pt/ LC_MESSAGES/djangojs.po. Open it and translate the message:

#: .\static\hello.js:1
msgid "Welcome to my site."
msgstr ""

Change msgstr with Portuguese language as below

#: .\static\hello.js:1
msgid "Welcome to my site."
msgstr "Bem-vindo ao meu site."

If everything is working fine, you will find the new compiled file in locale/pt_pt/ LC_MESSAGES/djangojs.mo.

As you can see, even though we use the gettext method in our short script, it is not implemented anywhere. When you execute that short amount of code manually in your browser, it will complain about missing declarations. We need to create what is known as the javascript catalogue.

JavaScript Catalogue
The JavaScript catalogue is a short script that Django employs to inject all auxiliary functions and translatable texts into the browser. Django uses the JavaScript catalog view method defined in Django. View. i18n to export the JavaScript catalogue to the browser. To utilize that view, make the following changes to languages/urls.py:

from django.views.i18n import JavaScriptCatalog
from django.urls import path, include

from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
]

Reload the server, point your browser to http://localhost:8000/languages/jsi18n/ and you will see the content of the JavaScript catalog:

We can find the django.catalog variable with the translated string and the other functions being defined. Finally, we just need to make sure that our small JavaScript code and the catalog are being loaded in the template:
re write below code into index.html

<!--{% load i18n %}-->

<!--<h1>{% trans 'Hello' %}</h1>-->
<!--<p>{% trans 'Welcome to my site.' %}</p>-->

<html>
<head>
    <script type="text/javascript"
            src="{% url 'javascript-catalog' %}"></script>
    <script type="text/javascript" src="/static/hello.js"></script>
</head>
</html>

Point the browser to http://localhost:8000/languages/

Disclaimer: This is a personal [blog, post, statement, opinion]. The views and opinions expressed here are only those of the author and do not represent those of any organization or any individual with whom the author may be associated, professionally or personally.