Jak mít web přeložený do několika jazyků

Webové stránky se vyvíjejí den za dnem, protože komunikace světa se stává mnohem bližší. Pokaždé, když potřebujeme, aby náš vývoj byl použit nejen na místním trhu, ale také aby se rozšířil na globální trhy. Jedním z prvních způsobů, jak toho dosáhnout, je, aby naše stránky (nebo aplikace) podporovaly více jazyků. Dnes se naučíte jak na svůj web nebo aplikaci aplikovat více jazyků.

Jak bude náš webový překladač fungovat

1. Na našich stránkách budeme mít tlačítko, které nám poskytne možnost změnit náš web na různé jazyky, které jsme nakonfigurovali.

2. Překlad bude proveden pomocí JavaScriptu extrahujícího přeložené texty pomocí ajax uloženého v textových souborech, které jsme dříve nakonfigurovali pomocí značek našich webových stránek.

3. Budeme mít externí službu, která nám řekne, ze které země nás navštěvují, a vizualizuje tak ideální jazyk pro návštěvníka. Vyřídíme to podle IP návštěvníka.

Výhody našeho překladače

1. K použití překladu není nutné stránky obnovovat, protože mnoho webů to tak zvládá.

2. Máme pouze jednu verzi naší fronty, není nutné mít dva nebo více html pro zpracování textů v různých jazycích.

3. Pokud později budeme chtít přidat další jazyky, můžeme jej velmi snadno nakonfigurovat.

4. Super snadné použití pro weby, které jsme již vytvořili a které chtějí umístit vícejazyčně.

PoznámkaAbychom tomuto tutoriálu jasně porozuměli, je vhodné mít předchozí znalosti HTML, CSS, Javascriptu (zejména jQuery), znalost Ajaxu a trochu PHP.

1. Zahájení vývoje

 Můj vícejazyčný web Angličtina Načítání…
Ahoj světe

 .loading-lang {opacity: 0; } .loading-lang.show {opacity: 1; } 

Soubor main.js zatím zůstává prázdný. Můžeme testovat z námi preferovaného lokálního webového serveru. Je nutné použít webový server, protože později začneme zadávat požadavky ajax.

2. Vytváření překladových souborů

Obsah souboru
es.txttitulo-web => Můj vícejazyčný web
Vítejte => Vítejte na mých stránkách
ahoj => ahoj světe
en.txttitulo-web => Můj vícejazyčný web
Vítejte => Vítejte na mých stránkách
ahoj => Ahoj světe

Trochu vysvětlím o těchto souborech jejich strukturu. Každá fráze, kterou používáme na našich webových stránkách, musí být označena jedinečným ID, což bude způsob, jak přeložit každou frázi tam, kde je třeba ji konkrétně umístit. Například pro název webu používáme ID title-web následovaný znaky => a poté odpovídající frázi. Každá věta musí být na jiném řádku.

V souhrnu musíme dodržovat následující pravidla

1. Unikátní ID.

2. Vždy používejte za ID znaky =>

3. Oddělená tvář přeložená fráze jiným řádkem. (Odděleno novým řádkem nebo \ n).

4. Že soubory jsou ve formátu txt.

