How to localize a simple HTML website page in my case?
I am NOT developing any web service application which contain client side and backend server side (like java EE application or Ruby on Rails).
Instead, I am simply developing a HTML website page, on this page, there are two flag images(USA and China) which is used as a language selection of the page for users.
I am wondering, for this single web page development (without any backend system), is there any efficient way to implement the page localization(that's display the page in different language) based on the开发者_开发知识库 flag selection from user?
You can use the standard HTML lang attribute:
<span lang="en">Scale</span><span lang="de">Maßstab</span>
And then you can hide and show the matching elements:
function select_language(language) {
$("[lang]").each(function () {
if ($(this).attr("lang") == language)
$(this).show();
else
$(this).hide();
});
}
I use a simple selection:
<select onchange="select_language(this.options[this.selectedIndex].value)">
<option value="en" selected>English</option>
<option value="de">Deutsch</option>
</select>
Nowadays I would do it without jQuery. First I would hide all nodes with a lang attribute and show only the default language. This can be done in CSS:
[lang] {
display: none;
}
[lang=en] {
display: unset;
}
Without JavaScript enabled the document is not localized but at least readable in the default language.
Next I would use some JavaScript to show the correct language, if it is in the list of supported languages.
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';
});
}
}
You can either use a select box or the browser language.
localize(window.navigator.language);
Here's one way around this:
<!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>
I would suggest looking into a template engine for this problem. To me it's not exactly a backend but more of a grey area. Something like Moustache OR smarty would be perfect for you.
Simply put, i agree with the other posters that this is not reasonable to achieve on the client side.
You can use JavaScript to read the user language and show the right flag/content:
HTML:
<img id="myFlag" src="flag_default.png"/>
and some jQuery (since you tagged your question with jQuery):
var supportedLangs = ['de', 'en', 'cn'];
var userLang = navigator.language;
if($.inArray(userLang, supportedLangs) >= 0){
$('myFlag').attr('src', 'flag_' + userLang + '.png');
}
hjsfiddle
Your webpage needs to understand what encoding it should be using when rendering Chinese characters:
<! -- NOTICE THE "charset=UTF-8" !!!! -->
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
</head>
Yes this is possible. Here is one way
Structure you HTML like this in your folders
/root
/Chinese
/English-American
index.html
The root folder would contain your page with the language selection and the Chinese and English-American will contain your language specific pages.
Now on index.html simply direct the user to the correct language folder and all links will reference the correct language folder
Easy answer: No, using a backend is the easiest and best way to accomplish this. Backend code is designed for dynamic content, which is what you want.
Hard answer: This is a way to do this without dividing up your pages into two directories. The problem is that you're going to have to use Javascript to generate your page content, and that's generally a bad idea. But you could use a javascript MVC library, plus ajax calls to content folders that pull in the text (you'd still have to have two directories for English and Chinese, but they would only contain content, not HTML). The thing is, there's multiple potential problems with this method that it's only worth using if you know your users will have a modern browser with javascript enabled.
If you want your page to be search engine friendly, you have to put both static version in the HTML. You can put them into two div and when user clicks on a flag you shows the correct div.
You can also use a template like Mustache to render content with JavaScript. Then you can write your non-localized content as a template and make localized content as variables.
Generally JS generating the code for you is not good. But, I did one POC for the same using underscore.js. The framework is having an "_template" function that helps us to replace all the keys in the HTML file. The function accepts the key value pair in JSON format.
Based on the language selected, load the corresponding JSON file and then pass it on to the _template function. This will replace all the keys.
加载中,请稍侯......
精彩评论