Introducere

Django este o bibliotecă Python foarte puternică, folosită pentru a crea aplicații web. Dacă ai auzit de Django, probabil ai auzit și termenul „Batteries Included”. Acesta înseamnă că Django vine cu un set de unelte integrate, gata de utilizare, care le permit dezvoltatorilor să construiască rapid aplicații complexe.

Una dintre uneltele pe care le vom explora astăzi este modulul de internaționalizare Django, sau pe scurt, i18n. Acest modul este folosit pentru a crea și gestiona cu ușurință versiuni în mai multe limbi ale site-ului tău. I18n este extrem de util dacă vrei să oferi site-ul tău mai multor categorii de utilizatori, în limbile lor native, și nu vrei să te bazezi pe traduceri automate facute cu ajutorul Google Translate, care sunt uneori inconsecvente, sau pe alte unelte third-party.
Atunci când folosești sistemul de traduceri Django, tu controlezi ce text apare pe pagină și nu pot exista surprize, așa cum se întâmplă uneori cu traducerile automate, care pot să nu redea exact sensul dorit.

În acest tutorial, vom explora cum să activăm mecanismul de traducere din Django și cum să creăm câteva traduceri simple pentru a ne familiariza cu acesta, astfel încât să poți folosi aceste cunoștințe ca bază și să le aplici propriilor tale site-uri.

Pentru acest tutorial, voi face câteva presupuneri, astfel încât să pot oferi comenzile exacte (având în vedere structura cunoscută a folderelor):

• Execuți acest cod în laboratorul cloud Web Development de pe Bytestark.com
• Folosești exemplul Django existent din folderul /examples/django_sample_1
• Folderul root atunci când deschizi laboratorul Web Development este /home/coder/learning. Atunci când sunt menționate căi, acestea vor fi relative la acest director rădăcină.

Activarea motorului de traducere

Tot ceea ce putem modifica într-un proiect Django pentru a-l personaliza se află în fișierul de setări; prin urmare, trebuie să localizăm fișierul settings.py corespunzător proiectului nostru.

Acest fișier se află la locația /examples/django_sample_1/django_sample_1/settings.py. Haide să îl deschidem și să analizăm setările legate de traduceri.

Notă: Această versiune a fișierului settings.py, deși a fost generată mai devreme, este aproape identică cu cea implicită, așa cum ai obține în urma rulării comenzii django-admin startproject new. Prin urmare, setările pe care le vezi în acest fișier vor fi aproape identice cu cele din orice alt proiect Django creat de la zero.

Caută setarea numită USE_I18N. Această setare este True în mod implicit, dar întotdeauna e bine să verifici, în cazul în care a fost modificată accidental pe parcursul ciclului de viață al proiectului. Această setare controlează funcționalitatea de traducere din Django.

Setarea ei la False va dezactiva tot ce ține de traducere și localizare și nici măcar nu va încărca componentele legate de traducere, ceea ce poate îmbunătăți performanța site-ului. Dacă nu folosești traducerea, este recomandat să o dezactivezi, însă în cazul nostru o vom păstra activă, deoarece dorim să explorăm capabilitățile de traducere.

O altă setare pe care vrem să o analizăm este LOCALE_PATHS. Această setare controlează locația în care vor fi plasate fișierele de traducere rezultate, pe care Django le va încărca la runtime. De obicei, acest folder este amplasat la rădăcina proiectului Django pentru a fi ușor accesibil, așa că configurarea lui așa cum este prezentat mai jos este o alegere logică.

LOCALE_PATHS = [
    BASE_DIR / "locale"
]

În continuare, trebuie să specificăm limbile pe care dorim să le folosim pentru site-ul nostru. Să începem simplu și să oferim site-ul nostru de test în română și engleză. Pentru a seta lista de limbi, folosim setarea LANGUAGES, așa cum o facem mai jos:

LANGUAGES = [
    ("ro", _("Romanian")),
    ("en", _("English")),
]

Este posibil să fi observat notația aparent ciudată _("English") din fragmentul de mai sus și să te întrebi ce înseamnă. Această sintaxă este o convenție prin care se indică ce șiruri de caractere trebuie traduse în codul sursă Django. În realitate însă, nu este nimic ciudat despre această notație, deoarece este pur și simplu un import al funcțiilor de traducere corespunzătoare. Pentru ca acest lucru să funcționeze, trebuie să adăugăm următorul import în partea de sus a fișierului settings.py:

