Un moyen simple d'ajouter plusieurs langues à votre site

Présentation

Dans le cadre de mon projet, j'ai été confronté à la tâche de rendre le site Internet actuel de l'entreprise multilingue. Plus précisément: pour créer la possibilité de traduire rapidement et facilement le site en anglais, polonais, italien, etc.

Une recherche sur Internet a montré que les options existantes pour créer un site multilingue sont extrêmement volumineuses et inefficaces. La connexion de bibliothèques tierces est souvent problématique et les conseils pour écrire votre solution sont associés à une grande quantité de travail du même type.

L'écriture d'une méthode alternative pour changer les paramètres régionaux ne m'a pris que quelques heures, et le maintien de l'unité sémantique minimise complètement les changements lors de l'ajout de nouvelles pages.

Les fichiers source de l'exemple de site avec traduction automatique peuvent être téléchargés sur github

Alternatives existantes

Lorsque la tâche vient d'apparaître en cours de développement, la première étape, bien sûr, a été d'étudier des solutions prêtes à l'emploi et des conseils sur les forums sur la façon de mettre en œuvre le plus facilement et correctement la possibilité de changer les paramètres régionaux. Les ressources Internet les plus utilisées pour créer des sites multilingues offrent les solutions suivantes:

• Création de blocs html en double avec du texte dans différentes langues, dont un seul reste actif pour l'utilisateur et les autres sont masqués (affichage: aucun).
  
  L'inconvénient évident de cette méthode est l'augmentation incroyablement rapide du code et une perte instantanée de lisibilité et de maintenabilité du code. De plus, cette solution est vulnérable aux erreurs de texte et d'évolutivité en termes d'augmentation du nombre de langues (ci-après dénommées locales).
  
• Connexion d'un service de traduction automatique tiers (tel que google translate) avec de nombreuses langues intégrées et des modifications minimes du code source de la page.
  
  Lorsque la tâche est apparue pour la première fois dans la liste des tâches, nous avons utilisé cette méthode comme la plus évidente et la plus pratique.Cependant, l'expérience de travail avec des locuteurs natifs des États-Unis et d'Israël a montré que la traduction automatique fait souvent des erreurs lors du changement des paramètres régionaux et que les utilisateurs du site réagissent très vivement à ces erreurs de traduction. En fin de compte, les partenaires stratégiques ont fortement conseillé de changer la méthode de changement des paramètres régionaux, et cette méthode a dû être abandonnée.
  
• Changer la langue en utilisant les capacités de js ou de bibliothèques / frameworks tiers tels que jQuery, basé sur la recherche et le changement direct des éléments DOM.
  
  Une caractéristique de cette approche est la recherche d'un grand nombre de sélecteurs js, dont le texte à l'intérieur doit être remplacé. Cette approche peut bien fonctionner pour les petits projets, mais avec une augmentation du nombre de pages, le nombre de fonctions de remplacement de texte augmente proportionnellement, ce qui entraîne une perte d'efficacité dans les grands projets.
  

Solution alternative

La base de l'approche que je propose, comme alternative aux méthodes existantes, n'est, curieusement, pas la base écrite par moi, le code js, qui est généralement trivial, et la conception de sélecteurs, dont le support vous permet de configurer de manière flexible et facile la traduction d'un nombre quelconque de pages dans n'importe quelle langue sans modifications de la base de code et duplication excessive des données.

En changeant les paramètres régionaux avec une approche alternative, trois acteurs principaux sont distingués:

• page html avec la règle établie pour les sélecteurs de blocs avec texte
  
• service js général, dont la tâche principale est de remplacer les éléments DOM textContet selon la règle de conception des sélecteurs
  
• Fichier JSON de paramètres régionaux contenant une structure contenant des blocs html dans toutes les langues utilisées lors du changement de paramètres régionaux
  

La conformité aux règles de conception pour les sélecteurs d'éléments mutables élimine la nécessité de modifier le code js du service de modification des paramètres régionaux, ce qui est un gros plus en termes d'évolutivité du projet.

La règle de construction des sélecteurs

La plupart des méthodes pour changer les paramètres régionaux de la page (parmi les alternatives 1.3 et partiellement 2) suggèrent que vous devez «marquer» le bloc html variable d'une manière ou d'une autre, car il est correct en changeant le champ de classe. Le même mécanisme utilise une option alternative.

