How to translate text in an external javascript file? (Django)-CodePudding

I have a JavaScript file that appends elements to the body according to the user interaction.

Right now in my index.html template I'm declaring global variables with the translated text:

 {% block main %}
      <script>
           let TRANSLATION = {% trans "my text" %}
      </script>
 {% endblock %}

So after Django translates the text in my index template, my JavaScript file can take the translated text and append it using something like:

element.innerHTML = TRANSLATION;

I know this is a very dirty way of translating the text that JavaScript will use because some users won't need that text and in those cases I'll be wasting resources with variables that I won't be using.

So the question is: What is the clean and correct way to translate text for external JavaScript files?

CodePudding user response：

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

CodePudding user response：

Maybe you can checkout Transifex Native instead of the standard Django i18n. It uses cloud based localization, without using translation files. You can translate both Django templates and Javascript code as separate code paths, using their i18n SDKs.

This is the Django SDK: https://developers.transifex.com/docs/django-sdk

and the JS one: https://developers.transifex.com/docs/javascript-sdk