from django.utils.translation import gettext_lazy as _

Sistemul de traduceri din Django se bazează pe setul de unelte GNU gettext, motiv pentru care trebuie să importăm funcția gettext_lazy - aceasta este un wrapper Python pentru setul de unelte GNU gettext.

Crearea fișierelor de traducere

Acum că am activat și configurat sistemul de traduceri din Django, haide să creăm fișierele de traducere propriu-zise, care vor fi folosite pentru a încărca și afișa textul pe pagină. Pentru a genera fișierele de traducere corespunzătoare, trebuie să-i spunem lui Django ce limbi dorim să procesăm, folosind următoarea comandă de management:

python3 manage.py makemessages --locale en

Rularea acestei comenzi va afișa următorul mesaj:

processing locale en

Fă la fel pentru toate limbile configurate în fișierul tău de setări

python3 manage.py makemessages --locale ro

Rularea acestei comenzi va afișa următorul mesaj:

processing locale ro

După rularea acestor comenzi, structura folderelor ar trebui să arate precum cea din imaginea de mai jos:

Comenzile de mai sus au creat folderul locale, așa cum am configurat în settings.py prin setarea LOCALE_PATHS, și au adăugat, de asemenea, câte un folder corespunzător fiecărei limbi configurate, în acest caz en și ro. În interiorul fiecărui folder, putem observa că Django a creat un subfolder LC_MESSAGES și un fișier numit django.po. Aceste fișiere django.po sunt fișierele principale de traducere în format GNU gettext Portable Object. Ele vor conține toate șirurile marcate pentru traducere și echivalentele lor traduse. Haide să deschidem oricare dintre aceste fișiere și să vedem formatul lor.

# SOME DESCRIPTIVE TITLE.
# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
# This file is distributed under the same license as the PACKAGE package.
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
#
#, fuzzy
msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2026-01-18 12:02+0000\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"Language: \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
#: django_sample_1/settings.py:116
msgid "Romanian"
msgstr ""

#: django_sample_1/settings.py:117
msgid "English"
msgstr ""

Acesta este cel mai simplu fișier de traducere, care, în partea de sus, conține metadatele fișierului, unde poți adăuga detalii despre propriul proiect, însă acestea sunt utile mai mult pentru oameni decât pentru traducerea propriu-zisă. Partea cu adevărat utilă este următoarea:

#: django_sample_1/settings.py:117
msgid "English"
msgstr ""

Acest bloc reprezintă unitatea de text care poate fi tradusă, pe care am marcat-o în codul nostru și pe care makemessages a extras-o după scanarea codului. Ține minte că am folosit ("en", _("English")) în fișierul nostru settings.py și am importat gettext_lazy as _ pentru a indica pentru Django că aceste șiruri trebuie traduse înainte de a fi afișate pe pagină.
De aceea, în fișierul nostru django.po putem vedea aceste două valori: English și Romanian.

În orice bloc de traducere din fișierul .po vom avea următoarele câmpuri:

• #: django_sample_1/settings.py:117 - Aceasta indică locația șirului în fișierele proiectului nostru.
• msgid "English" - msgid reprezintă șirul original, extras din cod.
• msgstr "" - Aici vom adăuga versiunea tradusă a msgid pentru limba corespunzătoare.

Haide să adăugăm traducerile noastre pentru acest fișier django.po de bază.
Dar în care fișier ar trebui să adăugăm aceste traduceri dacă avem două versiuni de django.po?

Răspunsul depinde de limba ta principală. În cazul nostru, limba principală este Engleza, iar Româna este limba secundară, așa că va trebui să adăugăm versiunile în română ale șirurilor în /locale/ro/LC_MESSAGES/django.po.

Am fi putut omite complet crearea fișierului /locale/en/LC_MESSAGES/django.po, deoarece Engleza este limba principală și nu are sens să adăugăm traduceri din Engleza în Engleza. Totuși, am creat fișierul în scop demonstrativ, așa că pentru acest tutorial el va rămâne gol.

Haide să actualizăm fișierul /locale/ro/LC_MESSAGES/django.po adăugând următoarele versiuni traduse:

#: django_sample_1/settings.py:116
msgid "Romanian"
msgstr "Română"

#: django_sample_1/settings.py:117
msgid "English"
msgstr "Engleză"