La première étape de la conception des sélecteurs consiste à diviser la page source en blocs fonctionnels de niveau supérieur. Sur la page de notre société se trouvent des blocs:
Nous donnons à chaque bloc un nom conditionnel, par exemple,

• Le menu

• Carte de visite (domicile)

• Exemple d' opération de service (exemple)

• Partenaires (clients)

• Étendue du service (userfulBlock)

• Exemples de service (exemples)

• Contacts et rétroaction (contacts)

Après cela, nous divisons chaque bloc en blocs fonctionnels plus petits, comme cela se fait avec la bibliothèque React.


Nous attribuons nos noms aux zones sélectionnées et obtenons une structure du formulaire:

• menu

• accueil principal, description, boutons

• exemples de statistiques, titre, description, boutons

• boutons clients

• titre userfulBlock, userfulCards, elseBlock

• exemples de titre, de cartes

• titre des contacts , description, contacts, formulaire

Nous continuons cette procédure jusqu'à atteindre les blocs contenant le texte source.

En conséquence, nous obtenons une structure de fichier JSON locale prête à l'emploi contenant tous les textes nécessaires pour changer la langue. En outre, sur la base de cet algorithme, la règle de construction des sélecteurs est déterminée:

Chaque sélecteur commence par le mot-clé locale, puis, selon le style de tiret, les noms de tous les blocs parents sont ajoutés, y compris le bloc contenant le texte source, par exemple, l'exemple de description dans la première carte aura le sélecteur locale-example-cards-description


Un exemple du fichier json local résultant peut être vu sur github

Service de modification des paramètres régionaux

Le service de changement de paramètres régionaux est un module contenant la fonction de chargement d'un fichier de paramètres régionaux

loadLocale(defLang) 

avec le paramètre facultatif defLang - la langue définie après le chargement des paramètres régionaux (langue par défaut), ainsi que la fonction principale de modification des paramètres régionaux actuels

 changeLocale(lang) 

indiquant la langue souhaitée.

Fonction de téléchargement des paramètres régionaux

La fonction de chargement des paramètres régionaux utilise la demande de données XMLHttpRequest standard. L'utilisation de cette norme est due à la volonté de minimiser le nombre de dépendances et la facilité d'utilisation de la requête. Après avoir reçu le fichier de paramètres régionaux, une notification concernant la réception de données s'affiche dans la console et la fonction de modification des paramètres régionaux en langue par défaut est appelée si cette langue a été transmise à la fonction en tant que paramètre facultatif. Vous pouvez vous familiariser avec le code de fonction ici:

 function loadLocale(defLang) { var xhr = new XMLHttpRequest(); xhr.open("GET", 'http://localhost:3000/locale.json', true); xhr.onreadystatechange = saveLocale.bind(this); xhr.onerror = function () { console.log("no found page"); }; xhr.send(); function saveLocale() { if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { locale = JSON.parse(xhr.responseText); console.log("locale loaded"); if(defLang) changeLocale(defLang); } } } 

Fonction de changement de paramètres régionaux

Types de données

Il s'agit d'une fonction récursive dont la tâche principale est de parcourir l'objet contenant les paramètres régionaux de la page (en utilisant l'algorithme DFS). L'utilisation de la récursivité dans la construction d'une fonction vous permet de coder l'algorithme de la manière la plus simple et la plus concise possible, cependant, une profondeur de récursivité trop importante peut entraîner un débordement de pile. Les fonctionnalités permettant de contourner ce problème peuvent être trouvées sur le forum du même nom, ou en lisant les articles pertinents sur habr.com.

La fonction récursive est basée sur le traitement de 4 types de données:

• champ contenant une chaîne de texte source à ajouter à la page.
  Par exemple:
  
  

   "main": "    " 

  
  
• champ contenant un tableau de lignes de texte source utilisé pour
  page. Ce champ est nécessaire pour créer des listes dont les éléments peuvent être modifiés.
  ordre. Par exemple:
  
  

   "menu":["Home","Example","Clients","Info","Contacts"] 

  
  
• Structure de données imbriquée contenant son propre ensemble de champs nécessaires à la construction
  architecture de page. Par exemple:
  
  

    "home": { "main": "selling quest from your video", "description": "for social networks & sites", "buttons": ["try","order"] } 

  
  
