使用 CSS 和 JS 的双语网站是个坏主意吗？ [关闭]答案

【问题标题】：Is a bilingual site with CSS & JS a bad idea? [closed]使用 CSS 和 JS 的双语网站是个坏主意吗？ [关闭]
【发布时间】：2014-09-08 06:06:41
【问题描述】：

我想建立一个大约 5 页的双语网站（一个投资组合类型的页面，带有简短的描述）。

这是一个带有“关于我”页面、“链接”和“出版物”的个人网页。绝对不需要超过两种语言，也不需要超过 5 页。该站点将托管在一些大学网站上，这意味着对服务器的要求应该很低。此外，它将由没有编程技能的人维护。

我阅读了this forum discussion，所有的人都建议在“服务器端”而不是“客户端”进行翻译。

我的网站会非常小，即使大部分内容都是单语的。 “翻译”实际上仅用于轻松浏览两种语言的材料。也就是说，只有菜单条目和简短说明会使用两种语言。

一个简单的CSS + JS方案，通过JS隐藏和显示两种语言，真的这么糟糕吗？

<ul id="menu">
  <li class="english">Events</li>
  <li class="portuguese">Eventos</li>
</ul>

我看到了这种方法的一个主要好处：易于维护，即使只使用一个简单的文本编辑器。

【问题讨论】：

您可能对这个问题感兴趣：Multiple Pages in Single HTML with continuity between pages

标签： javascript html css multilingual

【解决方案1】：

它将主要是一个补丁，最终将无法扩展。你真的应该看看 PHP gettext 扩展。它的工作原理是这样的：您要翻译的每个字符串都从 php 输出。

【讨论】：

好点。尽管他提到它的大小非常小，但谁知道……他们可能想要添加更多内容，而简单地为所有 5 种语言复制 HTML 是不可扩展的。

【解决方案2】：

只要它在语义上是正确的，并且网站足够小可以管理，就不会有问题。

通过语义上的正确，我的意思是如果您自己阅读 HTML 文档是否有意义？如果您订购源代码，您希望得到一份双语文档，那么答案是肯定的。

我会使用 lang 属性而不是 CSS 类来决定显示/隐藏什么，例如：

<body class="english-site">
  <div lang="en"><p>English</p></div>
  <div lang="de"><p>German</p></div>  
</body>

和

body.english-site [lang]:not([lang=en]) {
  display: none;
}

http://codepen.io/penx/pen/uihyK

【讨论】：

感谢您指向lang。我想，CSS 最好保留为body.english-site [lang=de] { display: none; }，否则它不适用于不需要翻译的元素，即应该以任何一种语言显示。
使用这种技术意味着将来可以添加其他语言，并且会自动隐藏它们。它仅将display:none 应用于具有 lang 属性的元素，因此如果您想以所有语言显示某些内容，那么我想不要添加 lang 标记。

【解决方案3】：

谈到：[国际化 | 全球化 | localization ] 最流行的标准之一是i18n，它是关于从编码的角度创建“资源字典”的全部内容。

不同的库已经实施了标准，它们的原则涵盖了货币、日期和数字等内容的翻译和转换。

例如i18n-js 建议这种结构：

I18n.translations = {
            en: {
                hello: "Hello World!"               
            },
            "pt-BR": {
                hello: "Olá Mundo!"
            },
            "de": {
                hello: "Hallo Welt!"
            },
            "nb": {
                hello: "Hei Verden!"
            }
        };

   I18n.t("hello", {locale: "en"});    //returns  "Hello World!"
   I18n.t("hello", {locale: "pt-BR"}); //returns "Olá Mundo!"

JQuery plug-in 也有帮助：

$.i18n.load({ a_key: 'translated string %2$s - %1$s' });
$.i18n._('a_key', ['order', 'in'])); //returns 'translated string in - order'

要定义结构，建议首先选择基本框架（更适合您的需求）并遵循社区的最佳实践。这将使决策过程在社区经验中更具指导性和支持性。

How to dynamically change language using jquery-i18n-properties and JavaScript?

Angular 还实现了 i18n 并允许在运行时切换语言：

做类似的事情：

$translate.use('es');

http://www.ng-newsletter.com/posts/angular-translate.html

【讨论】：

在不启用 JS 的情况下是否可以工作？我的简单解决方案将默认显示默认语言，并且仅在启用 JS 时隐藏默认语言以显示其他语言。
@Earthliŋ 不，这是一个 js 解决方案。如果需要缺少 js，那么服务器端解决方案实际上是缺少一些疯狂的 CSS 解决方案的智能且可扩展的解决方案。
@zero298 我编辑了我的 OP 以澄清我不需要可扩展的解决方案，并且我需要一个解决方案，它对服务器和维护人员的需求很少，用于更新和移动站点.
这不能回答所提出的问题。

【解决方案4】：

如果您网站的语言要求从未超出您所描述的范围，那么这不是一个糟糕的主意。

请记住：如果您想进一步进行翻译，则必须从头开始进行服务器端翻译。

【讨论】：