Többnyelvű weboldal, de hogyan?

Többnyelvű weboldal, de hogyan?

2020-ban (lassan 2021-ben), szinte már elképzelhetetlen, hogy egy weboldalt ne úgy fejlesszünk le, hogy többnyelvű legyen. Az információ ilyen mértékű terjedéséhez, elengedhetetlen, hogy több nyelven szolgáltassunk információt.

Azonban, fejlesztői szempontból ennek a megvalósítása többféle módon is elkészülhet.

WordPress

Ha esetleg WordPress-t használunk, érdemes elolvasni a többnyelvű weboldalakról szóló hivatalos leírást, amiben több, különböző megoldást is találhatunk. Eldönthetjük például, hogy több bejegyzést szeretnénk létrehozni a különböző nyelvekhez (külön bejegyzés magyarul, külön bejegyzés angolul stb.) vagy egy bejegyzésben tároljuk az összes nyelvesített változatot. Megoldást nyújthatnak még a külső fordító szolgáltatások (pl. Google Cloud Translation) használata is, ami képes szinte bármilyen nyelvre lefordítani az adott oldalt.

Illetve, "biztos van rá egy plugin".

Egyedi fejlesztés

Egyedi fejlesztés esetében viszont muszáj elvégezni a „favágó” munkát. Azaz, minden a felhasználó szeme elé táruló tartalmat le kell fordítani. Tehát plusz beviteli mezőket kell létrehozni az admin felületen, minden nyelv számára, hogy a szerző lefordíthassa. Érdemes egy „languages” táblát fenntartani erre az eshetőségre.

A frontenden pedig készítenünk kell egy nyelvválasztót, amely alapértelmezetten betölti az oldalt egy nyelven, a felhasználó pedig kiválaszthatja a többi nyelvet. Példaként vegyük, hogy az oldalunk magyar nyelven tölti be a tartalmakat, és választható még az angol nyelv is. Ha nincs beállítva nyelv, akkor a magyar nyelvet rakjuk a session-be és az url-be, de amint választanak egy nyelvet, a session-be letároljuk az új nyelvet, az applikációnkat átállítjuk erre a nyelvre (Laravel esetében app()->setLocale() segítségével) és a felhasználót átirányítjuk a nyelv megfelelő url-jére. A session alapján a lekérdezéseket úgy kell megírnunk, hogy az eltárolt nyelven töltse be a tartalmakat.

Route

El is érkeztünk a legnehezebb ponthoz, a route-oláshoz. Hogyan oldjuk meg a dinamikus routeolást, úgy, hogy a slug is le van fordítva? A nyelv előjelét subdomainként használjuk, vagy url paraméterként?

Nos, a nagy könyvben úgy van megírva, hogy ne subdomainként használjuk (SEO szempontból). Ez több szempontból is hasznos. Az egyik, hogy a Google jobban szereti, a másik pedig, hogy megkönnyíti a route-olást és nem kell wildcard DNS-t beállítani. Egy Laravel routeren keresztül mutatom be, hogy mi hogyan szoktuk beállítani a többnyelvű route-okat:

Route::group('{lang}', function() {
    Route::resource('/blog/{slug}', 'Frontend\BlogController')->only(['show']);
});

Ebben a három sor kódban azt látjuk, hogy dinamikusan létrehoztunk minden nyelvnek egy route csoportot, és a blog bejegyzéseknek egy részletes nézet route-ot, ahol a slug szintén dinamikus.

Ez így néz ki magyarul: https://example.com/hu/blog/tobbnyelvu-oldal-de-hogyan
És így angolul: https://example.com/en/blog/multilingual-website-but-how

Ha ezt a módszert használjuk, akkor a Controllerekben mindig elérhető lesz a $lang változó, ezáltal mindig tudjuk, hogy milyen nyelven kell betöltenünk a tartalmakat. Ha esetleg nincs olyan nyelvünk, amilyenen a felhasználó szeretné, átirányíthatjuk az alapértelmezett oldalra, vagy megmutathatjuk neki a remek 404-es oldalunkat.

Statikus tartalmak

Ha túl vagyunk a route-oláson, és a dinamikus tartalmak betöltésén, akkor nem maradt hátra más, mint a statikus tartalmak. Ezzel viszonylag egyszerű dolgunk lesz. A legfontosabb, hogy ne égessük be a statikus tartalmakat az oldalba, hanem használjunk translate függvényeket, amelyek egy kulcs alapján betöltik a kívánt fordítást. Laravel-ben pl.: {{ __('static.content.key') }}

Ez a függvény kezdésképpen megnézi, hogy az alkalmazás milyen nyelvre van beállítva, az alapján lang mappában megkeresi a megfelelő nyelvű mappát, és a stringként megadott kulcsokkal megkeresi az asszociatív tömbből a megfelelő tartalmat. Ugyanígy használható JSON fájlokkal is.

Ehhez kapcsolódik egy hasznos csomag, amely készít egy felületet ezeknek a translation fájloknak: https://github.com/barryvdh/laravel-translation-manager

Amennyiben frontend keretrendszert használunk, érdemes szemügyre vennünk az i18n csomagokat, amelyek segítenek lefordítani a statikus tartalmakat.

Ha segítségre lenne szükséged az oldalad többnyelvűvé alakításához, keress minket bizalommal a contact@webcapital.dev címen, vagy a Facebookon.