Javascript 静态Html网站-引导-多语言支持

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

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

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

如果没有，我应该在一个子文件夹（例如“website”/en/”content）中拥有所有.html文件的副本，并通过页面顶部的链接重定向用户，还是应该使用JavaScript确定语言

---

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

Bootstrap与此无关。不，您不能使用纯CSS翻译网站。您必须更改HTML源以包含不同的文本。是的，您可以通过复制所有HTML文件并更改其中的文本来做到这一点。通常，您会有一种带有HTML模板的服务器端语言，它使您能够在翻译中动态地交换文本，而不必拥有完整的代码副本。然而，这听起来不像是你能够足够快地启动和运行的东西

---

检测客户端语言并为站点的适当版本提供服务也是需要一些服务器端编程的工作。同样，这听起来不像是您能够足够快地进入的内容。

您可以在单个文件中完成这项工作，而无需使用任何服务器端编程语言。您应该查看合适的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>

早上好
古腾摩根
再见

如果您的网站应该是静态的，并且使用与引导页面相同的解决方案（由Jekyll提供支持），那么您可以使用Jekyll和github页面在模板文本文件中进行标记，并在Yaml文件中进行外部引用，该文件包含每种语言的字符串（如en.yml和br.yml）

因此，当jekyll构建静态页面时，它将生成适当的文件、目录和引用，以使用不同的语言导航页面。这不应该由Javascript完成，应该生成每种语言的页面

我是通过一个网站做的： 生成页面的

语言选择器将pt地址重定向到巴西葡萄牙语页面，默认页面为英语。代码是开源的，它就在那里

您可以在Gemfile中看到使用的gem是jekyll多语言插件（）

---

它负责创建您所需要的一切，使翻译变得更容易。

您可以使用多按钮进行多按钮转换，就像使用两种语言的两个按钮一样 并将它们相互联系起来。 例如：

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>

你好，听着，亲爱的！！！！
我为什么听你说

法语网页
链接此处
弗劳指数















早上好，雪儿埃库特！！！！
你要什么

这肯定是工作

---

谢谢你

又是一个同样的例子，男人们已经在说了

let langs=['en'，'fr'，'it']；
让lang='en'；
语言风格；
函数集合样式（样式）{
var elementId=''u_lang_styles'；
var element=document.getElementById（elementId）；
if（元素）{
元素。移除（）；
}
让style=document.createElement（'style'）；
style.id=elementId；
style.type='text/css'；
if（style.styleSheet）{
style.styleSheet.cssText=样式；
}否则{
appendChild（document.createTextNode（styles））；
}
document.getElementsByTagName（'head'）[0].appendChild（样式）；
}
函数setLang（lang）{
语言风格；
}
函数setLangStyles（lang）{
让样式=语言
.过滤器（功能（l）{
返回l！=lang；
})
.map（函数（l）{
返回“：lang（“+l+”）{display:none；}”；
})
.加入（“”）；
设置样式（样式）；
}

再见
大家好

法式面包
 

不，不可能仅使用CSS翻译网站，因为CSS仅用于样式设置

对于一个真正流畅和简单的翻译，你可以使用云翻译，这是一个来自愤怒的猴子云的免费开源项目：

它甚至可以修改引导样式和其他样式以支持从右到左的开箱即用，您只需将语言的方向设置为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>

{
“设置”：{
“DefaultLanguage”：“en”，
“TranslatorProvider”：“Azure”，//如果要手动提供翻译，则可以为空
“TranslatorProviderKey”：“{您的Microsoft Azure Translator密钥}”，
“UrlLanguageLocation”：“子目录”
},
“朗格