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

Question

首先,我想说明我是Web开发的新手.

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

我已经建立了网站,现在我被要求添加多语言支持.我可以通过bootstrap实现这一目标吗？它甚至可以用CSS完成吗？

如果没有,我是否应该在子文件夹中包含所有.html文件的副本(例如"website"/ en /"content"),并通过页面顶部的链接重定向用户,或者我应该使用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>