如何本地化一个简单的HTML网站页面在我的情况下

How to localize a simple HTML website page in my case?

本文关键字：网站 HTML 情况下 我的 简单 本地化 一个      更新时间：2023-09-26

我不是开发任何web服务应用程序，其中包含客户端和后端服务器端(如java EE应用程序或Ruby on Rails)。

相反，我只是开发一个HTML 网站页面，在这个页面上，有两个旗帜图像(美国和中国)，这是用作用户页面的语言选择。

我想知道，对于这个单一的网页开发(没有任何后端系统)，是否有任何有效的方法来实现页面本地化(即显示不同语言的页面)基于从用户的标志选择?

您可以使用标准的HTML lang属性:

<span lang="en">Scale</span><span lang="de">Maßstab</span>

然后你可以隐藏和显示匹配的元素:

function select_language(language) {
    $("[lang]").each(function () {
        if ($(this).attr("lang") == language)
            $(this).show();
        else
            $(this).hide();
    });
}

我使用了一个简单的选择:

<select onchange="select_language(this.options[this.selectedIndex].value)">
  <option value="en" selected>English</option>
  <option value="de">Deutsch</option>
</select>

现在我不使用jQuery。首先，我将隐藏所有具有lang属性的节点，并只显示默认语言。这可以在CSS中完成:

[lang] {
  display: none;
}
[lang=en] {
  display: unset;
}

如果没有启用JavaScript，文档不会本地化，但至少可以用默认语言阅读。

接下来，我将使用一些JavaScript来显示正确的语言，如果它在支持的语言列表中。

function localize (language)
{
  if (['de'].includes(language)) {
    let lang = ':lang(' + language + ')';
    let hide = '[lang]:not(' + lang + ')';
    document.querySelectorAll(hide).forEach(function (node) {
      node.style.display = 'none';
    });
    let show = '[lang]' + lang;
    document.querySelectorAll(show).forEach(function (node) {
      node.style.display = 'unset';
    });
  }
}

您可以使用选择框或浏览器语言。

localize(window.navigator.language);

有一种方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Localise</title>
</head>
<body>  
    <a href="#china" onclick="showthis('contentchina')">China flag</a>|
    <a href="#usa" onclick="showthis('contentusa')">USA flag</a>
    <div id="contentchina" style="display:none">
        Lorem ipsum dolor sit amet...
    </div>
    <div id="contentusa" style="display:none">
        Duis aute irure dolor...
    </div>
    <script>
    function showthis(nation) {
        document.getElementById(nation).style.display = "block";
        return false;
    }
    </script>
</body>
</html>

我建议使用模板引擎来解决这个问题。对我来说，它不是完全一个backend，但更多的是一个灰色地带。像Moustache或smarty这样的名字会很适合你。

简单地说，我同意其他海报的观点，这在客户端是不合理的。

您可以使用JavaScript读取用户语言并显示正确的标志/内容:

HTML: 

<img id="myFlag" src="flag_default.png"/>

和一些jQuery(因为你用jQuery标记了你的问题):

var supportedLangs = ['de', 'en', 'cn'];
var userLang = navigator.language;
if($.inArray(userLang, supportedLangs) >= 0){
    $('myFlag').attr('src', 'flag_' + userLang + '.png');
}

hjsfiddle

您的网页需要了解在呈现中文字符时应该使用什么编码:

 <! -- NOTICE THE "charset=UTF-8" !!!! -->
<head>    
    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
</head>

这是可能的。这里有一种方法

在你的文件夹中像这样组织HTML 

/root
  /Chinese
  /English-American
  index.html

根文件夹将包含您的语言选择页面，中文和英美将包含您的特定语言页面。

现在在index.html上，只需将用户引导到正确的语言文件夹，所有链接将引用正确的语言文件夹

简单的回答:不，使用后端是完成此任务的最简单和最好的方法。后端代码是为动态内容设计的，这就是你想要的。

难以回答:这是一种无需将页面划分为两个目录的方法。问题是，您将不得不使用Javascript来生成页面内容，这通常是一个坏主意。但是您可以使用javascript MVC库，加上对内容文件夹的ajax调用来拉入文本(您仍然需要有两个英文和中文目录，但它们只包含内容，而不包含HTML)。问题是，这个方法有多个潜在的问题，只有当你知道你的用户将使用一个启用了javascript的现代浏览器

时，它才值得使用。

如果你想让你的页面对搜索引擎友好，你必须把这两个静态版本放在HTML中。你可以把它们放入两个div，当用户点击一个标志时，你会显示正确的div。

您也可以使用像Mustache这样的模板来用JavaScript呈现内容。然后，您可以将未本地化的内容写入模板，并将本地化的内容作为变量。

一般来说JS为你生成代码是不好的。但是，我使用underscore.js做了一个POC。框架有一个"_template"函数，它可以帮助我们替换HTML文件中的所有键。该函数接受JSON格式的键值对。

根据选择的语言，加载相应的JSON文件，然后将其传递给_template函数。这将替换所有的键

相关文章：