Gwefan Enghraifft Amlieithog
Prif nodwedd pensaernïaeth ShipLang yw mai dim ond mewn un iaith y mae angen i chi ysgrifennu tudalennau gwe yn y backend, a bydd y system yn eu cyfieithu'n awtomatig i sawl iaith.
Mae'r defnydd yn syml iawn: ychwanegwch y priodoledd `data-i18n="enw allwedd cyfieithu"` at yr elfen y mae angen ei chyfieithu. Bydd y system yn cyfieithu elfennau sydd wedi'u marcio â `data-i18n` yn awtomatig.
Egwyddor cyfieithu testun JavaScript: Pan fydd JavaScript yn anfon y testun "[Helo]" i'r dudalen, mae'n darllen canlyniad y cyfieithu "[data-i18n="Helo"]".
Mae angen i chi newid y dudalen hon i'r Saesneg i'w gweld. Isod mae enghreifftiau o ddefnydd mewn gwahanol senarios cyffredin, pob un â chod ac arddangosiad o'r effaith wirioneddol.
Ni ellir cyfieithu cydrannau'r blwch cod HTML 【pre】【code】 gan y tag data-i18n. Gall ychwanegu i18n at y cydrannau hyn arwain at wallau.
Mae dulliau defnydd amlieithog yn cael eu harddangos mewn un lle.
1.只要在标签加入[data-i18n]即代表该内容需要被翻译,示例:
<p data-i18n="welcome">欢迎使用</p>
Croeso!
2. 当[data-i18n]的值相同,系统也会容错处理,不会翻译为相同文本
<p data-i18n="k">你好</p><p data-i18n="k">不错</p>
Helo
da
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>
Dyma destun wedi'i nythu o fewn 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>';}?>
- Rhestru data 1
- WeChat: 5833487
- Rhestru data 2
9. Meta标签SEO
<title data-i18n="title">标题</title><meta data-i18n="keywords" name="keywords" content="关键词"><meta data-i18n="description" name="description" content="描述">
Mae tagiau meta wedi'u gosod ym mhennawd y dudalen ac fe'u defnyddir i rendro safleoedd peiriannau chwilio SEO.