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

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

19 голосов
/ 23 сентября 2011

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

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

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

Ответы [ 11 ]

25 голосов
/ 11 мая 2013

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

Вот один из способов обойти это: 

<!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 голосов
/ 09 октября 2017

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

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

 <! -- NOTICE THE "charset=UTF-8" !!!! -->
<head>    
    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
</head>
1 голос
/ 02 декабря 2011

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

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

1 голос
/ 23 сентября 2011

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

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

1 голос
/ 23 сентября 2011

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

0 голосов
/ 08 июля 2016

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

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

Напишите 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

0 голосов
/ 20 февраля 2014

Обычно JS-код для вас не годится.Но я сделал один POC для того же самого, используя underscore.js .Фреймворк имеет функцию _template, которая помогает нам заменить все ключи в файле HTML.Функция принимает пару ключ-значение в формате JSON.

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

0 голосов
/ 24 сентября 2011

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...