i18n 用于静态 html 内容

2022-01-18 00:00:00 internationalization html java jsp

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

I am building a website on the front of a REST API (this supports i18n) and i'm not sure which way to go about internationalization. I have looked into js and html solutions but they all seem inferior to server side options.

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

Given that most of the pages contain static content that just needs locale support would jsp's be a good solution? jsf seems like overkill.

推荐答案

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

I really can not recommend having various HTML files. Localizability best-practices recommend separating the translations from the code.

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

The fastest, simplest, and least obstructive method I know is using Google ARB. Consider having the following sample 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>

现在需要提取可本地化的内容.可以使用 提取工具ARB 提供，或者如果您的页面非常简单，您甚至可以手动完成:

Now it's needed to extract the localizable content. It's possible to do this either using the extractor tool ARB provides or if your pages are very simple, you can even do it manually:

<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>

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

Then let's create the resource file for these messages and also provide the translation:

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

Finally, add the JS to the HTML. Also, provide an easy way to get the selected locale from URL; i.e. ./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>

可以在这里找到此示例的代码.

The code for this sample can be found here.

相关文章