Как локализовать простую страницу HTML-сайта в моем случае?

Я НЕ разрабатываю любое приложение веб-службы, которое поддерживает клиентскую и серверную стороны (например, приложение Java EE или Ruby on Rails).

Вместо этого я просто разрабатываю HTML страницу сайта, на этой странице есть два изображения флага (США и Китай), которые используются в качестве языкового выбора страницы для пользователей.

Мне интересно, для этой отдельной разработки веб-страницы (без какой-либо бэкэнд-системы) существует эффективный способ реализации локализации страницы (отображающей страницу на другом языке) на основе флага выбор от пользователя?

ОТВЕТЫ

Ответ 1

Вы можете использовать стандартный атрибут 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>

Ответ 2

Здесь один из способов:

<!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>

Ответ 3

В настоящее время я бы сделал это без 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);

Ответ 4

Вы можете использовать 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

Ответ 5

Легкий ответ: Нет, использование бэкэнд - это самый простой и лучший способ добиться этого. Код backend предназначен для динамического контента, который вы хотите.

Жесткий ответ: Это способ сделать это, не разделяя ваши страницы на два каталога. Проблема в том, что вам придется использовать Javascript для генерации содержимого вашей страницы, и это, как правило, плохая идея. Но вы можете использовать javascript MVC-библиотеку, а также призывы ajax к папкам содержимого, которые тянут текст (вам все равно придется иметь два каталога для английского и китайского языков, но они будут содержать только контент, а не HTML). Дело в том, что существует несколько потенциальных проблем с этим методом, которые стоит использовать, если вы знаете, у ваших пользователей будет современный браузер с включенным javascript.

Ответ 6

Я бы предложил изучить механизм шаблонов для этой проблемы. Для меня это не совсем backend, а больше серой области. Что-то вроде Усы ИЛИ smarty было бы идеально для вас.

Проще говоря, я согласен с другими плакатами, что это не разумно достичь на стороне клиента.

Ответ 7

Ваша веб-страница должна понимать, какую кодировку она должна использовать при визуализации китайских символов:

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

Ответ 8

Да, это возможно. Вот один из способов:

Структура вашего HTML, как это в ваших папках

/root
  /Chinese
  /English-American
  index.html

Корневая папка будет содержать вашу страницу с выбором языка, а китайцы и англо-американцы будут содержать ваши страницы, специфичные для вашего языка.

Теперь на index.html просто направьте пользователя в правильную языковую папку, и все ссылки будут ссылаться на правильную языковую папку

Ответ 9

Если вы хотите, чтобы ваша страница была дружественной к поисковой системе, вам нужно поставить статическую версию в HTML. Вы можете поместить их в два div, и когда пользователь нажимает на флаг, вы показываете правильный div.

Вы также можете использовать шаблон, например Mustache, чтобы отображать содержимое с помощью JavaScript. Затем вы можете написать свой нелокализованный контент в качестве шаблона и сделать локализованный контент как переменные.

Ответ 10

Как правило, JS, генерирующий код для вас, не очень хорош. Но я сделал один POC для того же, используя underscore.js. Структура имеет функцию "_template", которая помогает нам заменить все ключи в файле HTML. Функция принимает пару значений ключа в формате JSON.

На основе выбранного языка загрузите соответствующий файл JSON, а затем передайте его функции _template. Это заменит все клавиши.

Ответ 11

Я прочитал ответ ceving, а затем написал JS-библиотеку languages.js для этого.

Я изменяю последовательность <title> s 'на разных языках, поэтому он работает, если вы хотите переключить lang в заголовок страницы.

Напишите HTML следующим образом:

<html>
  <head>
    <title lang="en">Test Page</title>
    <title lang="zh-cmn-Hans">测试页面</title>
    <title lang="ja">テストページ</title>
    <title lang="miaw">miaw miaw miaw</title>
  </head>
  <body>
    <div lang="en" style="display:block;">Why does the sun rise? Why does the moon shine?</div>
    <div lang="zh-cmn-Hans">太阳为什么会升起？月亮为什么会发光？</div>
    <div lang="ja" style="display:inline">太陽はなんで昇る?月はなぜ輝く？</div>
    <div lang="miaw" style="display:inline">miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw</div>
  </body>
</html>
<script src="https://raw.githubusercontent.com/MuromiU/JS/master/src/languages.js"></script>

Использование:

Languages.select(lang);

Подробнее: github readme