Translater.JS が HTML コメントを巧みに使用してページを翻訳する方法の例を共有します。

JSDigs をフォローすると、時々何かできることがあります。

HTMLコメントを利用したページ翻訳ソリューションです。静的ページの数が少ない場合、この解決策はより簡単に見えます。依存関係はなく、圧縮されるだけです (~2kb)。

IMG テキスト切り替えをサポート

URL 読み込み言語をサポート

ローカル キャッシュ選択をサポート

モジュールとしてインストール

$ npm install translater.js

従来型use Method

<div>     这里是中文        <!--{jp}ここは日本語です-->     <!--{en}Here is English--></div><script src="../dist/translater.min.js" type="text/javascript"></script><script type="text/javascript">var tran = new Translater({  lang:"jp"});</script>

ハイパーリンク経由で言語を切り替える方法

<a href="javascript:tran.setLang(&#39;default&#39;);">English</a><a href="javascript:tran.setLang(&#39;jp&#39;);">日本語</a><a href="javascript:tran.setLang(&#39;cn&#39;);">中文</a>

URL パラメータを通じて言語を設定できます

http://.../test.html?lang=jp

テキスト翻訳

<div>     这里是中文        <!--{jp}ここは日本語です-->     <!--{en}Here is English--></div>

画像切り替え

<img src="/static/imghwm/default1.png"  data-src="../img/imgae.jpg"  class="lazy"  alt="images"    data-lang-cn="../img/imgae_cn.jpg"  data-lang-jp="../img/imgae_jp.jpg" />

を追加しました