• Un tableau de structures de données imbriquées, avec le même ensemble de champs utilisé. Ces
  les tableaux sont utilisés lorsque des listes de blocs de code identiques apparaissent, par exemple,
  cartes des membres de l'équipe, ou portefeuille ou tarifs pour les services fournis.
  Par exemple:
  
  

    "usefulCards": [ { "headline": "Marketers and agencies", "statistics": ["convers 26%", "retent 25%"], "button": "ORDER" }, { "headline": "Production studios and TV platforms", "statistics": ["convers 24%", "retent 33%"], "button": "ORDER" }, { "headline": "Conference creators", "statistics": ["convers 65%", "retent 15%"], "button": "ORDER" }, { "headline": "Bloggers and streamers", "statistics": ["convers 24%", "retent 33%"], "button": "ORDER" } ], 

  
  Sur un site, cela pourrait ressembler à ceci:
  
  
  Exemple de site Web

  
  
  
  

Fonctions de traitement

Le traitement du type de données source est effectué par une fonction distincte

 function getText(key, object, name,startIndex) 

Le nom du champ de saisie du champ de structure avec le texte source, l'objet local actuel contenant le texte à ajouter et le nom du sélecteur actuel requis pour rechercher l'élément DOM.

 function getText(key, object, name, startIndex) { var elementKey=0; if(startIndex) elementKey = startIndex; for ( ; elementKey < document.getElementsByClassName(name + "-" + key).length; elementKey++) if (!isNaN(elementKey)) document.getElementsByClassName(name + "-" + key)[elementKey].textContent = object[key]; } 

Le traitement d'un tableau de chaînes avec du texte source est également effectué par une fonction distincte

 function getArrayText(key, object, name,startIndex) 

La signature et le corps de cette fonction ne diffèrent pas du passé, sauf que les éléments du tableau sont affectés aux éléments DOM.

 function getArrayText(key, object, name, startIndex) { var elementKey=0; if(startIndex) elementKey = startIndex; for ( ; elementKey < document.getElementsByClassName(name + "-" + key).length; elementKey++) if (!isNaN(elementKey)) document.getElementsByClassName(name + "-" + key)[elementKey].textContent = object[key][elementKey % object[key].length]; } 

La fonction récursive principale pour remplacer le texte concerne la classification du champ de paramètres régionaux actuel dans l'un des 4 types ci-dessus et la réaction correspondante au type résultant:

 function changeText(name, object, startIndex) { for (key in object) if (Array.isArray(object[key]) && typeof object[key] != 'string' && typeof object[key][0] == 'string') getArrayText(key, object, name); else if (typeof object[key] == "object" ){ if(isNaN(key)) changeText(name + "-" + key, object[key]); else changeText(name, object[key],key); } else getText(key, object, name, startIndex); } 

Cette fonction accepte les paramètres régionaux de la langue actuelle et le sélecteur racine (dans ce cas, «paramètres régionaux»). De plus, lors de la détection d'une structure imbriquée ou d'un tableau de structures, la fonction s'appellera récursivement elle-même, modifiant les paramètres d'entrée en conséquence.

Le principal avantage de l'approche alternative est que le service décrit ci-dessus ne nécessite aucune modification fonctionnelle et est ajouté en tant que fichier js à l'aide du fichier de paramètres régionaux que vous avez créé.

Conclusion

L'essence de l'approche décrite ci-dessus est une règle fixe pour décrire les sélecteurs et créer un fichier de paramètres régionaux. Grâce à cela, il existe une occasion unique de traduire toutes les pages hors de la boîte et de réutiliser le matériel déjà traduit.

L'algorithme de construction des sélecteurs décrit ci-dessus n'est pas obligatoire et critique pour le service. Le service est flexible pour étendre et ajouter de nouvelles méthodes et algorithmes, ainsi que pour construire des noms de sélecteurs et des structures locales json. Un avantage possible serait d'enregistrer les paramètres régionaux dans le cookie du navigateur et de modifier les paramètres régionaux, en fonction de l'emplacement de l'utilisateur du service.

Les fichiers source de l'exemple de site avec traduction automatique peuvent être téléchargés sur github .