首先，我想声明自己是Web开发的新手。
我被要求建立一个静态网站（针对一家小型酒店），然后我购买了this响应式html5-CSS3模板。它由纯html5-css3以及一些用于幻灯片播放等的JavaScript组成，并使用bootstrap框架。
我已经建立了该网站，现在有人要求我为其添加多语言支持。我可以通过引导程序完成此操作吗？甚至可以用CSS完成吗？
[否则，应该在子文件夹（例如“ website” / en /“ content”）中复制所有.html文件，并通过页面顶部的链接重定向用户，还是应该使用JavaScript确定语言？
简而言之，我希望一个从另一个国家访问我的网站的用户获得该网站的英文版本，而其他所有用户都使用默认语言。我想要尽可能快的开发（这就是我购买模板的原因）以便尽快启动并运行（夏季已经开始）。我在编程方面有一定的背景，但是我在Web开发中是一个全新的人。
您可以在一个文件中完成此操作，而无需使用任何服务器端编程语言。您应该检出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>
引导程序与此无关。不，您不能使用纯CSS翻译网站。您必须将HTML源代码更改为包含其他文本。是的，您可以通过复制所有HTML文件并更改其中的文本来实现。通常，您会使用带有HTML模板的服务器端语言，从而使您可以动态地将翻译交换为文本，而不必拥有完整的代码副本。但是，听起来这不是您可以足够迅速地启动并运行的东西。
检测客户端语言并提供适当版本的网站也是需要进行大量服务器端编程的过程。再说一次，这听起来不像您能够足够快地进入。
如果您的网站应该是静态的，并且使用与由Jekyll支持的引导页面相同的解决方案，则可以使用Jekyll和github页面在模板文本文件中进行标记，并在保存了Yaml文件的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）
负责创建您需要的所有内容，以使此翻译更容易。
[其他人已经说过的同一件事的另一个示例
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>不，因为CSS仅用于样式设置，所以不可能仅使用CSS来翻译网站。
为了获得真正流畅，轻松的翻译，您可以使用Cloud Translation，它是Angry Monkey Cloud的免费开放源代码项目：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”以显示预定义语言的列表。
您可以将多按钮用于多按钮，就像两种语言的两种按钮一样并将它们彼此链接。例如：
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>
肯定是工作谢谢