静态Html网站 - Bootstrap - 多语言支持

Question

首先，我想说明我是网络开发的新手。

我被要求建立一个静态网站（对于一个小型酒店），我买了this响应式html5 - CSS3模板。它由纯html5 - css3和一些用于幻灯片等的JavaScript组成，并使用引导框架。

我已经建立了网站，现在我被要求添加多语言支持。我可以通过bootstrap实现这一目标吗？它甚至可以用CSS完成吗？

如果没有，我是否应该在子文件夹中包含所有.html文件的副本（例如＆＃34;网站＆＃34; / en /＆＃34;内容＆＃34;）并通过链接重定向用户页面顶部，还是应该使用JavaScript来决定语言？

简单地说，我希望用户从其他国家访问我的网站以获取该网站的英文版本，而其他所有用户都获得默认语言。我希望尽可能快地开发（这就是为什么我买了一个模板）以便尽快启动并运行（夏季已经开始）。我有一个合理的编程背景，但我在Web开发方面是全新的。

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

当您在html标记上设置正确的lang属性时（例如通过javascript），您可以非常轻松地翻译您的网页：

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

Answer 2

Bootstrap与此无关。不，您无法使用纯CSS翻译网站。您必须更改HTML源以包含不同的文本。是的，您可以通过复制所有HTML文件并更改其中的文本来实现。通常，您使用带有HTML模板的服务器端语言，这样您就可以动态地交换文本的翻译，而无需拥有代码的完整副本。但是，听起来这并不像你能够足够快地起床和跑步。

检测客户端语言并提供适当版本的站点也需要一些服务器端编程。同样，它听起来不像你能够快速进入的东西。

Answer 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中看到使用的gem是jekyll-multiple-languages-plugin（https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin）

负责创建所需的一切，使这种翻译变得更容易。

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

Answer 5

否，因为CSS仅用于样式设置，所以不可能仅使用CSS来翻译网站。

要真正流畅，轻松地翻译，您可以使用Cloud Translation，它是《愤怒的猴子云》的免费开源项目：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的更多信息

Answer 6

您可以使用多按钮作为两个语言的两个按钮的多按钮 并将它们相互联系起来。 例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-timeline">
		<ul>
			<li id="circle-1"><span>1</span><a href="#">Button1</a></li>
			<li id="circle-2"><span>2</span><a href="#">Button2</a></li>
			<li id="circle-3"><span>3</span><a href="#">Button3</a></li>
			<li id="circle-4"><span>4</span><a href="#">Button4</a></li>
		</ul>
	</div><!--info-timeline-->

<div id="first">
	<form method="get" action="" name="form1">
		<input type="text" name="fname" placeholder="first name">
    <input type="hidden" name="next_index" value="2" />
		<button type="submit" class="button-clicked">Button1</button>
	</form>
</div>

<div id="second">
	<form method="get" action="" name="form2">
		<input type="text" name="mname" placeholder="middle name">
    <input type="hidden" name="next_index" value="3" />
		<button type="submit" class="button-clicked">Button2</button>
	</form>
</div>

<div id="third">
	<form method="get" action="" name="form3">
		<input type="text" name="lname" placeholder="last name">
    <input type="hidden" name="next_index" value="4" />
		<button type="submit" class="button-clicked">Button3</button>
	</form>
</div>

<div id="fourth">
	<form method="get" action="" name="form4">
		<input type="text" name="age" placeholder="age">
		<button type="submit" class="button-clicked">Submit</button>
	</form>
</div>

的index.html

english languages link here

明确的是它的工作 谢谢