css - 网站本地化(或本地化)

Question

我最近一直在研究如何本地化我的网站，但在 Google 搜索中却一无所获。我一直在寻找如何本地化应用程序而不是网站或 GeoLocation，这有点太具体了。

我希望能够主要使用纯 HTML(5) 和 CSS(3) 进行本地化。我希望能够本地化页面中的部分，而不是为每个国家/地区设置单独的 URL。

在此方面的任何帮助都将非常有用，因此在此先感谢。

编辑:如果没有纯 HTML(5) 或 CSS(3) 的方法来执行此操作，则服务器端、js 或其他语言的任何示例都会很有用。

Answer 1

这个解决方案是我在几乎没有 html 的 ajax 应用程序中使用的解决方案(所有内容都是从数据客户端生成的)。

第一部分确保您可以在 url 中指定语言(例如通过添加 &lang=it)并将其存储在本地存储中(浏览器中的永久用户首选项):

myapp.available_langs = ['en', 'fr', 'it']; // the first one is the default language
// Exemples :
//   {en:'hi', fr:'Bonjour'}
//   {fr:'Bonjour'}
myapp.loc = function(map) {
    if (map[myapp.lang]) return map[myapp.lang];
    for (var i=0; i<myapp.available_langs.length; i++) {
        if (map[myapp.available_langs[i]]) return map[myapp.available_langs[i]];
    }
    return "-label not found-";
};

myapp.getUrlParameter = function(name, defaultValue) {
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var results = new RegExp( "[\\?&]"+name+"=([^&#]*)" )
         .exec( document.location.href );
    if( results == null ) return defaultValue;
    else return decodeURIComponent(results[1]);
};

myapp = {};
myapp.lang = localStorage['lang'] = myapp.getUrlParameter('lang', localStorage['lang']||myapp.available_langs[0]);

它在其他地方是这样使用的:

$('body').append('<div product id=product_header>\
    ...
        <tr>\
            <td> '+myapp.loc({en:'cut',fr:'date'})+': <span id=product_cutdate>?</span></td>\
            <td> '+myapp.loc({en:'grade',fr:'qualité'})+': <span id=product_grade>?</span></td>\
            <td> '+myapp.loc({en:'length',fr:'longueur'})+': <span id=product_length>?</span> m</td>\
            <td> '+myapp.loc({en:'thickness',fr:'épaisseur'})+': <span id=product_thickness>?</span> mm</td>\
            <td> '+myapp.loc({en:'width',fr:'largeur'})+': <span id=product_width>?</span> m</td>\
        </tr>\

您也可以选择使用用户代理，但在实际的公司使用中我发现它几乎没有用。请注意，i18n 解决方案可能多种多样。我不提倡使用这个，这只是我喜欢的一种模式。许多人更喜欢在外部属性文件中提取字符串，但根据我的经验，这会导致更糟糕的翻译并且更难管理(只要只有一个团队会说所有涉及的语言并且您没有 10 种语言)。