เว็บไซต์ตัวอย่างหลายภาษา

จุดเด่นสำคัญของสถาปัตยกรรม ShipLang คือ คุณเพียงแค่เขียนเว็บเพจด้วยภาษาเดียวในส่วนแบ็กเอนด์ และระบบจะทำการแปลเป็นหลายภาษาโดยอัตโนมัติ

วิธีการใช้งานนั้นง่ายมาก เพียงแค่เพิ่มแอตทริบิวต์ `data-i18n="ชื่อคีย์การแปล"` ลงในองค์ประกอบที่ต้องการแปล ระบบจะทำการแปลองค์ประกอบที่ทำเครื่องหมายด้วย `data-i18n` โดยอัตโนมัติ

หลักการแปลข้อความด้วย JavaScript: เมื่อ JavaScript ส่งข้อความ "[Hello]" ไปยังหน้าเว็บ ระบบจะอ่านผลลัพธ์การแปลเป็น "[data-i18n="Hello"]"

คุณต้องเปลี่ยนภาษาของหน้านี้เป็นภาษาอังกฤษเพื่อดูเนื้อหา ด้านล่างนี้คือตัวอย่างการใช้งานในสถานการณ์ทั่วไปต่างๆ โดยแต่ละตัวอย่างจะมีโค้ดและตัวอย่างแสดงผลลัพธ์ที่เกิดขึ้นจริง

ส่วนประกอบกล่องโค้ด HTML 【pre】【code】 ไม่สามารถแปลได้ด้วยแท็ก data-i18n การเพิ่ม i18n ให้กับส่วนประกอบเหล่านี้อาจทำให้เกิดข้อผิดพลาด

วิธีการใช้งานหลายภาษาแสดงไว้ในที่เดียว

1.只要在标签加入[data-i18n]即代表该内容需要被翻译，示例：

<p data-i18n="welcome">欢迎使用</p>

ยินดีต้อนรับ!

2. 当[data-i18n]的值相同，系统也会容错处理，不会翻译为相同文本

<p data-i18n="k">你好</p><p data-i18n="k">不错</p>

สวัสดี

ดี

3. 无[data-i18n]标记文本（代表不翻译）

<span>这段文本没有data-i18n标记，不会被翻译</span>
这段文本没有data-i18n标记，不会被翻译

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>

นี่คือข้อความที่ซ้อนอยู่ภายใน 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>';}?>
  • ข้อมูลรายการ 1
  • เวแชท: 5833487
  • ข้อมูลรายการ 2

9. Meta标签SEO

<title data-i18n="title">标题</title><meta data-i18n="keywords" name="keywords" content="关键词"><meta data-i18n="description" name="description" content="描述">

เมตาแท็กจะถูกตั้งค่าไว้ในส่วนหัวของหน้าเว็บและใช้ในการแสดงผลการจัดอันดับในเครื่องมือค้นหา SEO

นี่คือเนื้อหาของป๊อปอัพ JavaScript หลักการสำคัญคือการใช้แท็กที่ซ่อนอยู่ โดยสมมติว่ามีข้อความที่มีแท็กที่ซ่อนอยู่ในข้อความที่จะแปล ระบบจะอ่านข้อความที่แปลแล้วพร้อมกับแท็กที่ซ่อนอยู่เหล่านั้น จึงทำให้การแปลเสร็จสมบูรณ์