web-dev-qa-db-de.com

Statische HTML-Website - Bootstrap - Unterstützung mehrerer Sprachen

Zunächst möchte ich sagen, dass ich Neuling in der Webentwicklung bin.

Ich wurde gebeten, eine statische Website (für ein kleines Hotel) zu erstellen, und ich kaufte this responsive html5 - CSS3 - Vorlage. Es besteht aus reinem html5 - css3 und etwas JavaScript für Diashows usw. und verwendet das Bootstrap-Framework.

Ich habe die Website bereits erstellt, und nun wurde ich gebeten, die Unterstützung für mehrere Sprachen hinzuzufügen. Kann ich das über Bootstrap erreichen? Kann man das überhaupt mit CSS machen? 

Wenn nicht, sollte ich eine Kopie aller .html-Dateien in einem Unterordner haben (z. B. "website"/de/"content") und den Benutzer über einen Link oben auf der Seite weiterleiten oder sollte ich zur Entscheidung JavaScript verwenden die Sprache?

In Kürze möchte ich, dass ein Benutzer, der meine Website aus einem anderen Land besucht, die englische Version der Website erhält, während alle anderen die Standardsprache erhalten. Ich möchte, dass die Entwicklung so schnell wie möglich (deshalb habe ich eine Vorlage gekauft) so schnell wie möglich laufen (Sommersaison hat bereits begonnen). Ich habe einen vernünftigen Hintergrund in der Programmierung, bin aber völlig neu in der Webentwicklung.

24
sestus

Sie können dies in einer einzigen Datei tun, ohne serverseitige Programmiersprachen zu verwenden. Sie sollten mit i18next nach einer geeigneten javascript-Lösung suchen. 

Sie können auch pure CSS verwenden, um eine Homepage zu übersetzen. Versuchen Sie etwas wie 

.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 */

Wenn Sie für Ihr HTML-Tag ein geeignetes lang-Attribut festlegen (z. B. durch Javascript), können Sie Ihre Seite sehr einfach übersetzen:

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

Bootstrap hat damit nichts zu tun. Nein, Sie können eine Site nicht mit reinem CSS übersetzen. Sie müssen den HTML-Quelltext so ändern, dass er anderen Text enthält. Ja, Sie können dies tun, indem Sie eine Kopie aller HTML-Dateien erstellen und den darin enthaltenen Text ändern. Normalerweise haben Sie eine serverseitige Sprache mit HTML-Vorlagen, mit der Sie Übersetzungen dynamisch in Text eintauschen können, ohne dass Sie eine vollständige Kopie des Codes benötigen. Es klingt jedoch nicht so, als könnten Sie schnell genug loslegen.

Die Erkennung der Client-Sprache und das Bereitstellen einer geeigneten Version der Site erfordert ebenfalls einige serverseitige Programmierungen. Wieder klingt es nicht nach etwas, auf das Sie schnell genug eingehen könnten.

5
deceze

Wenn Ihre Website statisch sein soll und dieselbe Lösung wie die Bootstrap-Seite verwenden soll, die von Jekyll bereitgestellt wird, können Sie Jekyll- und Github-Seiten verwenden, um in den Vorlagentextdateien zu markieren und in einer Yaml-Datei, die die Zeichenfolgen enthält, extern zu referenzieren jede Sprache (wie en.yml und br.yml).

Wenn Jekyll die statische Seite erstellt, generiert er die richtigen Dateien, Verzeichnisse und Verweise, um die Seite in verschiedenen Sprachen zu durchsuchen. Dies sollte nicht mit Javascript geschehen, die Seite sollte in jeder Sprache generiert werden.

Ich habe dies mit einer Website gemacht: https://github.com/worknenjoy/airspace-jekyll Die die Seite https://worknenjoy.github.io/airspace-jekyll/) generiert.

Die Sprachauswahl leitet auf eine pt-Adresse zu einer brasilianischen portugiesischen Seite um. Die Standardseite ist Englisch. Der Code ist Open Source und ist da.

In Gemfile können Sie sehen, dass der verwendete Juwel das Jekyll-Multiple-Languages-Plugin ist ( https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin

das ist dafür verantwortlich, alles zu erstellen, was Sie brauchen, damit diese Übersetzung einfacher wird.

Nein, es ist nicht möglich, eine Website nur mit CSS zu übersetzen, da CSS nur für das Styling verwendet wird.

Für eine wirklich reibungslose und einfache Übersetzung können Sie Cloud Translation verwenden, ein kostenloses Open-Source-Projekt von Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation .

Es könnte sogar den Bootstrap -Stil und andere Stile ändern, um direkt von rechts nach links zu funktionieren. Sie müssen lediglich die Richtung der Sprache auf rtl setzen.

Sie sollten zuerst einen Verweis auf jQuery und dann auf die CloudTranslation-JavaScript-Datei hinzufügen:

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

Fügen Sie die Konfiguration im HTML-Kopf wie folgt hinzu:

<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>

und fügen Sie Ihre eigene benutzerdefinierte Auswahl (Dropdown) mit der Klasse "CloudTranslationSelect" hinzu, um die Liste der vordefinierten Sprachen anzuzeigen.

Weitere Informationen finden Sie unter https://www.angrymonkeycloud.com/translation

0
Elie Tebchrani

Ein anderes Beispiel für dasselbe, was die Jungs schon sagen

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