Выбор языка на сайте

385

20 октября 2017, 13:12

Делаю сайт на html без шаблона по такой схеме:

В корне сайта лежит index.html и две папки, en и ru, с английской и русской версиями сайта соответственно.
index.html, который в корне, у них общий и в него встроен код переключателя языка взятый из ответа на вопрос «Переключатель языков на JQ». Этот код работает замечательно/ Я только подключил картинки флагов, вместо текстовых ссылок.

Вот код index.html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>R2FBT amateur radio station</title>
<meta name="keywords" content="amateur, radio, station" />
<meta name="description" content="Home page R2FBT" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bg">
<div id="main">
<!-- header begins -->
<div id="header">
<ul class="menu-main">
  <li><a href="index.html" class="but_t"  title="">HOME</a></li>
  <li><a href="biography.html" class="but" title="">BIOGRAPHY</a></li>
  <li><a href="eqipment.html"  class="but" title="">EQIPMENT</a></li>
  <li><a href="qsl.html"  class="but" title="">QSL</a></li>
  <li><a href="logbook.html" class="but" title="">LOGBOOK</a></li>
  <li><a href="dx_cluster.html" class="but" title="">DX CLUSTER</a></li>
  <li><a href="rbn_map.html" class="but" title="">RBN map</a></li>
  <li><a href="rbn_graph.html" class="but" title="">RBN on graph</a></li>
  <li><a href="products.html" class="but" title="">PRODUCTS</a></li>
  <li><a href="contacts.html" class="but" title="">CONTACTS</a></li>
</ul>
<script src="/r2fbt.ru/logbook/js/jquery-1.7.2.js" type="text/javascript">
</script>
<ul class="language-select"> 
  <li class="active" data-lang="en" style="background: url('images/en.png') no-repeat left center;"></li>
 <li data-lang="ru" style="background: url('images/ru.png') no-repeat left center;"></li> 
</ul>
<script>
$('.language-select').click(function(){
$(this).toggleClass('open');
})
$('.language-select li').click(function(){
var setLang = $('.language-select').data('location'),
dataLangSelect = $(this).data('lang')
  $('.language-select').data('location', dataLangSelect);
  $('.language-select li').removeClass('active');
  $(this).toggleClass('active');
})
</script>

Вопрос заключается в том, как подключить данный скрипт к сайту, чтобы при выборе например английского языка в меню подставлялся путь к английским страницам:

<li><a href="/r2fbt.ru/en/biography.html" class="but" title="">BIOGRAPHY</a></li>

а при выборе русского языка — к русским страницам:

<li><a href="/r2fbt.ru/ru/biography.html" class="but" title="">BIOGRAPHY</a></li>

Answer 1

Можно положить код языка в куку или localStorage и потом вставлять в ссылки. В такие ссылки можно ложить "шаблон" аля /r2fbt.ru/---lang---/biography.html и потом по загрузке страницы заменить шаблон примерно вот так:

var lang = 'ru';
$('a').each(function(i, el) {
    el.href = el.href.replace('---lang---', lang);
});

Так делать плохо, неправильно и лучше использовать либо серверную генерацию страниц уже с языком, либо какой-нибудь современный framework аля ReactJS или Angular. Но как временное решение, возможно, подойдет.