4

Webページを翻訳するにはどうすればよいですか？実際には、どのテクノロジーまたはどのスクリプト（必要な場合）を使用する必要がありますか？情報について; 私はすべて翻訳されたテキストを持っています。しかし、私は他の言語のクローンサイトのようなものを作りたくありません。jqueryを含むjavascriptだけを使用しました。

4

6 に答える 6

10

JavaScriptを使用するだけです...

<script type="text/javascript">

// JSON-formatted, potentially read from a database
var article = {
    title: {
      en_US: "Article Title",
      fr_FR: "Titre de l\'Article"
    },
    content: {
      en_US: "Content of the Article.",
      fr_FR: "Contenu de l\'Article."
    }
}

// simple function to write the info to the page
function get_i18n(item, lang) {
    document.write(article[item][lang]);
}
</script>

<!-- English Version -->
<div class="story">
   <h1 class="title"><script>get_i18n('title','en_US');</script></h1>
   <p class="content"><script>get_i18n('content','en_US');</script></p>
</div>

<!-- French Version -->
<div class="story">
   <h1 class="title"><script>get_i18n('title','fr_FR');</script></h1>
   <p class="content"><script>get_i18n('content','fr_FR');</script></p>
</div>

注意：これはあまり適切な解決策ではありません。もっときれいな方法があると確信しています...

于 2011-01-17T22:09:21.210 に答える
2

CSS属性セレクターの使用：

<style type="text/css">
    // hides all French blocks by default
    div.story[lang="fr"] {
        display: none;
    }
    // hide all English blocks
    body[lang="fr"] div.story[lang="en"] {
        display: none;
    }
    // show all French blocks
    body[lang="fr"] div.story[lang="fr"] {
        display: block;
    }
</style>

<!-- Change this to the language of the blocks you want to display -->
<body lang="fr">

    <!-- English block, shown by default -->
    <div class="story" lang="en">
       <h1 class="title">Article Title</h1>
       <p class="content">Content of the Article.</p>
    </div>

    <!-- French block, hidden by default -->
    <div class="story" lang="fr">
       <h1 class="title">Titre de l'Article</h1>
       <p class="content">Contenu de l'Article.</p>
    </div>

</body>

この設定では、タグlang="fr"に設定されていない限り、デフォルトですべての英語のブロックが表示されます。<body>

もちろん、タグのlang属性を変更する方法はまだ必要です...<body>

于 2011-01-17T22:41:53.987 に答える
2

あなたがそれを呼ぶようにあなたはすでに「翻訳されたテキスト」を持っているので、あなたは実際には「多言語のウェブサイトを構築する方法」を意味します。

1つの方法は、テキストをコンテナ内に配置し、クライアント側のコードを使用して、コンテナの内容を選択した言語に応じた適切なテキストに変更し、各言語に翻訳されたテキストを含む配列を作成することです。

サーバーサイド言語を自由に使えるのであれば、それははるかに良いでしょう-あなたはそのようなものを持っていますか？

于 2011-01-17T20:48:38.383 に答える
0

JavaScriptがサイトを翻訳するのに時間がかかりすぎるでしょう。HTMLファイルを翻訳し、両方のバージョンをサーバーに保持できるソフトウェアを見つけてください。私はこれがあなたが望むものではないことを知っています、しかしそれは今のところ唯一の実用的な方法です。

于 2011-01-17T20:42:54.907 に答える
0

Cloud Translationを使用できます。これは、Angry Monkey Cloudの無料のオープンソースプロジェクトです：https ：//github.com/angrymonkeycloud/CloudTranslation 。

最初にjQueryへの参照を追加し、次にCloudTranslationJavaScriptファイルへの参照を追加する必要があります。

<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>

そして、次のようにHTMLヘッド内に構成を追加します。

<script type="application/json" id="CloudTranslationConfig">
    {
  "Settings": {
    "DefaultLanguage": "en",
    "TranslatorProvider": "Azure", // not required if you filled in all translations
    "TranslatorProviderKey": "{Your Microsoft Azure Translator Key}", // not required if above is empty
    "UrlLanguageLocation": "Subdirectory"
  },
  "Languages": [
    {
      "Code": "en",
      "DisplayName": "English"
    },
    {
      "Code": "ar",
      "DisplayName": "Arabic",
      "Direction": "rtl"
    }
  ],
 "Translations": [
    {
      "en": "Home",
      "ar": "الصفحة الرئيسية"
    },
  }
</script>

そして、クラス「CloudTranslationSelect」を持つ独自のカスタム選択（ドロップダウン）を追加します（選択のスタイルを好きなようにカスタマイズできます）。

詳細については、https：//www.angrymonkeycloud.com/translationをご覧ください。

于 2019-08-08T13:35:41.670 に答える
0

最初の答えを少し改善しました。関数を使用してlocalStorageに言語値を設定し、そこから言語を取得して、グローバル変数lgnを使用してHTMLを動的に変更するだけです。

<script type="text/javascript">

  // JSON-formatted, potentially read from a database
  var article = {
      title: {
        en_US: "Article Title",
        fr_FR: "Titre de l\'Article"
      },
      content: {
        en_US: "Content of the Article.",
        fr_FR: "Contenu de l\'Article."
      }
  }
  
  // simple function to write the info to the page
  function get_i18n(item, lang) {
      document.write(article[item][lang]);
  }
 

  var lng;  //global variable

  if (localStorage.getItem('lng') == null) {     //if I have no language saved just load the English language
    lng  = 'en_US';
    localStorage.setItem('lng', lng);  
  }

  if(localStorage.getItem("lng") == 'en_US'){   
   lng  = 'en_US';
  }

  if(localStorage.getItem("lng") == 'fr_FR'){   
   lng  = 'fr_FR';
  }

  console.log(lng);

  function get_i18n(item, lng) {
    document.write(article[item][lng]);
    }

</script>


<div class="story">
    <h1 class="title"><script>get_i18n('title',lng);</script></h1>
    <p class="content"><script>get_i18n('content',lng);</script></p>
 </div>
于 2021-07-26T09:50:38.260 に答える