Hogyan készíts többnyelvű weboldalt a Flask-Babellel

A digitális korban a világháló a kommunikáció és a kereskedelem globális platformjává vált. Egyre több vállalkozás és tartalomkészítő fedezi fel a többnyelvű weboldalak előnyeit. Képzelje el, hogy tartalma nemzetközi közönséghez jut el, a felhasználói élmény javul, és webhelye a keresőmotorokban is jobban szerepel! Ha Ön is Flask fejlesztő, akkor szerencséje van, mert a Flask-Babel nevű kiterjesztés segítségével a nemzetközivé tétel (i18n) és a lokalizáció (l10n) sosem volt még ilyen egyszerű.

Ebben az átfogó útmutatóban lépésről lépésre végigvezetjük Önt azon, hogyan hozhat létre egy teljesen többnyelvű Flask weboldalt a Flask-Babel erejét kihasználva. Kitérünk a kezdeti beállításoktól a szövegek, dátumok és számok fordításáig, valamint a SEO szempontokra is. Készüljön fel, hogy webhelyét globális szintre emelje!

Miért fontos a többnyelvűség?

Mielőtt belevágnánk a technikai részletekbe, érdemes megérteni, miért is érdemes időt és energiát fektetni a webhely lokalizációjába:

Globális elérés: Lebontja a nyelvi korlátokat, lehetővé téve, hogy termékei, szolgáltatásai vagy tartalma a világ minden tájáról elérhetővé váljon.
Fokozott felhasználói élmény (UX): Az emberek sokkal szívesebben használják az anyanyelvükön elérhető weboldalakat. Ez növeli az elkötelezettséget, csökkenti a visszafordulási arányt és javítja a konverziókat.
SEO előnyök: A keresőmotorok, mint a Google, értékelik a többnyelvű tartalmat. A helyesen konfigurált lokalizációval (pl. hreflang tagek) webhelye magasabb rangsorolást érhet el a specifikus nyelvi keresésekben, és növelheti az organikus forgalmat.
Versenyelőny: Egy többnyelvű weboldal megkülönbözteti Önt a versenytársaktól, és professzionálisabb képet ad vállalkozásáról.

A Flask-Babel alapjai: i18n és l10n

A Babel egy Python könyvtár, amely átfogó támogatást nyújt a nemzetközivé tételhez és a lokalizációhoz. A Flask-Babel pedig egy Flask kiterjesztés, amely zökkenőmentesen integrálja a Babel funkcionalitását a Flask alkalmazásokba. Ennek segítségével könnyedén kezelhetjük a szövegek fordítását, a dátumok, időpontok, számok és pénznemek lokalizációját.

Két alapvető fogalommal fogunk dolgozni:

Internacionalizáció (i18n): Ez a folyamat a webhely kódjának előkészítését jelenti a későbbi fordításokra. Lényegében „bekötözzük” azokat a részeket, amelyeket majd fordítani szeretnénk, anélkül, hogy konkrét fordításokat írnánk.
Lokalizáció (l10n): Ez a konkrét fordítások elkészítését és a regionális, kulturális sajátosságokhoz (pl. dátumformátumok, pénznemek) való igazítását jelenti.

Telepítés

A Flask-Babel telepítése rendkívül egyszerű a pip segítségével:

pip install Flask-Babel

Első lépések: Konfiguráció

Miután telepítette a Flask-Babelt, ideje inicializálni az alkalmazásában és beállítani a szükséges konfigurációs paramétereket.

Flask alkalmazás inicializálása és Babel beállítása

Kezdjük egy alap Flask alkalmazással:

from flask import Flask, request, render_template, session, redirect, url_for
from flask_babel import Babel, _, lazy_gettext

app = Flask(__name__)
app.config['SECRET_KEY'] = 'egy_nagyon_biztonsagos_kulcs_amit_cserelj_ki' # Szükséges a session-höz

# Babel inicializálása
babel = Babel(app)

# Alapértelmezett nyelvi és időzóna beállítások
app.config['BABEL_DEFAULT_LOCALE'] = 'en'
app.config['BABEL_DEFAULT_TIMEZONE'] = 'Europe/Budapest'

