i18n for static html content

前端未结

关注

 2  877

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 solution

相关标签:

2条回答

花落未央

2021-01-14 01:08

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

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>

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"
          }
        }
      }
    }
);

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.

0 讨论(0)

余生分开走

2021-01-14 01:22
1) If you have only static content create different html files with different languages and put it in separate folder and access the site like
```
for English
http://yourdomain.com/en/english_index.html

for French
http://yourdomain.com/fr/french_index.html
```
2) JSP also a good option if you have dynamic manipulation. Have a good option to maintain i18n resource boundle.

I Suggest to go with option 1
0 讨论(0)
发布评论:

提交评论
- 加载中...