Передо мной встала задача по обновлению текущего сайта одной компании, и в соответствии тренду выбор пал на 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--------------- > Вот и все! Мы наконец подготовили нашу страницу для самого интересного! Как это все представить более красиво и сделать смену языка без перезагрузки станицы.
Комментарии (36)
DreaMinder
19.02.2018 17:32+3Можете, пожалуйста, уточнить, в чем посыл
статьисерии статей?
Надеялся увидеть красивое применение Vue.js (а скорей Nuxt.js) в качестве подобия статического генератора, создание переиспользуемых компонентов которые берут данные из markdown-файлов…
А получил примеры верстки хтмл\цсс (в чем ее полезность в рамках статьи?) и jquery скрипты (зачем нужен jquery если есть vue.js?).
lissi4ka Автор
19.02.2018 17:33Поэтому она и называется: Часть 1. Все что будет связано с Vue будет в следующей части
argonavtt
19.02.2018 18:46+1Очень странная статья, прям с первого абзаца. Надо обновить сайт и выбор пал на lp. Может вы имели ввиду spa?
Samouvazhektra
19.02.2018 20:17В теле страницы куча текста! С такой разметкой же невозможно работать. А если надо поменять информацию? Это надо лезть в html, искать нужное, и менять в нескольких местах
А почему бы не создать сайт с помощью vue и добавить имитацию базы?Аж сгораю от любопытства, "имитация базы" на vue для редактирования контента — без сервера?
По теме — даже если на выходе всего одна страница — можно использовать пост-процессор html-include и в процессе работы все запчасти и кусочки держать в отдельных подшаблонах, готовую страницу сбилдит вебпак/парсел/ролап
Пример
noodles
19.02.2018 23:54Зачем в лендинг-пейдж тащить тонну скриптов — vue и jquery?
Можно же использовать шаблонизатор (например nunjucks/twig), вместо базы использовать json со строками на всех нужных языках. Gulp-ом или webpack-ом собрать статические странички соответственно языкам «инклюдя» туда нужные строки из «базы», например page-ru.html, page-en.html и т.д.
Чтоб seo-шники не нервничали по поводу дублирования контента, в head главной странички добавить link rel=«alternate» hreflang=«en» href=«page-en.html», и в head переведённой странички добавить link rel=«alternate» hreflang=«ru» href=«page-ru.html»
pepelsbey
20.02.2018 01:21Есть большая беда с вашей статьёй: уровень знания вёрстки, судя по коду, у вас довольно начальный или устаревший. Это даже не уровень хорошего новичка, которого возьмут на работу верстальщиком.
И нет ничего плохого, в том, чтобы быть новичком. А если вы не новичок, то знайте: в коде много ошибок и устаревшие подходы.
Как бы то ни было, вы радостно демонстрируете этот код в рамках наверняка очень полезной статьи. Но код плохой, я бы никому не рекомендовал делать что-то подобное.
Может быть когда вы перейдёте к части про Vue.js, я буду ошеломлён и повержен. Но сейчас это урок плохой вёрстки.
babylon
20.02.2018 02:31pepelsbey, вёрстки не так уж и много, чтобы назвать её плохой. Плохая/хорошая это технологические оценки крутого специалиста верстальщика? Покажите хорошую. Статья собственно не про это.
lissi4ka Автор
20.02.2018 10:22+1А где хороший?
А как надо писать?
Дайте примеры раз все так ужасноpepelsbey
20.02.2018 12:18Ну давайте разбираться. То, что я приведу ниже — это не повод поспорить (оправдаться) по каждому пункту, это общепринятые практики в современной вёрстке. Я её практикую сам и учу в рамках HTML Academy — это мой ответ на вопрос «а где научиться?»
1. Опасные селекторы:
#mainможет встречаться только один раз на странице, а значит никакой универсальности и сделать второй элемент с такими же стилями не получится. Плюс селектор по#idспецифичнее, а значит его будет сложно перебить. Напротив,headerможет встречаться несколько раз на странице, а вы к нему обращаетесь глобально, мол, вообще всеheaderна странице. Селектор.scroll-nav li aслишком зависит от структуры HTML, которая может и будет меняться.
#main { … } header { … } .scroll-nav li a { … }
Один из признаков того, что у вас проблемы с селекторами — это
!important, который сам по себе является антипаттерном.
.lang-first-init { display: none !important; }
Вывод: сегодня подавляющее большинство разработчики пишут селекторы вида
.mainи.header, это самое гибкое и удачное решение. Познакомьтесь с подходом БЭМ — это хорошая система именования классов и описания интерфейсов, которая сегодня мейнстрим в разработке интерфейсов.
2. Синтаксические ошибки: Это не CSS-комментарии (они выглядят так:
/* … */) и такой код ломает следующий за ним селектор, то есть все стили дляheaderне применятся.
<---------------header---------------> header { … }
Да, это «всего лишь пример в статье», но это показывает небрежность. Скопированный отсюда код сломается.
3. Префиксы: В одном месте вы пишете очень подробную батарею префиксов для свойства
transition, а в другом не пишете дляanimationи@keframes, притом, что кроссбраузерность уtransitionна поколение-два браузеров лучше, чем уanimation.
.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; } @keyframes hideBlock { … }
Уже года три верстальшики не пишут префиксы для браузерных свойств руками. Для этого используется Автопрефиксер, которому вы, при желании, можете скормить список браузеров, которые вы хотите поддерживать. Код с префиксами слишком раздувается, а их наличие — признак устаревшего кода и отсутствия шага сборки (оптимизации) этого кода.
4. Технологии вёрстки: Вы используете только флоаты
float: left, которые хоть и продолжают работать во всех браузерах, но уже пару-тройку лет как уступили место флексамdisplay: flex. Флексы гораздо удобнее: их не нужно клиарить, вертикальное выравнивание и колонки одинаковой высоты в них — ерундовое дело.
<div class="clearfix"></div>
Когда в коде есть
.clearfix, то этот код с душком: либо устарел код, либо навыки автора.
5. Лишние атрибуты: У вас вроде есть и
<nav>, и<header>, и даже пара заголовков<h3>— за что вам отдельное спасибо. Но есть места, где мусорные (ненужные) атрибуты показывают небрежность.
<link rel="stylesheet" type="text/css" href="css/style.css" media="all"> <link rel="stylesheet" href="css/style.css"> … <script type="text/javascript" src="scripts/jquery.min.js"></script> <script src="scripts/jquery.min.js"></script>
profesor08
20.02.2018 04:57Статья ни о чем. Если опустить вступление, то 98% статьи это листинг кода сомнительного качества.
babylon
20.02.2018 09:4596% населения вообще не умеют кодить. И что? Это лучше чем ничего. Никакого сомнительного кода я не увидел. Гораздо хуже использовать сомнительные алгоритмы. Но тут алгоритмов никаких нет. И код можно писать разными способами. Мне лично код понятен. Этого вполне достаточно.
lissi4ka Автор
20.02.2018 10:26-1Почему же все так подробно?
Да все дело в том, что когда я только начинала и натыкалась на статьи на хабре мне это казалось непонятным. «Добавим метод» — куда? почему? Ответ — это же и так понятно, тривиально. Вспоминая эти свои поиски нужной мне информации, я решила сделать более подробно чем привыкли тут.
Запомните если вы в этой сфере уже давно и вам все понятно, то есть много начинающих разработчиков которые этого могут не понимать
Ну а раз тут все написано неправильно, прошу вас выложить переделанный данный код в «Правильном и современном» варианте
AlexVoin
20.02.2018 10:28Меня очень пугают сайты, где начинают мешать jquery и vue. Ненадо так делать…
lissi4ka Автор
20.02.2018 10:30-1а что у нас Vue использует какой то другой язык? А, он наверно на CSS написан? Или как? А создаете Vue компонент вы наверно прямо в HTML? Скрипты при этом не используются?
Vue это не более чем обертка для более быстрого и красивого написания того же кодаAlexVoin
20.02.2018 10:35Что значит использует какой-то другой язык? Jquery не используется во вью. Когда пишут для вью библиотеку и по факту она является просто оберткой Jquery, то от такой библиотеки надо бежать и не оборачиваться, а вы собственноручно (!) пытаетесь засунуть сюда Jquery. Jquery мощная либа, но она ушла в прошлое. Почему? Потому что очень затратная по времени и ресурсам и на место ее пришли «реактивные» react, angular, vue. И ключевое здесь «вместо», а не «вместе».
Решая использовать один из этих реактивных «фронт-енд фреймворков», первым делом забудьте про Jquery. Не можете забыть? Не используйте фремворки
staticlab
20.02.2018 11:12Ну так и вместо этого jquery-кода будет лучше поставить "более быстрый и красивый" код на vue.
babylon
20.02.2018 11:19lissi4ka, на самом деле вам советуют уже проверенные подходы, не требующие холивара. Вы против более технологичного быстрого написания красивого кода? Нет? Тогда к чему эти вопросы.
Buggytheclown
20.02.2018 10:38Лучше иметь один источник состояния или модель, или (простите) ДОМ.
$("#flag-menu").click(function () { isMenuClicked = true; showOrHideMenu(); })
Вместо addClass('show') + removeClass('hide') в If'ах можно попробовать toggleClass('show'), изначально элемент спрятан.
tuxx
20.02.2018 11:02Зачем jQuery и Vue.js вместе? Это было бы обосновано если бы был постепенный перевод уже давно работающего сайта с jQuery на Vue, но использовать их вместе с нуля дикая тупость.
staticlab
Пожалуйста, не надо так!
У вас Landing page, но вы хотите динамический контент без серверного рендеринга. Будет ли сайт корректно индексироваться в поисковиках?
lissi4ka Автор
Я не очень хорошо знакома с роботами, но они ведь заходят на сайт по ссылке, значит запускают все скрипты, которые и делают подмену текста, я планирую за завтра написать вторую часть где оставшаяся часть будет расписана
Crysdd
Не индексируют они скрипты. На примере комментариев от дискуса. Или там сделано иначе?
Akuma
Если бы все было так круто, веб бы изменился в течение часа.
Но нет. Поисковики не запускают JS. Пытаются потихоньку, но пока особо нет результатов.
Впрочем, лендинг и не рассчитан на индексацию. Он рассчитан на рекламные каналы, которым наплевать на индексацию.
esc
Если зайти через консоль вебмастера Гугла на сайт, где контент загружается через JS и посмотреть на страницу «глазами» робота, то видно, что js они запускают. И после появления node.js, наверное, все более-менее приличные боты JS стали уметь.
Другое дело — как такой текст ранжируется. Но тут только СЕОшники подскажут, т.к. надо на практике сравнивать.
Akuma
Верно, не так выразился. Запускать то они его запускают, но вот я не видел пока ни одного JS-сайта, который бы хорошо ранжировался без дополнительных плясок с бубном.
Хотя я надеюсь, что это лишь вопрос времени. Самому надоело думать об индексации при написании более-менее сложного функционала сайта.
ermolaevalexey
Не очень понятно, почему «после появления node.js, наверное все более-менее приличные боты JS стали уметь», как это связано. Node — это серверная платформа, которая просто использует js как язык для разработки. Сервер отдаёт уже готовые html страницы, которые и индексируется поисковиками. Было бы удивительно, если бы поисковые боты могли читать js на сервере.
esc
Потому, что раньше, чтобы получить контент, который генерируется на js, надо было писать интерпретатор js и прикручивать его к парсеру html.
А node.js + headless chromium позволили в «3 строчки» писать ботов, которые сразу и html отлично парсили и js умели исполнять аналогично тому, как это делают браузеры.
Ну, точнее, это больше заслуга headless chomium, но именно node.js дает ту инфраструктуру, которая позволяет запускать это все «тремя строками» и открыла возможность писать полнофункциональные парсеры страниц даже школьникам.
node в данном случае — инфраструктура для ботов, сайт может быть на чем угодно написан. Для бота это все равно html+css+js
babylon
Вы не поверите у меня есть лендинг без рекламы.
Akuma
У меня тоже :) Был. Потом я переделал его в полноценный сайт и дела пошли гораздо лучше.
sidny_vicious
Google и Yandex уже неплохо индексируют SPA и с основным содержимым хорошо справляются.
staticlab
Да, но у автора ещё переключение языков.
lissi4ka Автор
Новость от 2015 года