web-dev-qa-db-ja.com

Static Html Website-Bootstrap-多言語サポート

まず、私がWeb開発の初心者であることを述べたいと思います。

静的なWebサイト（小規模ホテル用）を構築するように求められ、 this responsive html5-CSS3 templateを購入しました。純粋なhtml5-css3とスライドショーなどのJavaScriptで構成され、bootstrapフレームワークを使用します。

私はすでにウェブサイトを構築していますが、今では多言語サポートを追加するように頼まれました。ブートストラップでこれを達成できますか？ CSSでもできますか？

そうでない場合、サブフォルダー（例： "website"/en/"content"）にすべての.htmlファイルのコピーがあり、ページ上部のリンクを介してユーザーをリダイレクトするか、JavaScriptを使用して決定する必要があります言語？

簡単に言うと、他の国から自分のWebサイトにアクセスして英語版のサイトを取得し、他のすべてのユーザーはデフォルトの言語を取得したいです。できるだけ早く開発して（テンプレートを購入した理由です）、できるだけ早く立ち上げて実行したいです（夏のシーズンはすでに始まっています）。私はプログラミングの合理的な背景を持っていますが、Web開発はまったく新しいです。

javascripthtml5css3twitter-bootstrap-3multilingual
29
sestus

サーバー側のプログラミング言語を使用せずに、単一のファイル内でこれを行うことができます。適切なjavascriptソリューションについては、 i18next をチェックアウトする必要があります。

純粋な[〜＃〜] css [〜＃〜]を使用してホームページを翻訳することもできます。のようなものを試してください

.en, .de, .it { display:none; } /* hide all elements with a language class */
.en:lang(en), .de:lang(de), .it:lang(it) { display:block; } /* show those elements that match their language class */

Htmlタグに適切なlang属性を設定すると（たとえば、javascriptによって）、ページを非常に簡単に翻訳できます。

<div class="en">Good morning</div>
<div class="de">Guten Morgen</div>
<div class="it">Ciao</div>
32
kekub

ブートストラップはそれとは何の関係もありません。いいえ、純粋なCSSを使用してサイトを翻訳することはできません。 HTMLソースを変更して、異なるテキストを含める必要があります。はい、すべてのHTMLファイルのコピーを作成し、その中のテキストを変更することにより、それを行うことができます。通常、HTMLテンプレートを備えたサーバー側言語を使用すると、コードの完全なコピーを保持しなくても、テキストの翻訳を動的に交換できます。ただし、これは十分な速さで立ち上げて実行できるものとは思えません。

クライアント言語の検出とサイトの適切なバージョンの提供も、ある程度のサーバー側プログラミングを必要とするものです。繰り返しますが、それはあなたが十分に早く入ることができるもののようには聞こえません。

4
deceze

Webサイトが静的で、bootstrap=ページ（Jekyllを使用）と同じソリューションを使用している場合は、Jekyllおよびgithubページを使用して、テンプレートテキストファイルにマークを付け、外部から参照できます。各言語の文字列（en.ymlやbr.ymlなど）を保持するYamlファイル内。

そのため、jekyllが静的ページを構築すると、適切なファイル、ディレクトリ、および参照が生成され、異なる言語でページをナビゲートします。これは、生成される各言語のページであるJavascriptによって実行されるべきではありません。

私はこれをウェブサイトで作成しました： https://github.com/worknenjoy/airspace-jekyll ページを生成します https://worknenjoy.github.io/airspace-jekyll/

言語選択ツールは、ブラジルのポルトガル語ページへのptアドレスにリダイレクトし、デフォルトのページは英語です。コードはオープンソースであり、そこにあります。

Gemfileで使用されているgemはjekyll-multiple-languages-pluginです（ https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin ）

この翻訳を簡単にするために必要なものすべてを作成する責任があります。

2
Alexandre Magno Teles Zimerer

CSSはスタイリングのみに使用されるため、CSSのみを使用してWebサイトを翻訳することはできません。

Cloud Translationを使用すると、非常にスムーズで簡単な翻訳ができます。AngryMonkey Cloudの無料のオープンソースプロジェクトです。 https://github.com/angrymonkeycloud/CloudTranslation 。

さらに、Bootstrapスタイルやその他のスタイルを変更してすぐに使用できるようにすることもできます。言語の方向をrtlに設定する必要があります。

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

<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", // Could be empty if you want to provide the translations manually
    "TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
    "UrlLanguageLocation": "Subdirectory"
  },
  "Languages": [
    {
      "Code": "en",
      "DisplayName": "English"
    },
    {
      "Code": "de",
      "DisplayName": "Deutsch"
    }
  ]
}
</script>

クラス「CloudTranslationSelect」を持つ独自のカスタム選択（ドロップダウン）を追加して、事前定義された言語のリストを表示します。

詳細は https://www.angrymonkeycloud.com/translation にあります

0
Elie Tebchrani

みんながすでに言っている同じことの別の例

let langs = ['en', 'fr', 'it'];
let lang = 'en';
setLangStyles(lang);

function setStyles(styles) {
  var elementId = '__lang_styles';
  var element = document.getElementById(elementId);
  if (element) {
    element.remove();
  }

  let style = document.createElement('style');
  style.id = elementId;
  style.type = 'text/css';

  if (style.styleSheet) {
    style.styleSheet.cssText = styles;
  } else {
    style.appendChild(document.createTextNode(styles));
  }
  document.getElementsByTagName('head')[0].appendChild(style);
}

function setLang(lang) {
  setLangStyles(lang);
}

function setLangStyles(lang) {
  let styles = langs
    .filter(function (l) {
      return l != lang;
    })
    .map(function (l) {
      return ':lang('+ l +') { display: none; }';
    })
    .join(' ');

  setStyles(styles);
}
<a href="#" hreflang="it" onclick="setLang('it'); return false">Italiano</a>
<a href="#" hreflang="en" onclick="setLang('en'); return false">English</a>
<a href="#" hreflang="fr" onclick="setLang('fr'); return false">French</a>
<p lang='it'>Ciao a tutti!</p>
<p lang='en'>Hi everyone!</p>
<p lang='fr'>Bon Baguette!</p>
0
Michael Czolko