Static Html Website - Bootstrap - Поддержка нескольких языков

Ответ 1

Вы можете сделать это в одном файле без использования каких-либо языков программирования на стороне сервера. Вы должны проверить i18next правильное решение javascript.

Вы также можете использовать чистый 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 */

Когда вы устанавливаете правильный атрибут lang на свой тег html (например, javascript), вы можете легко перевести страницу:

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

Ответ 2

Bootstrap не имеет к этому никакого отношения. Нет, вы не можете перевести сайт с использованием чистого CSS. Вам нужно будет изменить источник HTML, чтобы содержать другой текст. Да, вы можете сделать это, сделав копию всех ваших HTML файлов и изменив текст в них. Как правило, у вас будет серверный язык с HTML-шаблонами, которые позволят вам динамически менять текст в переводе, не имея полной копии вашего кода. Однако это не похоже на то, что вы могли бы быстро встать и работать.

Обнаружение языка клиента и обслуживание соответствующей версии сайта также является чем-то, что потребует некоторого количества серверных программ. Опять же, это не похоже на то, что вы могли бы получить достаточно быстро.

Ответ 3

Если ваш веб-сайт должен быть статичным и использовать то же решение, что и страница начальной загрузки, на котором работает Jekyll, вы можете использовать страницы Jekyll и github для маркировки в текстовых файлах шаблонов и ссылки снаружи в файле Yaml, который содержит строки на каждом языке (например, en.yml и br.yml).

Итак, когда jekyll создает статическую страницу, он будет генерировать правильные файлы, каталоги и ссылки для навигации по странице на разных языках. Это не должно выполняться Javascript, страницей на каждом языке, который должен быть сгенерирован.

Я сделал это с веб-сайта: https://github.com/worknenjoy/airspace-jekyll которые генерируют страницу https://worknenjoy.github.io/airspace-jekyll/

Выбор языка перенаправляет адрес pt на бразильскую португальскую страницу, а страница по умолчанию - английская. Код является открытым исходным кодом, и он есть.

В Gemfile вы можете увидеть, что используемый жемчуг - это jekyll-multiple-languages-plugin (https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin)

который несет ответственность за создание всего, что вам нужно, чтобы облегчить этот перевод.

Ответ 4

Еще один пример того же, что парни уже говорят

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>

Ответ 5

Нет, невозможно перевести сайт, используя только CSS, так как CSS используется только для стиля.

Для действительно плавного и простого перевода вы можете использовать Cloud Translation, это бесплатный проект с открытым исходным кодом от Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.

Он может даже изменить стиль Bootstrap и другие стили для поддержки "справа налево" из коробки, вам просто нужно установить направление языка на rtl.

Сначала вы должны добавить ссылку на jQuery, затем в файл JavaScript CloudTranslation:

<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

Ответ 6

Вы можете использовать кнопку multi для мульти-кнопки, как две кнопки для двух языков и связали их друг с другом. например:

english languages link here

index.html

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DESIGN</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="services.html">Services<span class="caret"></span></a>

<ul class="dropdown-menu">
      <li><a href="logo.html">logo design</a></li>
      <li><a href="banner.html">Banner Design</a></li>
      <li><a href="psd.html">Psd Desgin</a></li>
    </ul>
  </li>
  <li><a href="contact.html">contact us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
  <li><a href="index.html"><span><img src="img/fr.png" height="20px" width="20px"></span>English</a></li>
  <li><a href="fr_index.html"><span><img src="img/eng.png"  height="20px" width="20px"></span> French</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Hello Listen Dear !!!!</h1>
<p>Why i listen you?</p>
</div>






french language page
link here
fr_index


<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CONCEPTION</a>
</div>
<ul class="nav navbar-nav">
  <li class="active"><a href="fr_index.html">Accueil</a></li>
  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="fr_services.html">Prestations de service<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="fr_logo.html">création de logo</a></li>
      <li><a href="fr_banner.html">Conception de bannière</a></li>
      <li><a href="fr_psd.html">Psd Design</a></li>
    </ul>
  </li>
  <li><a href="fr_contact.html">Contactez nous</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
  <li><a href="index.html"><span><img src="img/fr.png" height="20px" width="20px"></span>English</a></li>
  <li><a href="fr_index.html"><span><img src="img/eng.png"  height="20px" width="20px"></span> French</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Bonjour Cher Ecoute !!!!</h1>
<p>Pourquoi je t'écoute?</p>
</div>

он работает определенно спасибо