i18n 用于静态 html 内容答案

【问题标题】：i18n for static html contenti18n 用于静态 html 内容
【发布时间】：2013-04-24 00:16:46
【问题描述】：

我正在 REST API（这支持 i18n）的前端构建一个网站，但我不确定国际化应该采用哪种方式。我研究过 js 和 html 解决方案，但它们似乎都不如服务器端选项。

鉴于大多数页面包含只需要语言环境支持的静态内容，jsp 会是一个好的解决方案吗？ jsf 似乎有点矫枉过正。

【问题讨论】：

【解决方案1】：

我真的不推荐使用各种 HTML 文件。本地化最佳实践建议将翻译与代码分开。

我所知道的最快、最简单、干扰最小的方法是使用Google ARB。考虑使用以下示例 HTML：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Testing ARB...</title>
    </head>

    <body>
        <h2>This is a test.</h2>
    </body>
</html>

现在需要提取可本地化的内容。可以使用extractor tool ARB 提供的方法来完成此操作，或者如果您的页面非常简单，您甚至可以手动完成：

<html>
    <head arb:namespace="test">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title arb:id="MSG_HTML_TITLE">Testing ARB...</title>
    </head>

    <body>
        <h2 arb:id="MSG_BODY_TEST">This is a test.</h2>
    </body>
</html>

然后让我们为这些消息创建资源文件并提供翻译：

arb.register(
    "test", 
    {
    "MSG_HTML_TITLE": "Testing ARB",
    "MSG_BODY_TEST": "This is a test.",
    "MSG_CURR_LOCALE": "...and the selected language is \"{currentLocale}\".",
      "@MSG_CURR_LOCALE": {
        "placeholders": {
          "0": {
            "description": "This variable would show the current locale.",
            "example": "fr"
          }
        }
      }
    }
);

arb.register(
    "test:de", 
    {
    "MSG_HTML_TITLE": "ARB auf Probe",
    "MSG_BODY_TEST": "Das ist ein Test.",
    "MSG_CURR_LOCALE": "...und die ausgewählte Sprache ist \"{currentLocale}\".",
      "@MSG_CURR_LOCALE": {
        "placeholders": {
          "0": {
            "description": "This variable would show the current locale.",
            "example": "fr"
          }
        }
      }
    }
);

最后，将 JS 添加到 HTML 中。此外，提供一种从 URL 获取所选语言环境的简单方法；即./index.html?locale=de

<html>
    <head arb:namespace="test">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title arb:id="MSG_HTML_TITLE">Testing ARB...</title>
        <script src="arb/lib/arbcore.js"></script>
        <script src="test.arb"></script> <!-- ARB file w/ translations. -->
    </head>

    <body>
        <h2 arb:id="MSG_BODY_TEST">This is a test.</h2>

        <!-- Get locale from URL and translate page HTML -->
        <script>

            function main(){
                var locale = arb.getParamFromUrl('locale');
                if (!locale){
                    locale = 'en';
                }
                arb.setResourceSelector(locale);

                // JS localization
                var r$ = arb.getResource("test");
                document.write(arb.msg(r$.MSG_CURR_LOCALE, {'currentLocale': locale}));     

                // This should appear after all the translatable HTML content
                arb.localizeHtml();                             
            }

            main();

        </script>

    </body>
</html>

这个示例的代码可以在here找到。

【讨论】：

这是前端解决方案吗？它的性能与服务器端解决方案相比如何？
用每种语言的翻译编译的 HTML 都优于此。假设，即时获取翻译将是最慢的。显然，这些都是推测，而不是基准的实际结果。
您能告诉我如何导入它吗？我应该导入一个脚本吗？

【解决方案2】：

1) 如果您只有静态内容，请创建不同的 html 文件不同的语言并将其放在单独的文件夹中并访问该站点喜欢

for English
http://yourdomain.com/en/english_index.html

for French
http://yourdomain.com/fr/french_index.html

2) 如果您有动态操作，JSP 也是一个不错的选择。有一个维护 i18n 资源边界的好选择。

我建议选择选项 1

【讨论】：

选项 1 的问题是维护工作量每增加一种语言都会成倍增加，并且没有什么可以强制文件的不同语言版本之间的一致性。
嗯，选择选项 1) 或 2) 取决于开发人员的情况、要求和舒适度