0

I was looking in other questions.

  • I know that Django allows to use built-in tags in the internal JavaScript code on HTML page, but it is a bad practice that a professional developer would not do;
  • I know that Django does not allow to use built-in tags in the external JavaScript files. Differently of it, Go Hugo allows.
  • I considered the question Django translations in Javascript files, but I do not know if it is a bad practice to generate the JavaScript with the same name but with with different language abbreviation, as table-en.js, table-fr.js, table-pt-br.js, table-pt-pt.js, etc.

The small code, for example:

var preTtitle = 'List of colours and icon in';

const styles = 
[
  { name: 'adwaita-plus', title: ' ' + preTtitle + 'Adwaita++' },
  { name: 'suru-plus', title: ' ' + preTtitle + 'Suru++' },
  { name: 'suru-plus-ubuntu', title: ' ' + preTtitle + 'Ubuntu++' },
  { name: 'yaru-plus', title: ' ' + preTtitle + 'Yaru++' }
];

I also need to translate the table columns:

firstHeader.textContent = 'Name of colour';
secondHeader.textContent = 'Preview of icons';

trHeader.appendChild(firstHeader);
trHeader.appendChild(secondHeader);

thead.appendChild(trHeader);

I want to translate 'List of colours and icon in', 'Name of colour' and 'Preview of icons'.

As Django does not allow to use the built-tag of translation in this file, how do you solve it?

I am sure if the question Django translations in Javascript files is the only solution and good or bad practice.

Oo'-
  • 203
  • 6
  • 22

2 Answers2

2

I ran into this problem yesterday and someone suggested a better solution. You can actually translate text in your JavaScript files without the need of getting the translations in you HTML template.

Django Translation provides you with the JavaScriptCatalog, this allows you to translate your js text with the use of gettext(), just as you do inside of your views.

urls.py

from django.views.i18n import JavaScriptCatalog

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

index.html

<script src="{% url 'javascript-catalog' %}"></script>

script.js

// In this example your body will get the translated version of "Hello"
document.body.innerHTML = gettext('Hello');

How to generate the translation files:

django-admin makemessages -d djangojs -l es

The diference here is that you'll add -d djangojs to the command.

After you finish with the translation then you compile the messages the same way you'd do for template and views translation:

django-admin compilemessages

Django ducumentation: https://docs.djangoproject.com/en/4.0/topics/i18n/translation/#internationalization-in-javascript-code

Question in which the solution was provided: https://stackoverflow.com/questions/71757020/how-to-translate-text-in-an-external-javascript-file-django/71758709#71758709

Solution provided by @hendrikschneider:

Most of the work will be done by django. Follow their documentation: https://docs.djangoproject.com/en/4.0/topics/i18n/translation/#internationalization-in-javascript-code

A little further down on the page is also documented how to generate the language file for your javascript code. You will have two language files later, one for your django application and one for your javascript code.

https://docs.djangoproject.com/en/4.0/topics/i18n/translation/#creating-message-files-from-javascript-source-code

qwerty000
  • 176
  • 11
  • Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the external resource is unreachable or goes permanently offline – Besworks Apr 06 '22 at 19:21
  • @Besworks I have added relevant information. thanks for the suggestion. – qwerty000 Apr 06 '22 at 20:02
1

you can make this work creating functions inside a javascript file and import that file in the html. Afterwards, translate the objects you want inside your template, then pass the translated texts to the functions you created. There is no other way, don't worry about bad practices.

<script src="{% static 'js/translation_helpers.js' %}"></script>
<script>
    let frenchText = {% translate "something in french" %}
    functionYouCreated(translatedText, 'fr')
    let englishText = {% translate "something in english" %}
    functionYouCreated(translatedText, 'en')
</script>

To change translations languages in the template see https://docs.djangoproject.com/en/3.2/topics/i18n/translation/#switching-language-in-templates

mendespedro
  • 466
  • 3
  • 8