Meertalige voorbeeldwebwerf
Die belangrikste kenmerk van die ShipLang-argitektuur is dat jy slegs webblaaie in een taal in die backend hoef te skryf, en die stelsel sal dit outomaties in verskeie tale vertaal.
Die gebruik is baie eenvoudig: voeg net die kenmerk `data-i18n="vertaalsleutelnaam"` by die element wat vertaal moet word. Die stelsel sal outomaties elemente wat met `data-i18n` gemerk is, vertaal.
JavaScript-teksvertalingsbeginsel: Wanneer JavaScript die teks "[Hallo]" na die bladsy stuur, lees dit die vertaalresultaat van "[data-i18n="Hallo"]".
Jy moet hierdie bladsy na Engels oorskakel om dit te sien. Hieronder is voorbeelde van gebruik in verskeie algemene scenario's, elk met kode en 'n demonstrasie van die werklike effek.
Die HTML-kodebokskomponente 【voor】【kode】 kan nie deur die data-i18n-etiket vertaal word nie. Die byvoeging van i18n by hierdie komponente kan foute tot gevolg hê.
Meertalige gebruiksmetodes word op een plek vertoon.
1.只要在标签加入[data-i18n]即代表该内容需要被翻译，示例：
<p data-i18n="welcome">欢迎使用</p>
Welkom!
2. 当[data-i18n]的值相同，系统也会容错处理，不会翻译为相同文本
<p data-i18n="k">你好</p><p data-i18n="k">不错</p>
Hallo
goed
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>
Hierdie is teks wat binne 'n div geneste is.
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>';}?>
- Lys data 1
- WeChat: 5833487
- Lys 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-etikette word in die bladsykop geplaas en word gebruik om SEO-soekenjinranglys te lewer.