# A Flask-Babelnek meg kell mondani, hogyan határozza meg a felhasználó nyelvét.
# Ez a függvény minden kérésnél meghívódik.
@babel.localeselector
def get_locale():
    # 1. Ellenőrizzük, van-e nyelvi paraméter a session-ben
    if 'lang' in session:
        return session['lang']
    
    # 2. Ellenőrizzük, van-e nyelvi paraméter az URL-ben
    # Például: /hu/index, /en/index
    # Ha URL-alapú lokalizációt használunk, akkor az útvonalainkat is frissíteni kell.
    # Ebben a példában az egyszerűség kedvéért kihagyjuk az URL-alapút,
    # és a session-re és az Accept-Language headerre fókuszálunk.
    
    # 3. Ellenőrizzük az Accept-Language HTTP headert
    # Ez az a nyelv, amit a böngésző előnyben részesít.
    return request.accept_languages.best_match(['en', 'hu', 'de'])

# Kezdőlap útvonal
@app.route('/')
def index():
    return render_template('index.html')

# Nyelvváltó útvonal
@app.route('/set_language/')
def set_language(lang):
    if lang in ['en', 'hu', 'de']: # Csak engedélyezett nyelvek
        session['lang'] = lang
    return redirect(request.referrer or url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

Ebben a kódban a @babel.localeselector dekorátorral ellátott függvény kulcsfontosságú. Ez a függvény felelős azért, hogy minden kérésnél meghatározza, milyen nyelven kell megjeleníteni a tartalmat a felhasználónak. A példában először a felhasználó munkamenetében (session) tárolt nyelvet ellenőrizzük, majd ha nincs ilyen, akkor a böngészője által küldött Accept-Language fejlécet használjuk.

Szövegek fordítása: `gettext`

A Flask-Babel központi eleme a gettext() függvény (és változatai), amellyel megjelölhetjük a fordítandó szövegrészeket. A kényelem érdekében a _() aliasát szokás használni.

Szövegek megjelölése Python kódban

Bármelyik szöveges literált, amelyet fordítani szeretnénk, a _() függvénybe kell zárni:

from flask_babel import _

message = _("Welcome to our multilingual website!")
error_message = _("An error occurred. Please try again.")

# Példa a lazy_gettext-re, ami akkor fordít, amikor ténylegesen szükség van rá
# Ez hasznos, ha a stringet modul szinten definiáljuk, nem kérés kontextusban.
APP_NAME = lazy_gettext("My Awesome App")

Szövegek megjelölése Jinja2 sablonokban

A Jinja2 sablonokban is hasonlóan használható az _():

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="{{ g.locale }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ _('Home Page') }}</title>
</head>
<body>
    <h1>{{ _('Welcome to our multilingual website!') }}</h1>
    <p>{{ _('This is a demo page for Flask-Babel.') }}</p>

    <h2>{{ _('Choose your language:') }}</h2>
    <ul>
        <li><a href="{{ url_for('set_language', lang='en') }}">English</a></li>
        <li><a href="{{ url_for('set_language', lang='hu') }}">Magyar</a></li>
        <li><a href="{{ url_for('set_language', lang='de') }}">Deutsch</a></li>
    </ul>

    <p>{{ _('Current date:') }} {{ babel.format_date(g.time) }}</p>
</body>
</html>

A g.locale a Flask global objektumában tárolja az aktuális nyelvet, amelyet a localeselector függvény határoz meg.

Fordítási fájlok generálása és kezelése

Miután megjelöltük a fordítandó szövegeket, szükségünk van eszközökre, amelyek segítenek kinyerni ezeket a szövegeket, kezelni a fordításokat, és végül lefordított formában elérhetővé tenni az alkalmazás számára. Erre a pybabel parancssori eszköz szolgál.

1. Konfigurációs fájl (`babel.cfg`)

Hozzon létre egy babel.cfg fájlt a projekt gyökerében, amely megmondja a pybabel-nek, hol keresse a fordítandó szövegeket:

# babel.cfg
[python: **.py]
[jinja2: templates/**.html]
extensions=jinja2.ext.autoescape,jinja2.ext.with_

Ez a konfiguráció azt mondja, hogy a .py fájlokban és a templates mappában lévő .html fájlokban keresse a megjelölt szövegeket.

2. Fordítható szövegek kinyerése (extract)

Futtassa ezt a parancsot a projekt gyökérmappájából. Ez létrehoz egy messages.pot (Portable Object Template) fájlt, amely tartalmazza az összes fordítandó szöveget, de még fordítások nélkül:

pybabel extract -F babel.cfg -o messages.pot .

3. Új nyelvek inicializálása (init)

Most inicializálhatjuk a fordítási fájlokat a kívánt nyelvekhez. Például magyar (hu) és német (de) nyelvre:

pybabel init -i messages.pot -d translations -l hu
pybabel init -i messages.pot -d translations -l de

Ez létrehoz egy translations mappát a projekt gyökerében, benne alkönyvtárakat (hu, de), és mindegyikben egy LC_MESSAGES/messages.po fájlt. Ezek a .po fájlok tartalmazzák a msgid (eredeti szöveg) és msgstr (lefordított szöveg) párokat, amelyeket manuálisan kell majd kitölteni.

4. Fordítások elkészítése (messages.po szerkesztése)

Nyissa meg a translations/hu/LC_MESSAGES/messages.po és translations/de/LC_MESSAGES/messages.po fájlokat egy szövegszerkesztővel (vagy egy PO szerkesztővel, mint a Poedit). Keresse meg a msgstr "" sorokat, és írja be közéjük a fordításokat. Például:

# messages.po (magyar)
msgid "Welcome to our multilingual website!"
msgstr "Üdvözöljük többnyelvű weboldalunkon!"

msgid "Home Page"
msgstr "Kezdőlap"

msgid "Choose your language:"
msgstr "Válasszon nyelvet:"

msgid "Current date:"
msgstr "Aktuális dátum:"

5. Fordítások frissítése (update)

Amikor új szövegeket ad hozzá az alkalmazásához, vagy módosítja a meglévőket, újra ki kell vonnia a szövegeket, majd frissítenie kell a .po fájlokat:

pybabel extract -F babel.cfg -o messages.pot .
pybabel update -i messages.pot -d translations

Ez a parancs hozzáadja az új szövegeket a .po fájlokhoz, és megjelöli a törölt vagy módosított szövegeket.

6. Fordítások fordítása (compile)

Miután elkészültek a fordítások a .po fájlokban, le kell fordítani őket egy bináris formátumba (.mo fájlok), amelyet az alkalmazás gyorsan tud használni futásidőben. Ezt a Flask-Babel automatikusan megteszi az inicializáláskor, de manuálisan is megteheti:

pybabel compile -d translations

Ez létrehozza a translations/hu/LC_MESSAGES/messages.mo és translations/de/LC_MESSAGES/messages.mo fájlokat.

Dátumok, időpontok, számok és pénznemek lokalizálása

A Flask-Babel nem csak a szövegek fordítására képes, hanem a regionális formátumokhoz is igazítja a dátumokat, időpontokat, számokat és pénznemeket, anélkül, hogy Önnek kézzel kellene formáznia azokat. Ezeket a funkciókat általában a Jinja2 sablonokban használjuk.

Dátumok és időpontok


<p>{{ _('Current date:') }} {{ babel.format_date(g.time) }}</p>
<p>{{ _('Current time:') }} {{ babel.format_time(g.time, format='short') }}</p>
<p>{{ _('Current datetime:') }} {{ babel.format_datetime(g.time, format='full') }}</p>
<p>{{ _('Time elapsed (in minutes):') }} {{ babel.format_timedelta(td, granularity='minute') }}</p>

A g.time-ot a Flask kérés előtti (before_request) hookban definiálhatja:

from datetime import datetime, timedelta

# ... app.py ...

@app.before_request
def before_request():
    g.time = datetime.now()
    # Példa timedelta-ra
    g.td = timedelta(minutes=42)

Számok és pénznemek


<p>{{ _('A large number:') }} {{ babel.format_number(1234567.89) }}</p>
<p>{{ _('A decimal number:') }} {{ babel.format_decimal(123.456) }}</p>
<p>{{ _('Price:') }} {{ babel.format_currency(99.99, 'EUR') }}</p>

Ezek a függvények automatikusan figyelembe veszik az aktuális nyelvi beállításokat, például a tizedesvessző vagy a tizedespont használatát, valamint a pénznemek elhelyezkedését.

SEO szempontok többnyelvű weboldalaknál

A többnyelvű weboldalak fejlesztésekor nem szabad megfeledkezni a keresőoptimalizálásról (SEO). A Google és más keresőmotorok számára egyértelművé kell tenni, hogy melyik tartalom melyik nyelvű közönségnek szól.

hreflang tagek: Ezek a HTML tagek elengedhetetlenek. Jelzik a keresőmotoroknak, hogy egy adott oldalnak van más nyelven vagy más régióban található alternatívája. Minden nyelvi verzióban meg kell jelennie, utalva önmagára és az összes többi nyelvi verzióra.

<head>
    <link rel="alternate" href="https://example.com/en/" hreflang="en" />
    <link rel="alternate" href="https://example.com/hu/" hreflang="hu" />
    <link rel="alternate" href="https://example.com/de/" hreflang="de" />
    <link rel="alternate" href="https://example.com/" hreflang="x-default" /> <!-- az alapértelmezett, ha nincs megfelelő nyelvi verzió -->
</head>

Ezeket dinamikusan generálhatja a Jinja2 sablonokban.

URL struktúra: Három fő megközelítés létezik:
- Alkönyvtárak (subdirectories): example.com/en/page, example.com/hu/page. Ez a leggyakoribb és általában a legajánlottabb módszer, mivel az összes nyelvi verzió domain erőssége ugyanazon a domainen koncentrálódik.
- Al-domainek (subdomains): en.example.com, hu.example.com. Technikai szempontból különálló webhelyeknek tekinthetők.
- Paraméterek (URL parameters): example.com/page?lang=en. Ezt a Google kevésbé javasolja, és nehezebb is lehet indexelni.
A cikkben bemutatott set_language függvény session-alapú nyelvállítást használ. Valós projektben érdemesebb az URL-be is beépíteni a nyelvi kódot, pl. egy Flask Blueprint vagy egy url_prefix segítségével.
Fordított metatartalom: Győződjön meg róla, hogy a <title> és <meta name="description"> tagek is le vannak fordítva minden nyelvre. Ezek kulcsfontosságúak a keresőmotorok számára.
Google Search Console: Használja a Google Search Console-t az összes nyelvi webhely verzióhoz. Állítsa be a nemzetközi célzást, ha egy adott régiót szeretne megcélozni.

Gyakori hibák és hasznos tippek

Ahhoz, hogy a Flask-Babel bevezetés zökkenőmentes legyen, érdemes figyelembe venni néhány tippet és elkerülni a gyakori hibákat:

Ne felejtse el lefordítani (compile)! Ez az egyik leggyakoribb hiba. A .po fájlok szerkesztése után mindig futtassa a pybabel compile -d translations parancsot, különben az alkalmazás nem fogja látni a frissítéseket.
Minden fordítandó szöveget jelöljön meg! Ne feledkezzen meg a hibaüzenetekről, a gombok szövegeiről, az alt attribútumokról, a címsorokról és a meta leírásokról sem.
Többesszám kezelése (ngettext): Ha a szöveg többesszámot tartalmaz (pl. „1 alma”, „2 alma”), használja a ngettext() függvényt, amely kezeli a nyelvtani szabályokat.
```
message = ngettext("%(num)d apple", "%(num)d apples", num=count)
```
Ezt a .po fájlokban is külön kell fordítani.
lazy_gettext használata: Ha egy stringet modul szinten definiál, és az az alkalmazás indításakor betöltődik, de a nyelv még nem ismert, használja a lazy_gettext()-et. Ez elhalasztja a fordítást addig, amíg a stringre ténylegesen szükség nincs, és addigra már a nyelv is be van állítva.
Tesztelés: Alaposan tesztelje le az összes nyelvi verziót. Győződjön meg róla, hogy minden szöveg lefordítva jelenik meg, és a dátumok/időpontok/számok is helyesen formázottak. Figyeljen a hosszabb fordításokra is, amelyek felboríthatják az elrendezést.
Fordítási platformok: Nagyobb projektek esetén érdemes lehet egy online fordítási platformot (pl. Crowdin, Transifex) használni a .po fájlok kezelésére, ahol fordítók és lektorok dolgozhatnak együtt.

Összefoglalás

A Flask-Babel egy rendkívül hatékony és rugalmas eszköz a Flask alapú többnyelvű weboldalak létrehozásához. Segítségével nemcsak a szöveges tartalmat tudja lefordítani, hanem a kulturális és regionális sajátosságokat is figyelembe tudja venni (dátumok, számok, pénznemek).

A kezdeti beállítások, a szövegek megjelölése, a fordítási fájlok kezelése a pybabel segítségével, valamint a SEO szempontok figyelembevétele mind hozzájárulnak egy professzionális, globálisan elérhető weboldal kialakításához. Ne feledje, a többnyelvűség nem csak egy „szép extra”, hanem a modern webfejlesztés kulcsfontosságú eleme, amely jelentős előnyöket biztosíthat a felhasználói elkötelezettség, az elérés és a keresőmotoros láthatóság terén.

Vágjon bele még ma, és tegye weboldalát elérhetővé a világ számára a Flask-Babel segítségével!