web-dev-qa-db-fra.com

Site Web HTML statique - Bootstrap - Support multilingue

Pour commencer, je veux dire que je suis novice en développement Web.

On m'a demandé de créer un site Web statique (pour un hôtel de petite taille) et j'ai acheté this responsive html5 - modèle CSS3. Il se compose de html5 - css3 pur, et de JavaScript pour les diaporamas, etc., et utilise le framework bootstrap.

J'ai déjà créé le site Web et on m'a maintenant demandé d'y ajouter un support multilingue. Puis-je accomplir cela via bootstrap? Peut-on même le faire avec CSS? 

Sinon, devrais-je avoir une copie de tous mes fichiers .html dans un sous-dossier (par exemple, "site Web"/fr/"contenu") et rediriger l'utilisateur via un lien en haut de la page, ou dois-je utiliser JavaScript pour décider la langue?

En bref, j'aimerais qu'un utilisateur visitant mon site Web depuis un autre pays obtienne la version anglaise du site, tandis que tous les autres utilisent la langue par défaut. Je souhaite un développement aussi rapide que possible (c’est pourquoi j’ai acheté un modèle) pour pouvoir le lancer immédiatement (la saison d’été a déjà commencé). J'ai de l'expérience en programmation, mais je suis tout à fait nouveau en développement Web.

javascripthtml5css3twitter-bootstrap-3multilanguage
24
sestus

Vous pouvez le faire dans un seul fichier sans utiliser aucun langage de programmation côté serveur. Vous devriez vérifier i18next pour une solution javascript appropriée. 

Vous pouvez également utiliser pure CSS pour traduire une page d'accueil. Essayez quelque chose comme 

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

Lorsque vous définissez un attribut lang approprié sur votre balise html (par exemple, avec JavaScript), vous pouvez traduire votre page très facilement:

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

Bootstrap n'a rien à voir avec ça. Non, vous ne pouvez pas traduire un site en utilisant du CSS pur. Vous devrez modifier le code source HTML pour qu'il contienne un texte différent. Oui, vous pouvez le faire en faisant une copie de tous vos fichiers HTML et en modifiant le texte qu'ils contiennent. En règle générale, vous disposez d'un langage côté serveur avec des modèles HTML qui vous permettent d'échanger les traductions contre du texte de manière dynamique sans avoir à disposer d'une copie complète de votre code. Cependant, il ne semble pas que ce soit quelque chose que vous seriez capable de mettre en place assez rapidement.

La détection de la langue du client et la diffusion d'une version appropriée du site nécessiteront également une certaine programmation côté serveur. Encore une fois, cela ne semble pas être une chose à laquelle vous pourriez entrer assez rapidement.

5
deceze

Si votre site Web est censé être statique et utiliser la même solution que la page d'amorçage, créée par Jekyll, vous pouvez utiliser les pages Jekyll et github pour marquer les fichiers de modèle de texte et faire référence à l'extérieur dans un fichier Yaml contenant les chaînes. chaque langue (comme en.yml et br.yml).

Ainsi, lorsque jekyll construit la page statique, il génère les fichiers, les répertoires et les références appropriés pour parcourir la page dans différentes langues. Cela ne devrait pas être fait par Javascript, la page dans chaque langue devrait être générée.

Je l'ai fait avec un site Web: https://github.com/worknenjoy/airspace-jekyll Qui génère la page https://worknenjoy.github.io/airspace-jekyll/

Le sélecteur de langue redirige une adresse pt vers une page portugaise brésilienne. La page par défaut est l'anglais. Le code est open source et c'est là.

Vous pouvez voir dans Gemfile que la gemme utilisée est le jekyll-multiple-languages-plugin ( https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin )

il est responsable de créer tout ce dont vous avez besoin pour que cette traduction soit plus facile.

1
Alexandre Magno Teles Zimerer

Un autre exemple de la même chose que ce que les gars disent déjà

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