Halimbawang Website na May Iba't Ibang Wika
Ang pangunahing katangian ng arkitektura ng ShipLang ay kailangan mo lamang magsulat ng mga web page sa isang wika sa backend, at awtomatikong isasalin ng system ang mga ito sa maraming wika.
Napakasimple lang ng paggamit: idagdag lang ang katangiang `data-i18n="pangalan ng key ng pagsasalin"` sa elementong kailangang isalin. Awtomatikong isasalin ng sistema ang mga elementong may markang `data-i18n`.
Prinsipyo ng pagsasalin ng teksto ng JavaScript: Kapag ipinadala ng JavaScript ang tekstong "[Hello]" sa pahina, binabasa nito ang resulta ng pagsasalin na "[data-i18n="Hello"]".
Kailangan mong ilipat ang pahinang ito sa Ingles upang makita ito. Nasa ibaba ang mga halimbawa ng paggamit sa iba't ibang karaniwang sitwasyon, bawat isa ay may kasamang code at isang demonstrasyon ng aktwal na epekto.
Ang mga bahagi ng HTML code box na 【pre】【code】 ay hindi maaaring isalin ng data-i18n tag. Ang pagdaragdag ng i18n sa mga bahaging ito ay maaaring magresulta sa mga error.
Ang mga pamamaraan ng paggamit sa maraming wika ay ipinapakita sa isang lugar.
1.只要在标签加入[data-i18n]即代表该内容需要被翻译,示例:
<p data-i18n="welcome">欢迎使用</p>
Maligayang pagdating!
2. 当[data-i18n]的值相同,系统也会容错处理,不会翻译为相同文本
<p data-i18n="k">你好</p><p data-i18n="k">不错</p>
Kumusta
mabuti
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>
Ito ay tekstong nakapaloob sa loob ng isang 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>';}?>
- Ilista ang datos 1
- WeChat: 5833487
- Ilista ang datos 2
9. Meta标签SEO
<title data-i18n="title">标题</title><meta data-i18n="keywords" name="keywords" content="关键词"><meta data-i18n="description" name="description" content="描述">
Ang mga meta tag ay nakatakda sa head ng pahina at ginagamit upang ipakita ang mga ranggo sa search engine ng SEO.