Multilingual Sample Website
The key feature of the ShipLang architecture is that you only need to write web pages in one language in the backend, and the system will automatically translate them into multiple languages.
The usage is very simple: just add the attribute `data-i18n="translation key name"` to the element that needs to be translated. The system will automatically translate elements marked with `data-i18n`.
JavaScript text translation principle: When JavaScript sends the text "[Hello]" to the page, it reads the translation result of "[data-i18n="Hello"]".
You need to switch this page to English to view it. Below are examples of usage in various common scenarios, each with code and a demonstration of the actual effect.
The HTML code box components 【pre】【code】 cannot be translated by the data-i18n tag. Adding i18n to these components may result in errors.
Multilingual usage methods are displayed in one place.
1.只要在标签加入[data-i18n]即代表该内容需要被翻译，示例：
<p data-i18n="welcome">欢迎使用</p>
Welcome!
2. 当[data-i18n]的值相同，系统也会容错处理，不会翻译为相同文本
<p data-i18n="k">你好</p><p data-i18n="k">不错</p>
Hello
good
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>
This is text nested within a 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>';}?>
- List data 1
- WeChat: 5833487
- List data 2
9. Meta标签SEO
<title data-i18n="title">标题</title><meta data-i18n="keywords" name="keywords" content="关键词"><meta data-i18n="description" name="description" content="描述">
Meta tags are set in the page head and are used to render SEO search engine rankings.