Mẫu trang web đa ngôn ngữ
Điểm nổi bật của kiến trúc ShipLang là bạn chỉ cần viết các trang web bằng một ngôn ngữ duy nhất ở phần quản trị, và hệ thống sẽ tự động dịch chúng sang nhiều ngôn ngữ khác nhau.
Cách sử dụng rất đơn giản: chỉ cần thêm thuộc tính `data-i18n="tên khóa dịch"` vào phần tử cần dịch. Hệ thống sẽ tự động dịch các phần tử được đánh dấu bằng `data-i18n`.
Nguyên tắc dịch văn bản của JavaScript: Khi JavaScript gửi văn bản "[Hello]" đến trang, nó sẽ đọc kết quả dịch là "[data-i18n="Hello"]".
Bạn cần chuyển trang này sang tiếng Anh để xem nội dung. Dưới đây là các ví dụ về cách sử dụng trong nhiều tình huống phổ biến, mỗi ví dụ đều có mã và minh họa hiệu quả thực tế.
Các thành phần hộp mã HTML 【pre】【code】 không thể được dịch bằng thẻ data-i18n. Việc thêm i18n vào các thành phần này có thể dẫn đến lỗi.
Các phương pháp sử dụng đa ngôn ngữ được hiển thị ở cùng một nơi.
1.只要在标签加入[data-i18n]即代表该内容需要被翻译，示例：
<p data-i18n="welcome">欢迎使用</p>
Chào mừng!
2. 当[data-i18n]的值相同，系统也会容错处理，不会翻译为相同文本
<p data-i18n="k">你好</p><p data-i18n="k">不错</p>
Xin chào
Tốt
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>
Đây là đoạn văn bản nằm trong một thẻ 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>';}?>
- Liệt kê dữ liệu 1
- WeChat: 5833487
- Danh sách dữ liệu 2
9. Meta标签SEO
<title data-i18n="title">标题</title><meta data-i18n="keywords" name="keywords" content="关键词"><meta data-i18n="description" name="description" content="描述">
Thẻ meta được thiết lập trong phần head của trang và được sử dụng để cải thiện thứ hạng tìm kiếm trên công cụ tìm kiếm SEO.