多言語対応サンプルウェブサイト

ShipLangアーキテクチャの重要な特徴は、バックエンドでウェブページを1つの言語で記述するだけで、システムが自動的に複数の言語に翻訳してくれる点です。

使い方は非常に簡単です。翻訳対象の要素に属性`data-i18n="翻訳キー名"`を追加するだけです。システムは`data-i18n`でマークされた要素を自動的に翻訳します。

JavaScriptのテキスト翻訳の原理：JavaScriptがテキスト「[Hello]」をページに送信すると、「[data-i18n="Hello"]」の翻訳結果を読み取ります。

このページを表示するには、言語を英語に切り替える必要があります。以下に、さまざまな一般的なシナリオにおける使用例を示します。それぞれにコードと実際の効果のデモンストレーションが含まれています。

HTMLコードボックスのコンポーネント【pre】【code】は、data-i18nタグでは翻訳できません。これらのコンポーネントにi18nを追加すると、エラーが発生する可能性があります。

多言語での使用方法が1か所に表示されます。

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
WeChat: 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（検索エンジン最適化）ランキングに利用されます。