首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >静态Html网站- Bootstrap -多语言支持

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

Stack Overflow用户
提问于 2014-06-04 18:07:35
回答 6查看 62.3K关注 0票数 30

首先,我想说的是,我是Web开发方面的新手。

我被要求建立一个静态网站(为一个小型酒店),我买了this响应式html5 - CSS3模板。它由纯html5 - css3和一些用于幻灯片等的JavaScript组成,并使用bootstrap框架。

我已经建立了这个网站,现在我被要求为它添加多语言支持。我可以通过bootstrap来完成这个任务吗?它甚至可以用CSS完成吗?

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

简而言之,我想从另一个国家访问我的网站的用户获得该网站的英文版本,而所有其他人获得默认语言。我想要尽可能快的开发(这就是为什么我买了一个模板),以便尽快启动和运行(夏季已经开始)。我有一个合理的编程背景,但我在Web开发方面完全是新手。

EN

回答 6

Stack Overflow用户

发布于 2014-06-04 18:26:52

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

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

票数 4
EN

Stack Overflow用户

发布于 2017-05-14 17:40:59

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

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

我通过一个网站实现了这一点:生成页面https://worknenjoy.github.io/airspace-jekyll/https://github.com/worknenjoy/airspace-jekyll

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

您可以在Gemfile中看到所使用的gem是jekyll多语言插件(https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin)

它负责创建您需要的所有内容,使翻译变得更容易。

票数 2
EN

Stack Overflow用户

发布于 2017-10-27 21:07:16

你可以对多个按钮使用多按钮,就像对两种语言使用两个按钮一样,并将它们链接在一起。例如:

代码语言:javascript
复制
english languages link here

index.html

代码语言:javascript
复制
<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>

这是工作,非常感谢

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24034588

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档