Site Web multilingue d'exemple
La principale caractéristique de l'architecture ShipLang est qu'il suffit d'écrire les pages web dans une seule langue côté serveur, le système se chargeant de les traduire automatiquement en plusieurs langues.
Son utilisation est très simple : il suffit d’ajouter l’attribut `data-i18n="nom de la clé de traduction"` à l’élément à traduire. Le système traduira automatiquement les éléments marqués avec `data-i18n`.
Principe de traduction de texte JavaScript : lorsque JavaScript envoie le texte « [Hello] » à la page, il lit le résultat de la traduction de « [data-i18n="Hello"] ».
Vous devez passer cette page en anglais pour la consulter. Vous trouverez ci-dessous des exemples d'utilisation dans divers scénarios courants, chacun accompagné de code et d'une démonstration de son effet.
Les composants de code HTML 【pre】【code】 ne peuvent pas être traduits par la balise data-i18n. L'ajout de l'internationalisation (i18n) à ces composants peut entraîner des erreurs.
Les méthodes d'utilisation multilingues sont affichées au même endroit.
1.只要在标签加入[data-i18n]即代表该内容需要被翻译，示例：
<p data-i18n="welcome">欢迎使用</p>
Accueillir!
2. 当[data-i18n]的值相同，系统也会容错处理，不会翻译为相同文本
<p data-i18n="k">你好</p><p data-i18n="k">不错</p>
Bonjour
bien
3. 无[data-i18n]标记文本（代表不翻译）
<span>这段文本没有data-i18n标记，不会被翻译</span>
4. 输入框Placeholder翻译兼容
<input data-i18n="email_placeholder" placeholder="请输入邮箱">
5. 按钮文本，点击按钮通过js修改文本翻译
<button data-i18n="btn_submit">修改文本</button>
主要原理是基于隐藏标签，假设隐藏标签的文本存在要翻译的文本就会读取隐藏标签的翻译之后的文本，实现翻译
6. 嵌套元素
<div><p data-i18n="nested">这是嵌套在div中的文本</p></div>
Ceci est du texte imbriqué dans une balise div.
7. JavaScript动态内容,代码中是中文，当用户切换英语也会显示英语
document.getElementById('btn').addEventListener('click',function(){alert('这是JavaScript弹窗内容');});
8. PHP动态列表
<?php foreach ($qx_list as $i) {echo '<li data-i18n="item">' . $i['text'] . '</li>';}?>
- Liste des données 1
- WeChat : 5833487
- Liste de données 2
9. Meta标签SEO
<title data-i18n="title">标题</title><meta data-i18n="keywords" name="keywords" content="关键词"><meta data-i18n="description" name="description" content="描述">
Les balises méta sont définies dans l'en-tête de la page et servent à déterminer le classement dans les moteurs de recherche (SEO).