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

Question

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

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

我已经建立了网站，现在我被要求添加多语言支持。我可以通过 Bootstrap 完成这个吗？甚至可以用 CSS 完成吗？

如果没有，我应该在子文件夹(例如“website”/en/“content”)中复制所有 .html 文件并通过页面顶部的链接重定向用户，还是应该使用JavaScript 决定语言？

简而言之，我希望从其他国家/地区访问我的网站的用户获得该网站的英文版本，而其他所有用户都获得默认语言。我希望尽可能快地开发(这就是我购买模板的原因)以尽快启动并运行(夏季已经开始)。我有一定的编程背景，但我对 Web 开发完全陌生。

Answer 1

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