Acum, acest fișier este destinat utilizatorilor pentru a adăuga traducerile corespunzătoare, însă acesta nu este fișierul pe care Django îl va folosi. Pentru asta, va trebui să compilăm mesajele într-un fișier binar, care este mai ușor de procesat de Django și este mult mai rapid. Pentru a compila fișierele de traducere, folosim comanda:

python3 manage.py compilemessages

Dacă comanda rulează cu succes, ar trebui să vedem următorul rezultat:

processing file django.po in /home/coder/learning/examples/django_sample_1/locale/ro/LC_MESSAGES
processing file django.po in /home/coder/learning/examples/django_sample_1/locale/en/LC_MESSAGES

După ce această comandă este executată, putem observa că în fiecare folder în care avem fișierele de traducere django.po a apărut un fișier nou numit django.mo. Acest fișier este un fișier binar care conține toate traducerile, pe care Django le va încărca și folosi la rulare. Fișierul este un Machine Object și nu trebuie să îl modificăm manual.

De fiecare dată când actualizăm fișierul django.po, trebuie să recompilăm traducerile folosind comanda compilemessages, ceea ce va recrea fișierele django.mo.

Folosirea traducerilor pe site

Acum avem fișierele de traducere, însă ele nu sunt utile dacă nu avem o pagină web multilingvă pe care să afișăm aceste texte traduse. Așadar, haide să creăm o pagină simplă care să conțină câteva elemente demne de tradus.