3. Vytváření Ajaxu

 $ (document) .ready (function () {var selector = '#translate'; $ (selector) .on ('click', function (e) {e.preventDefault (); startLang ($ (this));} ); var startLang = funkce (el) {var el = $ (el); var text = el.attr ('data-text'); var file = el.attr ('data-file'); file = file. split (','); text = text.split (','); var index = el.attr ('data-index'); if (index> = file.length) {index = 0;} changeName (el , text [index]); changeIndex (el, index); loadLang (soubor [index]); $ ('html'). attr ('lang', soubor [index]);}; var changeName = funkce (el, name) {$ (el) .html (name);}; var changeIndex = function (el, index) {$ (el) .attr ('data-index', ++ index);}; var loadLang = function ( lang) {var processLang = funkce (data) {var arr = data.split ('\ n'); for (var i in arr) {if (lineValid (arr [i])) {var obj = arr [i] .split ('=>'); assignText (obj [0], obj [1]);}}};; var assignText = funkce (klíč, hodnota) {$ ('[[data-lang = "' + klíč + ' "] '). each (function () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, hodnota); } else {$ (this) .html (hodnota); }}); }; var lineValid = funkce (řádek) {return (line.trim (). length> 0); }; $ ('. loading-lang'). addClass ('show'); $ .ajax ({url: 'lang /' + lang + '. txt', error: function () {alert ('No translation loaded');}, success: function (data) {$ ('. loading-lang ') .removeClass (' show '); processLang (data);}}); }; }); 

Musíme také upravit náš html:

 Můj vícejazyčný web Angličtina Načítání… 
Ahoj světe

Díky tomu můžeme otestovat, že se naše stránky již překládají.

Pojďme si trochu vysvětlit, co jsme udělali v našem javascriptovém souboru a co jsme aktualizovali v našem html.

Proces prováděný v souboru javascript je pomocí značky, která funguje jako tlačítko překladu, umístíme událost tak, aby měla na starosti vytvoření požadavku ajax extrahujícího soubor jazyka, který budeme používat v okamžik.

V našem tlačítku pro překlad máme tři atributy s názvem datový soubor, datový index, datový text.

Atributy tlačítek
data-file = "is, inJe zodpovědný za používání různých jazyků, které na našich stránkách máme. Pro náš tutoriál je a je. Pokud si dobře pamatujete, naše překladové soubory se nazývají es.txt a en.txt.
data-index = "1Má pozici dalšího souboru, který má mít. 0 je bytí a 1 palec, to znamená, že je na řadě další. Tuto organizaci můžeme vidět v atributu datového souboru, představte si, že datový soubor je podobný vektoru.
data-text = "Angličtina, EspañolJe zodpovědný za vizualizaci, v jakém jazyce se naše aplikace aktuálně zobrazuje.

Úpravou, kterou jsme provedli v našem HTML kódu, bylo přidání atributu data-lang do značek, které budeme překládat, s jedinečným ID. Měli byste již vědět, že toto jedinečné ID je nakonfigurováno v souborech en.txt a es.txt.

Například

Ahoj světe

Pojďme otestovat náš překladač a uvidíme, zda to, co jsme vyvinuli, skutečně pokrývá vše, co potřebujeme, a jak složité je přidat nový jazyk.

Pojďme přidat nový jazyk. V této fázi našeho vývoje si musíme uvědomit, že musíme udělat pouze dvě věci:

1. Vytvořte náš nový jazykový soubor.

2. Přidejte nový jazyk do atributů datový soubor a datový text.

Pro naše stránky vytváříme francouzský jazyk. V adresáři lang vytvoříme náš jazykový soubor s názvem fr.txt.

Obsah Fr.txttitulo-web => Mon stránky vícejazyčné
vítejte => Bienvenue sur mon site
ahoj => zdravím vás

Aktualizujeme tlačítko našich jazyků, takže v index.html je štítek:

 Angličtina 

Perfektní! takže můžeme na naše webové stránky bez dalších komplikací přidat všechny potřebné jazyky. Udělejme druhý test. Člověka něco napadne, lze přeloženou frázi znovu použít na jeden štítek a umístit na jiný, aby nemusel opakovat stejný překlad, i když je vytištěn na různých místech? Odpověď je ANO, ukažme se na příkladu.

Pojďme použít název webu s jedinečným ID title-web, který aktuálně používáme v našem štítku, a umístíme jej do zápatí našeho webu. Je to následující:

 Můj vícejazyčný web © 

 $ .ajax ({URL: 'country.php', success: function (data) {$ (selector) .attr ('data-index', data); startLang ($ (selector))}}});