Проблема с google translate

@Igor701 · Регистрация: 04.02.2020

Студворк — интернет-сервис помощи студентам

Добрый день!

Подскажите как правильно встроить google translate на сайт в header что бы выпадал список с флагами и двузначным кодом языка.

Прописал такие скрипты в hader.hph

PHP
1
2
3
4
5
6
7
8
9
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/dist/css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="assets/dist/js/google-translate.js"></script>
    <script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>
</head>

Сделал google-translate.js

PHP
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
const googleTranslateConfig = {
    lang: "en",
};
 
function TranslateInit() {
 
    let code = TranslateGetCode();
    // Находим флаг с выбранным языком для перевода и добавляем к нему активный класс
    $('[data-google-lang="' + code + '"]').addClass('language__img_active');
 
    if (code == googleTranslateConfig.lang) {
        // Если язык по умолчанию, совпадает с языком на который переводим
        // То очищаем куки
        TranslateClearCookie();
    }
 
    // Инициализируем виджет с языком по умолчанию
    new google.translate.TranslateElement({
        pageLanguage: googleTranslateConfig.lang,
    });
 
    // Вешаем событие  клик на флаги
    $('[data-google-lang]').click(function () {
        TranslateSetCookie($(this).attr("data-google-lang"))
        // Перезагружаем страницу
        window.location.reload();
    });
}
 
function TranslateGetCode() {
    // Если куки нет, то передаем дефолтный язык
    let lang = ($.cookie('googtrans') != undefined && $.cookie('googtrans') != "null") ? $.cookie('googtrans') : googleTranslateConfig.lang;
    return lang.substr(-2);
}
 
function TranslateClearCookie() {
    $.cookie('googtrans', null);
    $.cookie("googtrans", null, {
        domain: "." + document.domain,
    });
}
 
function TranslateSetCookie(code) {
    // Записываем куки /язык_который_переводим/язык_на_который_переводим
    $.cookie('googtrans', "/auto/" + code);
    $.cookie("googtrans", "/auto/" + code, {
        domain: "." + document.domain,
    });
}

У меня на сайте помещена такая конструкция:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <!-- Header Menu -->
                                <ul class="dt-nav">
                                    <li class="dt-nav__item dropdown">
 
                                        <!-- Dropdown Link -->
                                        <a href="#" class="dt-nav__link dropdown-toggle" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                            <i
                                                class="flag-icon flag-icon-us flag-icon-rounded flag-icon-lg"></i><span>en-uk</span>
                                        </a>
                                        <!-- /dropdown link -->
 
                                    </li>
                                </ul>
                                <!-- /header menu -->

Как мне встроить туда правильно такой код?

PHP
1
2
3
4
5
6
7
8
<body class="page page_fix">
    <div class="language">
        <img src="images/lang/lang__ru.png" alt="ru" data-google-lang="ru" class="language__img">
        <img src="images/lang/lang__en.png" alt="en" data-google-lang="en" class="language__img">
        <img src="images/lang/lang__de.png" alt="de" data-google-lang="de" class="language__img">
        <img src="images/lang/lang__fr.png" alt="fr" data-google-lang="fr" class="language__img">
        <img src="images/lang/lang__pt.png" alt="pt" data-google-lang="pt" class="language__img">
    </div>

@vinikon · 04.02.2020, 16:34

тег body можно вставить только в единственное место сайта

HTML5
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>handle</title>
</head>
<body>

@Igor701 · 04.02.2020, 16:39 **[ТС]**

А что это дает?

Задача сделать выпадающий список с автоматическим переводом google

Но последний код с тегом боди это пример от атвтора кода, у него в примемере языки в столбик слева зафиксированы на старнице

@vinikon · 04.02.2020, 16:46

что такое тег body знаете? где он у вас в html коде? туда и вставляйте

@Igor701 · 04.02.2020, 16:48 **[ТС]**

Мне нужно в header переводчик и сделать список выпадающим, а не в столбик или в строку

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@Igor701 0 / 0 / 0 Регистрация: 04.02.2020 Сообщений: 3
	04.02.2020, 16:39 [ТС]
	А что это дает? Задача сделать выпадающий список с автоматическим переводом google Но последний код с тегом боди это пример от атвтора кода, у него в примемере языки в столбик слева зафиксированы на старнице 0

@vinikon 340 / 160 / 89 Регистрация: 16.01.2020 Сообщений: 771
	04.02.2020, 16:46
	что такое тег body знаете? где он у вас в html коде? туда и вставляйте 0

@Igor701 0 / 0 / 0 Регистрация: 04.02.2020 Сообщений: 3
	04.02.2020, 16:48 [ТС]
	Мне нужно в header переводчик и сделать список выпадающим, а не в столбик или в строку 0