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

明确的是它的工作谢谢

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

6 个答案: