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

Posted 2023-03-06

【中文标题】静态 Html 网站 - Bootstrap - 多语言支持

【英文标题】：Static Html Website - Bootstrap - Multi language Support

【发布时间】：2014-07-24 22:26:47

【问题描述】：

首先我想声明我是 Web 开发的新手。

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

我已经建立了网站，现在我被要求为其添加多语言支持。我可以通过引导程序完成此操作吗？甚至可以用 CSS 完成吗？

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

简而言之，我希望从另一个国家/地区访问我的网站的用户获得该网站的英文版本，而所有其他人获得默认语言。我希望尽快开发（这就是我购买模板的原因）以尽快启动和运行（夏季已经开始）。我有一定的编程背景，但我是 Web 开发的新手。

【参考方案1】：

我知道它真的很旧，但我陷入了这个问题，在我的一个项目遇到了很多麻烦之后，我找到了一个可行的解决方案。

对于两种不同的语言，希腊语和英语，我在每个页面中添加了每个元素的单独版本，一个是希腊语版本，一个是英语版本。在每一页中，我将希腊版本放入带有属性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);

当然，我在每个页面都添加了一个按钮，每次点击都会改变语言。

希望这将帮助面临同样问题的人，如果有人告诉我我是否有问题或有什么方法可以让事情变得更好，我将非常感激。

【参考方案2】：

不，仅使用 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”类的自定义选择（下拉菜单）以显示预定义语言列表。

更多信息请访问https://www.angrymonkeycloud.com/translation

【参考方案3】：

人们已经说过的同一件事的另一个例子

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>

【讨论】：

这对 SEO 友好吗？

【参考方案4】：

您可以将多按钮用于多按钮，例如两个按钮用于两种语言 并将它们相互联系起来。 例如：

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"  ></span>English</a></li>
  <li><a href="fr_index.html"><span><img src="img/eng.png"   ></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"  ></span>English</a></li>
  <li><a href="fr_index.html"><span><img src="img/eng.png"   ></span> French</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Bonjour Cher Ecoute !!!!</h1>
<p>Pourquoi je t'écoute?</p>
</div>

它确实有效 谢谢你

【讨论】：

您能举个例子吗？

看来这是您对 SO 的第一个答案。不用担心。请在您的答案中提供代码 sn-ps 的示例链接。否则你的答案将被否决。

这对 SEO 友好吗？

【参考方案5】：

如果您的网站应该是静态的并且使用与引导页面相同的解决方案（由 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)

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

【参考方案6】：

您可以在单个文件中执行此操作，而无需使用任何服务器端编程语言。您应该查看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>

【讨论】：

i18next 完成了这项工作。我没有意识到这一点。我想我可以添加一个手动更改语言的按钮，对吧？就像在按下语言按钮时调用 i18n.init 并传递所选语言一样。

是的，您可以通过调用 setLng 来做到这一点。 See reference。我从未使用过 i18next，但在我的工作中已将其背后的概念改编为 Intranet 页面。我猜记录的功能可以正常工作。

不可扩展，并且对于每种语言一遍又一遍地硬编码复制相同的元素是疯狂的。一个改进是使用伪类 content 属性并将您的文本放在 SASS 变量中。将更具可扩展性且更易于维护。

这里的 SEO 存在问题，但您可以使用 JS 文件并使用所选语言在任何地方渲染任何文本块。

当然，您可以将所有文本存储在 CSS 文件中或任何您喜欢的位置，但在此之前，我建议您使用 CMS，它可以最好地解决这个经典问题。

【参考方案7】：

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

检测客户端语言并提供适当版本的网站也需要一定数量的服务器端编程。再说一次，这听起来不像是你能够足够快地进入的东西。

【讨论】：

您能否更具体地了解“动态交换文本翻译而无需拥有完整的代码副本”解决方案。谢谢。