среда, 2 августа 2017 г.

Еще раз о многоязычном сайте на Blogger

Multilanguage Posts in Blogger

A common use-case is the one where we want to broadcast multiple language content on a blog.

Blogger itself does not provide such a facility, but I'm here presenting a javascript hack which allows posts to be written in multiple languages, and have flags on top of the page to switch among them.

First of all, you have to write within a single post a different version for every language which you want to support. To do this, you must first set the correct environment. When editing a post, you should switch to HTML view first:


Then, suppose you are writing content in Italian and English, you should add this skeleton:

?
1
2
3
4
5
6
<div class="lang:italian">
Questo è del contenuto in Italiano
</div>
<div class="lang:english">
This is English content
</div>
Then, switching back to Compose mode will show you the two sentences. Replace them with the actual content you want to display in your blog post.

Then, go to the Layout Editor of your blog and add a new HTML/JavaScript block on top of your blog posts:



Enter there the following code:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script language="Javascript">
function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
                node = document;
        if ( tag == null )
                tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
        for (i = 0, j = 0; i < elsLen; i++) {
                if ( pattern.test(els[i].className) ) {
                        classElements[j] = els[i];
                        j++;
                }
        }
        return classElements;
}
 
function show_en() {
        var it = getElementsByClass('lang:italian', null, null);
        var en = getElementsByClass('lang:english', null, null);
 
        for(i = 0; i < it.length; i++) {
                it[i].style.display = 'none';
        }
 
        for(i = 0; i < en.length; i++) {
               en[i].style.display = 'block';
        }
}
 
function show_it() {
        var it = getElementsByClass('lang:italian', null, null);
        var en = getElementsByClass('lang:english', null, null);
 
        for(i = 0; i < it.length; i++) {
                it[i].style.display = 'block';
        }
 
        for(i = 0; i < en.length; i++) {
               en[i].style.display = 'none';
        }
}
 
</script>
 
 
<a href="#" onclick="show_en();"><img src="PATH-TO-EN-FLAG" /></a>
<a href="#" onclick="show_it();"><img src="PATH-TO-IT-FLAG" /></a>

This adds at the top of you posts two flag images, which can be clicked, showing either italian or english content. Now, the last bit of editing entails activating either language as the default one (otherwise, you will see both languages, until one of the two flags is clicked).

To do so, open you Blog's model editor and click "Edit HTML".


A popup telling you about the dangers of this operation will show up. Tell blogger to take it easy, and start editing your model. You should find the <body> tag, and add the following attribute in it:
?
1
onload='show_en();'

Selecting which is the default language which you want to display.

For a live preview of how this works, point your browser to CranEntertainment's blog!


Описываю по порядку, как и в данном посте.

Например, я хочу, чтобы блог был на английском и русском языках. 

1 Создаем новый пост, и выбираю кнопку HTML (которая в левом верхнем углу рядом с кнопкой создать), чтобы в редакторе сообщения отражалась его кодировка.


2 Вставляем в сообщение следующий код :

  Код:
<div class="lang:russian">
Это русский текст
</div>
<div class="lang:english">
This is English content
</div>


Где "Это русский текст" - русский текст, а "This is English content" - английский текст (К.О)

3 Снова переключаем редактор нашего поста из режима HTML в визуальный режим (нажимаем кнопу создать в левом углу над полем редактора). Мы видим два предложения: "Это русский текст" и "This is English content". Выделяем эти предложения по очереди и вместо них вставляем заранее написанные и разбитые на абзацы тексты (оригинал и перевод). Клавишей Enter работать не нужно - английская версия будет стоять впритык к последнему абзацу русского текста - это нормально. 

4 Сохраняем сообщение. Переходим в раздел Дизайн и добавляем гаджет HTML/JavaScript (лучше в самом видном месте - это будут наши кнопки для переключения между языками). Например, назовет этот гаджет Языки/ Languages . Вставляем в содержание следующий код:

  Код:
<script language="Javascript">
function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
                node = document;
        if ( tag == null )
                tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
        for (i = 0, j = 0; i < elsLen; i++) {
                if ( pattern.test(els[i].className) ) {
                        classElements[j] = els[i];
                        j++;
                }
        }
        return classElements;
}

function show_en() {
        var ru = getElementsByClass('lang:russian', null, null);
        var en = getElementsByClass('lang:english', null, null);

        for(i = 0; i < ru.length; i++) {
                ru[i].style.display = 'none';
        }

        for(i = 0; i < en.length; i++) {
               en[i].style.display = 'block';
        }
}

function show_ru() {
        var ru = getElementsByClass('lang:russian', null, null);
        var en = getElementsByClass('lang:english', null, null);

        for(i = 0; i < ru.length; i++) {
                ru[i].style.display = 'block';
        }

        for(i = 0; i < en.length; i++) {
               en[i].style.display = 'none';
        }
}

</script>


<a href="#" onclick="show_en();"><img src="[b]ссылка на иконку английского флага[/b]" /></a>
<a href="#" onclick="show_ru();"><img src="[b]ссылка на иконку российского флага[/b]" /></a>


В качестве картинок российского и английского флага заранее готовим иконки, заливаем их куда-нибудь в блог или на другой хостинг, и указываем соответствующие ссылки. Здесь все понятно. 

5 Сохраняем . В блоге появляется новый виджет "язык / language" - 2 кнопки с изображением флагов. В сообщении мы по прежнему видим два текста на русском и английском языках. При переключении кнопок отображается только одна версия. Чтобы исправить это, переходим в редактор шаблона. " Шаблон - Изменить HTML"

6 Через комбинацию клавиш ctr + F в коде шаблона находим тег <body ( На всякий случай рекомендуется сохранить резервную копию шаблона на компьютер) 

7 Вставляем в тег (отсутпив пробел от слова body) одну из следующих записей:

onload='show_ru();' - если мы хотим, чтобы по умолчанию в постах блога отображался русский текст


onload='show_en();' -если мы хотим, чтобы по умолчанию в постах блога отображался английский текст

8 Сохраняем шаблон

9 Проверяем. На страницах видим лишь одну версию текста. При переключении языка получаем его переведенный вариант.

Спасибо автору Alessandro Pellegrini. 

PS Как было сказано, мультиязычными можно сделать только сообщения (и может быть страницы). Но различные заголовки, названия гаджетов и страниц, название блога изменяться не будут.












0 коммент.:

Отправить комментарий