首先我想声明我是 Web 开发的新手。
我被要求建立一个静态网站（对于一家小型酒店），我购买了this responsive html5 - CSS3 模板。它由纯 html5 - css3 和一些用于幻灯片等的 JavaScript 组成，并使用引导框架。
我已经建立了网站，现在我被要求为其添加多语言支持。我可以通过引导程序完成此操作吗？甚至可以用 CSS 完成吗？
如果没有，我应该在子文件夹（例如 "website"/en/"content" ）中保存所有 .html 文件的副本并通过页面顶部的链接重定向用户，还是应该使用JavaScript 决定语言？
简而言之，我希望从另一个国家/地区访问我的网站的用户获得该网站的英文版本，而所有其他人获得默认语言。我希望尽快开发（这就是我购买模板的原因）以尽快启动和运行（夏季已经开始）。我有一定的编程背景，但我是 Web 开发的新手。
【问题讨论】：
标签： javascript html css twitter-bootstrap-3 multilingual
我知道它真的很旧，但我陷入了这个问题，在我的一个项目遇到了很多麻烦之后，我找到了一个可行的解决方案。
对于两种不同的语言，希腊语和英语，我在每个页面中添加了每个元素的单独版本，一个是希腊语版本，一个是英语版本。在每一页中，我将希腊版本放入带有属性lang='el' 的div 中，将英语版本放入带有lang='en' 的div 中。我有一个函数可以将每个div 设置display 中的语言从none 更改为block，反之亦然，具体取决于语言。
function allagiglossas() {
const l = document.getElementsByTagName("*");
if(document.querySelector('html').lang === 'en'){
for(i = 0; i<l.length; i++) {
if (l[i].lang === 'el') {
l[i].style.display = 'none';
}
if (l[i].lang === 'en') {
l[i].style.display = 'block';
//location.reload();
}
}
}else{
for(i = 0; i<l.length; i++) {
if (l[i].lang === 'en') {
l[i].style.display = 'none';
}
if (l[i].lang === 'el') {
l[i].style.display = 'block';
}
}
}
}
另一个设置 HTML lang 属性的函数。
function bilingual() {
if(document.querySelector('html').lang === 'el'){
sessionStorage.setItem("language", "en");
}else{
sessionStorage.setItem("language", "el");
}
document.querySelector('html').setAttribute("lang",sessionStorage.getItem("language"));
allagiglossas();
}
还有一些代码可以在浏览器的会话存储中记住用户选择了什么语言，以便在我的网站上从一个页面导航到另一个页面时保持这种语言。
document.querySelector('html').setAttribute("lang",sessionStorage.getItem("language"));
document.getElementById("change").onclick = bilingual;//Με το κουμπί αλλάζει η γλώσσα
document.addEventListener('DOMContentLoaded', allagiglossas);
当然，我在每个页面都添加了一个按钮，每次点击都会改变语言。
希望这将帮助面临同样问题的人，如果有人告诉我我是否有问题或有什么方法可以让事情变得更好，我将非常感激。
【讨论】：
不，仅使用 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”类的自定义选择（下拉菜单）以显示预定义语言列表。
【讨论】：
人们已经说过的同一件事的另一个例子
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>【讨论】：
您可以将多按钮用于多按钮，例如两个按钮用于两种语言 并将它们相互联系起来。 例如：
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>
它确实有效 谢谢你
【讨论】：
如果您的网站应该是静态的并且使用与引导页面相同的解决方案（由 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)
负责创建您所需的一切，使翻译变得更容易。
【讨论】：
您可以在单个文件中执行此操作，而无需使用任何服务器端编程语言。您应该查看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>
【讨论】：
content 属性并将您的文本放在 SASS 变量中。将更具可扩展性且更易于维护。
Bootstrap 与此无关。不，您不能使用纯 CSS 翻译网站。您必须更改 HTML 源代码以包含不同的文本。是的，您可以通过复制所有 HTML 文件并更改其中的文本来做到这一点。通常，您将拥有一种带有 HTML 模板的服务器端语言，它使您能够动态地交换文本的翻译，而无需拥有完整的代码副本。但是，这听起来不像是您能够足够快地启动和运行。
检测客户端语言并提供适当版本的网站也需要一定数量的服务器端编程。再说一次，这听起来不像是你能够足够快地进入的东西。
【讨论】：