다국어 샘플 웹사이트
ShipLang 아키텍처의 핵심 특징은 백엔드에서 웹 페이지를 한 가지 언어로만 작성하면 시스템이 자동으로 여러 언어로 번역해 준다는 점입니다.
사용법은 매우 간단합니다. 번역이 필요한 요소에 `data-i18n="번역 키 이름"` 속성을 추가하기만 하면 됩니다. 시스템은 `data-i18n`으로 표시된 요소를 자동으로 번역합니다.
자바스크립트 텍스트 번역 원리: 자바스크립트가 페이지에 "[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(검색 엔진 최적화) 검색 순위를 결정하는 데 사용됩니다.