Передо мной встала задача по обновлению текущего сайта одной компании, и в соответствии тренду выбор пал на landing page с поддержкой мультиязычности.
Посмотрев на реализации представленные в интернете я ужаснулась. В теле страницы куча текста! С такой разметкой же невозможно работать. А если надо поменять информацию? Это надо лезть в html, искать нужное, и менять в нескольких местах. Короче ужас! И я подумала что хорошо бы использовать базу данных, но это же обычная страница, и разворачивать ради нее целый сервер? и базу? как то перебор! Работая с Angular2 я подумала что было бы классно с его помощью создать страницу, но он очень тяжелый, и не подходит… И тут я вспомнила о его аналоге Vue.js. Легкая библиотека, для создания приложений. Я подумала: "А почему бы не создать сайт с помощью vue и добавить имитацию базы?".
Обдумав все за и против, посмотрев на другие подходы, мне захотелось внести немного "красоты" в html верстку.
Для объяснения подхода я решила сделать небольшую страничку, потому что выкладывание полного кода существующей страницы считаю слишком "тяжелым".
Но пришлось все равно разбивать статью на 2ве части, тут описывается только подготовка небольшой страницы и добавление меню для смены языка.
Итак, начнем!
Создадим папку в которой будем работать, далее в ней создадим папку "css" и туда добавим соответственно файл с нашими классами для странички: "style.css"
#main{ height:100%; width:100%; position:absolute; top:0; right:0; opacity:1; } #wrapper{ float:left; width:100%; height:100%; position: relative; z-index:4; } .content-holder{ vertical-align: top; float:left; width:100%; position:relative; height:100%; left: 0; top: 0; right: 0; z-index: 2; } <---------------header---------------> header { position: fixed; width: 100%; z-index:22; top:0; left:0; background:rgba(255,255,255,1); box-shadow: 0 0 10px rgba(0,0,0,.1); } .transition{ -webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; -o-transition: all 500ms linear; -ms-transition: all 500ms linear; transition: all 500ms linear; } .tr-header{ background:rgba(255,255,255,0.0); border-bottom:1px solid rgba(255,255,255,0.4); } header.tr-header.sticky { background:rgba(255,255,255,1); box-shadow: 0 0 10px rgba(0,0,0,.1); } .header-height-emulator { float: left; width: 100%; position: relative; z-index: 1; } .container{ width:92%; max-width:100%; margin:20px auto; position: relative; zoom:1; z-index:3; } .nav-holder { display: flex; flex-wrap: wrap; flex-direction: row-reverse; position: relative; top: 0; left: 0; width: 100%; } .scroll-nav { float:right; } .scroll-nav li { display:inline-block; } .scroll-nav li a { background: #6dc77a; float: left; border-radius: 25px; padding: 10px 22px; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #fff; border:2px solid rgba(255,255,255,0); -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .scroll-nav li a:hover , .scroll-nav li.actscroll a { border:2px solid rgba(255,255,255,1.0); } <---------------end header--------------->
Далее создаем index.html(в основной папке) со следующим кодом:
<head> <!--=============== basic ===============--> <meta charset="UTF-8"> <title> My Company</title> <!--=============== css ===============--> <link rel="stylesheet" type="text/css" href="css/style.css" media="all"> </head> <body> <!--================= main start ================--> <div id="main"> <div id="wrapper"> <div class="content-holder"> <!--================= Header + Scroll navigation ================--> <header class="transition tr-header" id="header"> <div class="container"> <div class="nav-holder"> <nav class="scroll-nav"> <ul> <li class="actscroll"><a href="#sec1">Главная </a></li> <li><a href="#sec2">О нас</a></li> <li><a href="#sec3">Наша продукция</a></li> <li><a href="#sec4">Наши технологии</a></li> <li><a href="#sec5">Где приобрести</a></li> <li><a href="#sec6">Поддержка</a></li> <li><a href="#sec7">Партнеры</a></li> <li><a href="#sec8">Контакты</a></li> </ul> </nav> </div> </div> </header> <!-- End header --> </div> </div> </div> </body> </html>
Для красоты скачаем любую картинку, и добавим ее в новую папку "images". И разместим ее вверху страницы.
<body> <!--================= main start ================--> <div id="main"> <div id="wrapper"> <div class="content-holder"> <!--================= Header + Scroll navigation ================--> <header class="transition tr-header" id="header"> ............ </header> <!-- End header --> <!--================= Photo home ================--> <section class="is_overlay page-title-bg" id="sec1" name="sec1"> <div class="bg bg-parallax run-par2" style="background-image: url(images/paraplan.jpg) "></div> <div class="overlay over-op6"></div> </section> <!-- section end --> </div> </div> </div> </body> </html>
И соответствующие классы в "style.css"
<---------------photo home---------------> .page-title-bg { padding:250px 0; color:#fff; overflow:hidden; } .bg { position:absolute; top:0; left:0; width:100%; height:100%; background-size: cover; background-attachment: scroll; background-position: center; background-repeat:repeat; } .is_overlay{ position: inherit; display: block; width: 100%; height: 100%; } .overlay { position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; background:#292929; opacity:0.4; } .over-op6 { opacity:0.6; } <---------------end photo--------------->
Следом создаем еще одну папку "scripts".
Я предпочитаю скачивать файлы библиотек, поэтому я скачала Jquery.min и поместила его в папку "scripts".
Так же для создания меню выбора языков, я скачала круглые иконки с флагами стран (в данном случае мне понадобилось всего 2ве иконки) которые я разместила в новой папке "flags".
И создала классы которые содержат данные иконки, чтобы не путаться я добавила еще один css файл, в соответствующуюю папку. "multilanguage.css"
.flag { width: 2rem; height: 2rem; margin-right: 1rem } .flag-ru { background-image: url(../flags/russia.svg); } .flag-us { background-image: url(../flags/united-states-of-america.svg); } .flag:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .select-flag { -webkit-filter: brightness(205%); filter: brightness(205%); } .lang-dropdown { margin-right: 2rem } .flag-with-menu { display: flex; flex-direction: row; } .lang-menu { z-index: 1; position: absolute; background-color: var(--dark-element-color); border-radius: 8px; padding: 0.5rem; margin-top: 0.5rem; } .lang-first-init { display: none !important; }
Эти все классы описывают наше языковое меню.
Не забываем подключать новые файлы к странице!!!
<link rel="stylesheet" type="text/css" href="css/multilanguage.css" media="all">
Добавим наше меню на страницу в хедер.
<header class="transition tr-header" id="header"> <div class="container"> <div class="nav-holder"> <nav class="scroll-nav"> ....... </nav> <div class="lang-dropdown"> <div class="flag-with-menu" id="flag-menu"> <div class="flag flag-ru" lang-value="ru-RU"></div> </div> <div id="lang-menu" class="lang-menu lang-first-init"> <div class="flag flag-us" lang-value="en-US"></div> </div> </div> </div> </div> </header>
И так же классы анимации в "multilanguage.css"
.animation-lang-show { overflow: hidden; animation: 0.8s ease showBlock; } @keyframes showBlock { from { max-height: 0px; padding-bottom: 0rem; padding-top: 0rem; } to { max-height: 20rem; } } .animation-lang-hide { animation-timing-function: linear; animation-name: hideBlock; animation-duration: 0.5s; animation-fill-mode: forwards; overflow: hidden; } @keyframes hideBlock { from { max-height: 20rem; } to { display: none; height: 0px; max-height: 0px; padding-bottom: 0em; padding-top: 0rem; margin-top: 0em; padding-left: 0em; margin-bottom: 0em } }
Теперь займемся описание этого меню в JS.
Я буду давать максимально полные комментарии, на случай если кто то не понимает.
В папке "scripts" создаем новый файл "cookie.js"
В нем будет всего два метода: Сохранить куки и Взять куки с нужным именем
function setCookie(key, value) { var expires = new Date(); expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000)); document.cookie = key + '=' + value + ';expires=' + expires.toUTCString(); } function getCookie(key) { var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); return keyValue ? keyValue[2] : null; }
Подключаем данный файл на странице!
<script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/cookie.js"></script>
Создаем файл который будет отвечать за работу нашего меню.
В папке "scripts" создаем новый файл "multilanguage.js"
$(document).ready(function () { var language = navigator.language || navigator.browserLanguage; //определяем язык браузера var userLanguage = getCookie("language") || language; //проверяем, есть ли нами записанные куки с выбранным языком, для этого устройства. На случай если человек не первый раз на нашей странице var isMenuClicked = false; var menu = $('#lang-menu'); //после мы часто будем к нему обращаться, поэтому добавляем в переменную replaceElementAndSelect(userLanguage); //делаем замену иконки, на выбранный язык или язык браузера //регистрируем клик по нашему флажку $("#flag-menu").click(function () { isMenuClicked = true; showOrHideMenu(); }) //добавляем метод для определения показывать или скрывать меню function showOrHideMenu() { if (menu.hasClass('lang-first-init')) { menu.removeClass('lang-first-init'); menu.addClass('animation-lang-show'); } else { if (menu.hasClass('animation-lang-show')) { hideMenu(); } else { showMenu(); } } } //добавляем методы для показа и скрытия меню function showMenu() { menu.removeClass('animation-lang-hide'); menu.addClass('animation-lang-show'); } function hideMenu() { menu.removeClass('animation-lang-show'); menu.addClass('animation-lang-hide'); } //регистрируем клик по флагу $(document).on('click', '.flag', function () { if (!isMenuClicked) { // проверяем открыто меню или нет var newLang = $(this).attr('lang-value'); //берем новое значение языка language = newLang; setCookie("language", language); //записываем для будущего использования languageChange(newLang); //меняем язык hideMenu(); } isMenuClicked = false; }); //тут происходит смена языка и самое главное мы отправляем эвент что была нажата кнопка смены языка, и его мы можем отловить в других скриптах function languageChange(lang) { replaceElementAndSelect(lang); $(document).trigger('onLanguageChange', [lang]); } function replaceElementAndSelect(lang) { var element = ".flag[lang-value='" + lang + "']"; // подставляем выбранное значение языка var selectLang = $(element).clone(true); //копируем элемент var defoultElement = $('.flag-with-menu').find('.flag').clone(true); // ищем выбранный элемент в меню //меняем наши элементы местами $(element).replaceWith(defoultElement); $('.flag-with-menu').find('.flag').replaceWith(selectLang); //удаляем класс подсвечивающий выбранный язык $('.lang-dropdown').children().children().removeClass('select-flag'); $(element).addClass('select-flag'); } })
Подключаем данный файл на странице!
<script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/cookie.js"></script> <script type="text/javascript" src="scripts/multilanguage.js"></script>
Вернемся к нашей странице.
Добавим несколько секций с любым текстом. Я для примера добавлю одну, чтоб сэкономить место:
<div class="content-holder"> <!--================= Header ================--> <header class="transition tr-header" id="header"> .......... </header> <!-- End header --> <!--================= Photo home ================--> <section class="is_overlay page-title-bg" id="sec1" name="sec1"> ........ </section> <!-- section end --> <section class="align-text" id="sec2" name="sec2"> <div class="content"> <div class="container"> <div class="row"> <div class="col-md-6 "> <h3>Заголовок о нашей компании</h3> <div class="clearfix"></div> <div class="separator color-separator flt-l"></div> <div class="clearfix"></div> <p>«Хабрахабр» — крупнейший в Европе ресурс для IT-специалистов, издаваемый компанией «ТМ». С момента появления в 2006-м году «Хабр» трансформировался из небольшого отраслевого сайта в глобальную профессиональную площадку, которую ежемесячно посещают более 8 миллионов уникальных пользователей. «Хабрахабр» одинаково интересен программистам и разработчикам, администраторам и тестировщикам, дизайнерам и верстальщикам, аналитикам и копирайтерам, а также всем тем, для кого IT — это не просто две буквы алфавита. Расширение тематики «Хабра» дало начало сайту-спутнику — Geektimes, на который переехали непрофильные хабы и значительная часть контента, не имеющего непосредственного отношения к разработке и программированию.</p> </div> <div class="col-md-6 "> <h3>Заголовок: Наша миссия</h3> <div class="clearfix"></div> <div class="separator color-separator flt-l"></div> <div class="clearfix"></div> <p>Данный сайт представляет собой платформу для информационного обмена между участниками пользовательского сообщества. Сообщество пользователей сайта является саморегулируемым, поэтому разобраться во всех нюансах работы проекта с первого раза получается далеко не у всех. Чтобы объяснить, как всё устроено, мы подготовили данный справочный раздел. Справа представлен рубрикатор справочного раздела. Для получения разъяснений выберите соответствующий пункт рубрикатора и ознакомьтесь с предложенной информацией. Если вам не удалось найти ответ на интересующий вопрос, пожалуйста, воспользуйтесь формой обратной связи.</p> </div> </div> </div> </div> </section> </div>
И добавляем несколько классов в "style.css"
<---------------section--------------- > .align-text { text-align: left; } .align-text p , .align-text .separator{ float:left; } .align-text h3 { font-size:16px; text-transform:uppercase; font-family: 'Montserrat', sans-serif; color:#666; padding-bottom:20px; } section { float:left; width:100%; padding:50px 0; position:relative; z-index:12; background:#fff; } .col-md-6 { padding-left: 0px; padding-right: 0px; } <---------------section--------------- >
Вот и все! Мы наконец подготовили нашу страницу для самого интересного! Как это все представить более красиво и сделать смену языка без перезагрузки станицы.