Deschide fișierul /django_sample_1/home/templates/home/home.html și înlocuiește conținutul cu codul de mai jos:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Homepage</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            padding: 20px;
            flex-direction: column;
            font-weight: 700;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-bottom: 20px;
        }
        .menu {
            display: flex;
            gap: 15px;
        }
        .logo {
            text-decoration: none;
            color: #000000;
            font-size: 24px;
            font-weight: bold;
        }
        .logo:hover {
            color: #fa2311;
        }
        .content {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        button {
            margin-top: 10px;
        }
        input[type="text"],
        input[type="email"],
        textarea {
            padding: 8px;
            font-size: 16px;
        }
    </style>

    <script>
        function register_user(){
            let message = document.getElementById("message");
            let user_name = document.getElementById("name");
            let user_email = document.getElementById("email");
            let new_content = `<p>Hello ${user_name.value}. Please check your email address ${user_email.value} where we have sent log in instructions.</p>`;
            if (!user_name.value || !user_email.value){
                new_content = "<p>Name or Email not provided. Please fill in the form</p>";
            }
            message.innerHTML = new_content;
        }
    </script>
</head>
<body>
    <div class="header">
        <a href="#" class="logo">Django i18n</a>
        <div class="menu">
            <a href="#home" class="logo">Home</a>
            <a href="#about" class="logo">About</a>
            <a href="#contact" class="logo">Contact</a>
        </div>
    </div>

    <div class="container">
        <div class="content">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" placeholder="Enter your name"/>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Enter your email"/>

            <button class="btn btn-success" type="submit" onclick="register_user()">Submit</button>
        </div>

        <div id="message"></div>
    </div>
</body>
</html>

După ce am adăugat acest cod, haide să pornim serverul Django și să vedem pagina noastră. Pentru a rula serverul, folosește comanda:

python3 manage.py runserver

Aceasta va porni serverul de dezvoltare, iar VSCode va afișa un mesaj pop-up care ne informează că site-ul nostru este accesibil și ne întreabă dacă dorim să-l deschidem. Apasă pentru a deschide. Pagina ta de start ar trebui să arate precum cea de mai jos:

Această versiune a paginii de start va fi versiunea noastră implicită, care este în Engleză, însă în prezent nu avem nicio modalitate de a modifica limba în Română. Haide să remediem acest lucru.

Există mai multe modalități de a crea site-uri multilingve, cum ar fi schimbarea limbii pe baza unui query parameter sau crearea unei instanțe complet separate a site-ului care deservește un public diferit. În acest tutorial, vom explora o versiune mai simplă, dar eficientă și compatibilă cu motoarele de căutare, deoarece acestea înțeleg foarte bine această structură: o structură bazată pe căi URL(URL Paths).

Vom face ca site-ul nostru să servească limba implicită la locația /en, iar versiunea în Română la /ro. Toate URL-urile de pe site vor avea prefixul automat cu codul limbii en sau ro, în funcție de selecția noastră. Acest lucru face navigarea ușor de înțeles atât pentru utilizatori, cât și pentru motoarele de căutare. Haide să vedem cum putem realiza acest lucru.

Deschide fișierul settings.py și localizează setarea LANGUAGE_CODE. În prezent, aceasta folosește valoarea implicită, care ar trebui să fie:

LANGUAGE_CODE = 'en-us'

Ce face această setare este să servească paginile noastre folosind codul limbii plus codul regiunii ca prefix pentru limbă, astfel încât pentru en-us am avea /en-us/page1..., ceea ce nu este ceea ce ne dorim acum. Noi vrem să folosim doar codul limbii și să nu ne complicăm cu codul regiunii.

Ambele opțiuni sunt viabile, însă utilizarea codului limbii împreună cu codul regiunii versus simpla utilizare a codului limbii depășește scopul acestui tutorial și poate fi explorată ulterior.

Ce merită menționat este că Django nu face nicio diferență între opțiuni; totul depinde de ceea ce avem nevoie și de modul în care configurăm setarea.
Singurul loc unde poate avea un impact este în SEO, însă conform documentației Google Search, codul limbii conținutului este suficient în majoritatea cazurilor, așa că vom merge pe această abordare.

Haide să ajustăm această setare și să eliminăm codul regiunii, astfel încât setarea să devină:

LANGUAGE_CODE = 'en'

Acum că am configurat codul limbii, haide să activăm schimbarea limbii la nivel de URL. Pentru asta, va trebui să actualizăm fișierul /django_sample_1/django_sample_1/urls.py și să modificăm codul astfel:

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.i18n import i18n_patterns

urlpatterns = [
    path('admin/', admin.site.urls),
]

urlpatterns += i18n_patterns(
    path('', include("home.urls")),
)

Ceea ce am făcut aici este să informăm Django că toate căile din lista i18n_patterns vor trebui prefixate cu codul limbii, deoarece ele vor folosi traducerea, în timp ce căile din url_patterns nu vor fi traduse.

În acest exemplu, traducem doar paginile vizibile utilizatorilor, așa cum sunt definite în home.urls, dar nu dorim să traducem aplicația admin. Deși am putea face asta dacă am fi dorit, am vrut doar să subliniez că putem folosi o abordare hibridă și să alegem care căi vor fi prefixate cu codul limbii și care nu.

Ține doar cont să nu-ți confunzi utilizatorii folosind această abordare. Interfața de administrare nu este destinată utilizatorilor finali, așa că păstrarea ei netradusă este acceptabilă.

Acum că am activat rescrierea URL-urilor folosind codul limbii, haide să încercăm să accesăm cele două versiuni ale site-ului. După ce am actualizat fișierul urls.py, serverul ar fi trebuit să reîmprospăteze automat site-ul; dacă nu s-a întâmplat, oprește și pornește din nou serverul.

Acum site-ul nostru nu ar trebui să fie disponibil la locația rădăcină /, însă accesând /en/ ar trebui să se deschidă pagina de start. Haide să încercăm să accesăm versiunea în Română navigând la /ro/.

Ai primit eroarea Page not found (404)?

De ce se întâmplă asta, dacă aparent am activat traducerea peste tot?
Răspunsul este : Middleware-ul de traducere.
Trebuie să adăugăm middleware-ul LocaleMiddleware pentru a activa rescrierea automată a căilor URL cu prefixul corect al limbii.

În fișierul settings.py, localizează setarea MIDDLEWARE și adaugă în listă următorul middleware:

Notă: Middleware-urile trebuie să respecte o anumită ordine; în caz contrar, aplicația ar putea avea un comportament neașteptat sau să nu funcționeze deloc.

'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.locale.LocaleMiddleware', # <--- Aceasta valoare lipsea
# ...

Accesarea versiunii /ro a site-ului ar trebui să funcționeze acum, dar stai… tot apare în Engleză.

Asta se întâmplă pentru că am adăugat conținut pe pagină, dar nu am tradus nimic efectiv, așa că acum haide să adăugăm traducerile propriu-zise.

Deschide codul sursă al paginii noastre de start în home.html și haide să vedem cum putem marca șirurile pentru traducere.

Primul lucru pe care trebuie să-l facem într-un template Django pentru a activa traducerea pe pagină este să încărcăm modulul i18n în fișierul template. Adaugă următoarea linie în partea de sus a fișierului home.html:

{% load i18n %}

În continuare, pentru a marca un șir de caractere pentru traducere, trebuie să folosim un template tag special numit trans, așa cum putem vedea mai jos:

{% trans "TEXT" %}

Așadar, ceea ce vom face acum este să înlocuim fiecare string din template cu echivalentul său folosind {% trans %}. Poți face acest lucru manual pentru a te familiariza mai bine cu sintaxa sau pur și simplu să faci copy-paste la următorul cod în template-ul tău home.html:

{% load i18n %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% trans "My Homepage" %}</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            padding: 20px;
            flex-direction: column;
            font-weight: 700;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-bottom: 20px;
        }
        .menu {
            display: flex;
            gap: 15px;
        }
        .logo {
            text-decoration: none;
            color: #000000;
            font-size: 24px;
            font-weight: bold;
        }
        .logo:hover {
            color: #fa2311;
        }
        .content {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        button {
            margin-top: 10px;
        }
        input[type="text"],
        input[type="email"],
        textarea {
            padding: 8px;
            font-size: 16px;
        }
    </style>

    <script>
        function register_user(){
            let message = document.getElementById("message");
            let user_name = document.getElementById("name");
            let user_email = document.getElementById("email");
            let new_content = `<p>{% blocktrans %}Hello ${user_name.value}. Please check your email address ${user_email.value} where we have sent log in instructions{% endblocktrans %}.</p>`;
            if (!user_name.value || !user_email.value){
                new_content = '<p>{% trans "Name or Email not provided. Please fill in the form" %}</p>';
            }
            message.innerHTML = new_content;
        }
    </script>
</head>
<body>
    <div class="header">
        <a href="#" class="logo">Django i18n</a>
        <div class="menu">
            <a href="#home" class="logo">{% trans "Home" %}</a>
            <a href="#about" class="logo">{% trans "About" %}</a>
            <a href="#contact" class="logo">{% trans "Contact" %}</a>
        </div>
    </div>

    <div class="container">
        <div class="content">
            <label for="name">{% trans "Name" %}:</label>
            <input type="text" id="name" name="name" placeholder='{% trans "Enter your name" %}'/>

            <label for="email">{% trans "Email" %}:</label>
            <input type="email" id="email" name="email" placeholder='{% trans "Enter your email" %}'/>

            <button class="btn btn-success" type="submit" onclick="register_user()">{% trans "Submit" %}</button>
        </div>

        <div id="message"></div>
    </div>
</body>
</html>

Acum, cu toate șirurile marcate pentru traducere, trebuie să regenerăm fișierul de traducere folosind comanda pe care deja o cunoaștem:

python3 manage.py makemessages --all

După generarea inițială a fișierelor, putem folosi opțiunea --all pentru a scana din nou fișierele locale și a extrage șirurile pe care le-am marcat pentru traducere pentru toate limbile activate.

Dacă deschidem fișierul django.po din folderul /ro, acesta va conține toate șirurile pe care trebuie să le traducem.

#: django_sample_1/settings.py:111
msgid "English"
msgstr "Engleză"

#: django_sample_1/settings.py:112
msgid "Romanian"
msgstr "Română"

#: home/templates/home/home.html:6
msgid "My Homepage"
msgstr ""

#: home/templates/home/home.html:62
#, python-brace-format
msgid ""
"Hello ${user_name.value}. Please check your email address ${user_email."
"value} where we have sent log in instructions "
msgstr ""

#: home/templates/home/home.html:64
msgid "Name or Email not provided. Please fill in the form"
msgstr ""

#: home/templates/home/home.html:74
msgid "Home"
msgstr ""

#: home/templates/home/home.html:75
msgid "About"
msgstr ""

#: home/templates/home/home.html:76
msgid "Contact"
msgstr ""

#: home/templates/home/home.html:82
msgid "Name"
msgstr ""

#: home/templates/home/home.html:83
msgid "Enter your name"
msgstr ""

#: home/templates/home/home.html:85
msgid "Email"
msgstr ""

#: home/templates/home/home.html:86
msgid "Enter your email"
msgstr ""

#: home/templates/home/home.html:88
msgid "Submit"
msgstr ""

Acum adaugă traducerile corespunzătoare în limba română:

```po
#: django_sample_1/settings.py:112
msgid "English"
msgstr "Engleză"

#: django_sample_1/settings.py:113
msgid "Romanian"
msgstr "Română"

#: home/templates/home/home.html:6
msgid "My Homepage"
msgstr "Pagina mea principală"

#: home/templates/home/home.html:62
#, python-brace-format
msgid ""
"Hello ${user_name.value}. Please check your email address ${user_email.value} where we have sent log in instructions "
msgstr ""
"Bună ${user_name.value}. Te rugăm să verifici adresa ta de email ${user_email.value}, unde ți-am trimis instrucțiunile de autentificare "

#: home/templates/home/home.html:64
msgid "Name or Email not provided. Please fill in the form"
msgstr "Lipsește numele sau adresa email. Te rugăm să completezi formularul"

#: home/templates/home/home.html:74
msgid "Home"
msgstr "Acasă"

#: home/templates/home/home.html:75
msgid "About"
msgstr "Despre"

#: home/templates/home/home.html:76
msgid "Contact"
msgstr "Contact"

#: home/templates/home/home.html:82
msgid "Name"
msgstr "Nume"

#: home/templates/home/home.html:83
msgid "Enter your name"
msgstr "Introdu numele tău"

#: home/templates/home/home.html:85
msgid "Email"
msgstr "Email"

#: home/templates/home/home.html:86
msgid "Enter your email"
msgstr "Introdu adresa ta de email"

#: home/templates/home/home.html:88
msgid "Submit"
msgstr "Trimite"

Și recompilăm traducerile folosind comanda:

python3 manage.py compilemessages

Dacă încercăm acum să accesăm pagina /ro/, aceasta ar trebui să aibă toate șirurile traduse corect, conform fișierului nostru de traducere, așa cum este ilustrat în imaginea de mai jos:

Să încercăm să trimitem formularul de pe pagină și să vedem ce se întâmplă. Adaugă un nume și o adresă de email fictive și apasă Trimite. Ar trebui să observi că mesajul afișat este, de asemenea, tradus, chiar dacă acel mesaj este randat cu ajutorul JavaScript.

Deoarece întregul template este procesat de Django înainte ca JavaScript-ul să fie încărcat, șirurile vor fi înlocuite corespunzător, astfel încât JavaScript-ul nici măcar nu "știe" că aceste string-uri sunt dinamice și sunt încadrate în {% trans %} sau {% blocktrans %}.

Acest lucru funcționează deoarece codul JavaScript este inline în HTML; dacă ar fi fost într-un fișier .js separat, încărcat în template-ul HTML, această abordare nu ar fi funcționat și ar fi trebuit să ajustăm metoda în consecință. Probabil vom explora traducerile specifice JavaScript într-un tutorial viitor.

Mesajul afișat ar trebui să arate ca în imaginea de mai jos:

Dacă încercăm să accesăm versiunea în engleză a site-ului și să trimitem formularul, acesta ar trebui să afișeze mesajul corect, așa cum ne așteptăm, în limba engleză:

Un ultim aspect de discutat din exemplul de mai sus este utilizarea tagului blocktrans în linia:

let new_content = `<p>{% blocktrans %}Hello ${user_name.value}. Please check your email address ${user_email.value} where we have sent log in instructions {% endblocktrans %}.</p>`;

{% blocktrans %} îndeplinește practic aceeași funcție ca {% trans %}, însă, pe când {% trans %} poate fi folosit doar pentru șiruri statice simple, {% blocktrans %} poate conține logică și variabile. De aceea a trebuit să folosim tag-ul de traducere bloc, deoarece am interpolat variabilele ${user_name.value} și ${user_email.value}.

Când folosești {% blocktrans %}, nu uita că trebuie să închizi acest tag cu {% endblocktrans}, altfel serverul va genera o excepție.

Rezumat

În acest tutorial, am explorat conceptele de bază despre cum să folosim sistemul de traduceri din Django pentru a crea site-uri multilingve. Există și alte concepte pe care nu le-am abordat aici, cum ar fi utilizarea textelor traduse în context, care pot fi transmise de la backend către template, sau modul în care înregistrările din baza de date pot fi traduse și afișate pe pagină.

Totuși, pentru a păstra acest tutorial relativ scurt și concentrat, am omis aceste concepte și altele care ar fi fost prea multe pentru a fi menționate aici. Acest tutorial ar trebui să ofere o bază suficientă pentru a înțelege conceptele de bază și pentru a începe să explorezi pe cont propriu soluții aplicabile site-urilor tale.