i18n为静态html内容 [英] i18n for static html content

查看:157
本文介绍了i18n为静态html内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

此示例的代码可以在这里

这篇关于i18n为静态html内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