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

PHP中文网
リリース: 2017-06-05 09:35:37
オリジナル
2647 人が閲覧しました

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 alt="images"  src="../img/imgae.jpg"  data-lang-cn="../img/imgae_cn.jpg"  data-lang-jp="../img/imgae_jp.jpg" />
ログイン後にコピー
を追加しました
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート