Территория интернета улучшается с каждым днём. Из года в год множится популяция деловых сайтов. Кроме традиционных корпоративных html-страничек, к числу деловых ресурсов уже давно относят и интернет-магазины, а подчас даже простейшие сайты-витрины.

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

Но деловому сайту такой охват возможностей очередной продемонстрированной "плюшки" скорее всего не нужен, поэтому какие-то элементы концепта можно отсечь, что-то сделать по-своему дабы не было откровенным плагиатом. А значит ...

Давайте устроим урок

То есть побудем в роли вебмастера. Попробуем воспроизвести на странице своего сайта или интернет-магазина нечто похожее на ленту публикаций как в сервисе Яндекс.Дзен - это такая платформа, где популярные авторы и порталы могут размещать анонсы своих публикаций для многомиллионной читательской аудитории Яндекса.

Как выглядит исходная лента публикаций, то показано на следующем скриншоте. Симпатично - по 3 публикации (карточки) в ряд, некоторые ряды содержат широкую и обычную карточку, фотография сверху или справа на широких карточках, фото плавно вливается в фон карточки, а цвет фона подобран по общему тону фото. Каждая карточка кликабельна с переходом на сайт её автора. В углу карточки указан автор и в другом углу - иконочные кнопки "Нравится/Нет". При прокрутке страницы вниз, лента бесконечно дополняется новыми карточками.

Яндекс.Дзен »

Кстати, покрутив ленту публикаций, вы можете заметить, что между привычных карточек периодически вставляется реклама под видом похожей карточки, например некий товар с Яндекс.Маркета. Эту идею мы и возьмём на вооружение, собрав в нашем уроке подобную Дзен-ленту, но только из товаров.

Как подойдём к делу

Мы не станем распарывать (на жаргоне вебмастеров - рипать) страницу Яндекс.Дзен, так как яндексоидная html-разметка весьма "грязная" с точки зрения чистоты кода, то есть содержит массу ненужных деловому сайту технических вкраплений, обусловленных многозадачной разработкой в Яндексе.

Наша задача попроще, мы срисуем страницу на глазок, с весьма грубой детализацией - и по стилям, и по шрифтам, и по графике, и по функциям. Однако результат будет смотреться прилично по меркам мелкого в сравнении с Яндексом делового сайта. Скриншот и ссылка на живую демонстрацию представлены следом (текстовка карточек взята "с потолка").

Живое демо »

и вот пример без раскраски фона
с другим набором фотографий

Ну а если хотите получить идеальное соответствие вашему представлению о дизайне, наймите опытного css-дизайнера (веб-стилиста), он сделает на карточках нужный контраст, найдёт правильные шрифты, перекрасит ваш макет хоть до точного подобия внешнего вида карточек тем дизайнерским эскизам, которые нарисует нанятый вами редизайнер. Я лишь стремился показать пример перечерчивания чьего-то функционала с минимальной затратой времени. Просто для того, чтобы вы понимали, как это делают.

Приступаем

Итак, на работу по сборке собственного Дзена нам понадобится час в режиме вечернего (спокойного) обучения и потому наш урок, а также тот удивительно простой макет страницы, который изготовим на этом уроке, назовём Вечерний Дзен.

Ниже я опишу весь процесс создания макета по шагам. Для удобного чтения выделю каждый шаг в отдельный пост. Макет нашей Дзен-страницы создадим на платформе Impera CMS как вполне пригодной для новичков. Если у вас на сайте ещё не было такого движка, но хотите потестировать - что за системка такая, тогда нужно:

• скачать установочный архив
• распаковать на компьютер
• скопировать получившиеся 2 файла на свой сайт
• открыть страницу http://ваш.сайт/install.php
• следовать по 5 шагам процесса установки.

Так как эта бесплатная CMS относится к движкам сайта с элементарной системой шаблонизации (макетирования), то если уж возникнет необходимость повторить подобный макет на каком-то ином движке, вы сможете переделать макет и на другие известные платформы, с которыми работаете ещё, например WordPress.

Шаг 1 - создаём абстрактную страницу

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

Во-вторых, каждая страница сайта всё равно имеет некий тип и генерируется по какому-то макету из шаблона, сопоставленному такому типу страниц.

В имперских шаблонах, собранных на основе бесплатной библиотеки ShortCodes Helper, вдобавок к базовым типам существует тип так называемых абстрактных страниц - их не нужно заводить в базу данных сайта, они появляются по своим адресам простым размещением одноимённого макета в соответствующей папке шаблона (я пометил эту папку красным цветом).

Справа на примере структуры шаблона я показал зелёным цветом те файлы, которые добавил в папку шаблона на первом шаге. Это стилевой файл будущей Дзен-страницы, макет её разметки и скриптовый файл. Сначала все эти файлы пустые, а их содержимое я опишу в постах ниже. Но прежде поясню один термин ...

Что такое ShortCodes Helper

Есть такое понятие - шаблонизационные функции. Это некоторое количество запрограммированных процедур (или реализованных отдельной библиотекой или сразу интегрированных в систему), предназначенных в основном для извлечения данных из недр сайта и отображения на генерируемой странице. Со стороны шаблона такие функции вызываются особыми тегами, к примеру

• {title} в темах Impera CMS
• the_title() в темах WordPress

С помощью подобных тегов можно программировать серверную часть бизнес-логики в шаблоне сайта. Так вот в движке Impera CMS лишь небольшая часть шаблонизационных функций интегрирована в систему, предполагая что остальные понадобившиеся функции будут подключены вебмастером из какой-нибудь внешней библиотеки. Подобной библиотекой как раз и стал пакет ShortCodes Helper - он содержит сотни готовых функций, которыми чаще всего пользуются вебмастера при создании своих макетов.

Данная библиотека собрана из дарственных коллекций разных вебмастеров, трудившихся над созданием шаблонов для Impera CMS. Если очередной мастер делится собственной связкой шаблонизационных функций, и какая-то из них понравится выпускающему редактору и будет полезна остальным мастерам, то новая функция войдёт в очередной релиз библиотеки. Такая практика даёт имперскому движку впечатляющий функционал и сохраняет простоту макетирования.

Шаг 2 - пишем стили и скрипты

На самом деле имя и содержимое упомянутого выше стилевого файла styles-dzen.css явилось результатом сохранения моего наброска Дзен-страницы, сделанного в визуальном вебредакторе. Вот этот простенький чертёж, пунктиром обозначено положение блоков на странице и надписано их значение, цвет пунктира меняется лишь для обозначения уровня вложенности:

То есть я открыл программу редактора, какой попался под руку. С помощью элементов HEADER, MAIN, ARTICLE, NAV, FIGURE, FOOTER семантической разметки и традиционных элементов DIV, H1, H2, P, IMG, A и прочих блоков как смог начертил примерную схему, сверяясь с эталонной страницей из Яндекс.Дзен (да простят верстальщики криворукого копира во мне).

Потом добавил несколько следующих отсебятин, чтобы облегчить вам работу по приданию макету неповторимости:

• в виде текстовых вставок над и под лентой публикаций
• в виде кнопки пагинации под лентой
• в виде примитивной javascript-логики для таких целей:
  • раскрашивание фона публикаций в тон картинок
  • установка своего чередования рядов обычная/широкая карточка
  • динамическая (аяксовая) подгрузка продолжения ленты
• в виде подвала страницы

Ещё в стили добавил нужные media-запросы, чтобы сделать страницу адаптивной (оригинал почему-то неадаптивный). И в конце всех этих работ сохранил результат в виде статичного HTML-файла. Программа вебредактор записала мне 3 вот таких файла:

• index.html
• style.css
• script.js

Так вот содержимое второго файла я и скопировал в упоминавшийся выше пустой стилевой файл. Если интересно, что там находится, вы можете увидеть эти стили прямо сейчас.

По тому же принципу, содержимое третьего файла я скопировал в упоминавшийся выше пустой скриптовый файл scripts-dzen.js. Если вам тоже интересно знать, что там находится, можете увидеть исходный код этих скриптов прямо сейчас.

В следующем посте я расскажу, как натягивал на движок сайта вёрстку статичного файла index.html. Но сначала ...

Что сделано не как в оригинале

Учитывая соглашение выше, я и не собирался делать супер крутой, навороченный, отшлифованный пример. Главным фактором было время, а допущенные красивые неточности принесли бы больше пользы, чем сильнее отличались от первоисточника.

Поэтому в отношении стилей и скриптов следует предупредить о следующих расхождениях с оригиналом и недоработках. Либо примите их как бонус в копилку неповторимости либо доделайте сами до планируемого вида. Если не владеете мастерством, тогда наймите css-мастера для улучшения стилей и javascript-программиста для доработки скриптов.

Итак, расхождения по стилям:

Расхождения по скриптам:

Что пропущено по ненадобности

Щёлкая карточку публикации в Яндекс.Дзен, читателя перебрасывает в новое окно, где открывается полная публикация на авторском сайте. В исходном окне под щёлкнутой карточкой выезжает несколько рекомендуемых ещё публикаций.

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

Шаг 3 - натяжка html-шаблона на движок

Выше я уже рассказал, как готовил стилевой и скриптовый файл Дзен-макета. Теперь мне нужно было натянуть файл разметки. Напомню, вебредактор сохранил её файл под именем index.html.

Согласно структуре шаблона, упоминавшейся ещё выше (на всякий случай снова повторю её справа), и помня о желании изготовить страницу как абстрактную и доступную по адресу http://ваш.сайт/dzen, я поместил полученную от вебредактора разметку в одноимённый файл dzen.htm папки абстрактных моделей.

Разумеется, я не просто поместил (то есть скопировал) разметку в одноимённый файл шаблона, а выполнил так называемую натяжку. Кстати, этот процесс на фрилансе иногда называют "сверстать тему сайта" или "посадить страницу на движок".

Терминология не ясная постороннему, поэтому сначала скажу пару предложений о смысле операции, потом абзац о поисковом продвижении, и уж затем в несколько абзацев распишу процесс натягивания.

Без SEO никуда

Аббревиатурой SEO обозначают фронт работ поискового продвижения сайта. Ранее такие действия выполнялись отдельно, а ныне какие-то автоматизируемые блоки действий всё чаще интегрируются в разрабатываемые шаблоны. Во время натяжки статичного HTML из нашего урока я последовал той же тактике и сразу внедрил в создаваемый макет следующие современные SEO плюшки-печенюшки так называемой внутренней оптимизации сайта:

Натягиваем карточку товара

Первым делом я рассмотрел в исходном HTML-шаблоне, какие важные части разметки повторяются более одного раза, чтобы вынести их в отдельный модуль. Такому действию я научился у опытных верстальщиков, кто славится умением делать компактно устроенные, хорошо оптимизированные шаблоны.

В случае моего HTML-наброска яндексовой страницы, сделанного в вебредакторе, таким повторяющимся фрагментом была карточка публикации. Череда карточек повторялась в середине вёрстки. Я вырезал эти повторения и перенёс наверх файла в виде воображаемого модуля карточки с обобщенной разметкой и уже проставленными мной шаблонизационными тегами, обозначив этот модуль именем dzenCard.

Это был самый большой кусок кода из всего макетного файла dzen.htm. Именно этим куском файл и начинался, вот так:

{* макет страницы Dzen *}{strip}

{function dzenCard}
    <article class="item">
        <figure class="image">
            <a href="{url}" title="{itemTitle}">
                <img src="{thumb}" alt="{name}">
            </a>
        </figure>

        <div class="info" data-href="{url}">
            <h2>{name}</h2>
            <p>{annotation size=256}</p>
        </div>

        <div class="taxonomy">
            <span>
                <svg width="20" height="20" ...>
                    <path ...></path>
                </svg>
                {browsed}
            </span>
            <a href="{itemCategoryUrl}">
                {itemCategory}
            </a>
        </div>
    </article>
{/function}

Перечислю использованные технические теги и их значение:

• {* ... *} - комментарий
• {strip} - минифицировать разметку
• {function ...} - обозначить локальный модуль, имеет параметры:
  • something - некое имя модуля

Перечислю использованные шаблонизационные теги библиотеки Short Codes Helper и их значение:

• {url} - вывести адрес целевой страницы
• {itemTitle} - вывести тайтл целевой страницы
• {thumb} - вывести URL миниатюры главного фото
• {name} - показать название товара
• {annotation ...} - показать краткое описание, может иметь параметры:
  • size - максимум столько символов, иначе сократить троеточием
• {browsed} - показать число просмотров
• {itemCategoryUrl} - вывести адрес страницы категории
• {itemCategory} - показать название категории

Обеспечиваем поддержку Ajax-запросов

Чтобы реализовать подгрузку следующего листа ленты публикаций, как я уже говорил, в работе страницы из нашего урока предполагалось запрограммировать динамические запросы к URL-у той же страницы http://ваш.сайт/dzen, но с дополнительными параметрами:

• page=N - номер следующего подгружаемого листа страницы
• ajax=1 - признак яаксового (динамического) запроса

Выполнение аяксового запроса и приём ответа был возложен на метод loadNext скриптового файла scripts-dzen.js, что уже упоминался выше в структуре шаблона.

Теперь мне нужно было с помощью шаблонизационных тегов запрограммировать в макете серверную часть бизнес-логики аяксовых запросов. Алгоритм простой:

• Если в запросе замечен аяксовый сигнал, тогда:
  • Взять из запроса номер требуемого листа
  • Прочитать из базы сайта 28 товаров этого листа
    Подсказка: чтобы продолжение узора из чередующихся обычных и широких карточек не сбивалось, эмпирическим путём было подобрано число 28 штук, но в принципе работу можно было переложить на метод resizeItems после каждой успешной подгрузки листа.
  • Если листы закончились (дальше нет товаров), тогда:
    • Вставить в ответ скриптовый вызов "скрыть листалку"
  • Иначе если хотя бы один товар на листе прочитан, тогда:
    • Сгененировать карточки прочитанных товаров
• Иначе если это обычный запрос, тогда:
  • Дать движку сигнал "стоп после этого макета"
  • Сгенерировать всю страницу с первым листом из 28 карточек товаров

Вот как этот алгоритм выглядит в коде макета, я расположил его вторым куском кода, то есть следом за куском кода из предыдущего поста:

{ifAjax}
    {getRequest name = page
                assign = num}
    {getProducts pagesize = 28
                 page = $num}
    {ifNotItems}
        <script>
            hidePagination();
        </script>
    {/ifNotItems}

    {ifItems}
        {enum}
            {dzenCard}
        {/enum}
    {/ifItems}
{/ifAjax}

{ifNotAjax}
    {lastTemplate}
    +------------------------+
    | здесь вёрстка, которую |
    | опишу в постах ниже    |
    +------------------------+
{/ifNotAjax}

Перечислю использованные локальные теги и их значение:

• {dzenCard} - текущий перечисленный товар сгенерировать с помощью модуля карточки

Перечислю использованные шаблонизационные теги библиотеки Short Codes Helper и их значение:

• {ifAjax} - если в запросе есть аяксовый сигнал
• {getRequest ...} - получить значение входного параметра
  • name - имя параметра
  • assign - имя переменной, куда поместить значение
• {getProducts ...} - прочитать список товаров, может иметь параметры:
  • pagesize - сколько карточек на одном листе страницы
  • page - номер читаемого листа
• {ifNotItems} - если товары не найдены
• {ifItems} - если товары прочитаны
• {enum} - перечислить прочитанные товары
• {ifNotAjax} - если запрос стандартный (нет аяксового сигнала)
• {lastTemplate} - сигнал "стоп после этого макета"

Всё самое сложное изучили, осталось несколько элементарных кусков кода ...

Делаем заголовки страницы

Так как современные оптимизаторские правила рекомендуют располагать скрипты в конце вёрстки, хотя правила аккуратной вёрстки предписывали им быть в заголовочной секции, я всё же вместе с заголовками покажу здесь сразу и нижнюю часть макетного файла.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <base href="{site}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Сюда впишите тайтл страницы</title>
        <meta name="description" content="Здесь мета описание страницы">
        <meta name="keywords" content="здесь напишите, ключевые слова">
        <link rel="canonical" href="{canonicalUrl}">

        <link rel="shortcut icon" href="{theme}images/favicon.ico">
        {implantCSS}
            <link rel="stylesheet" href="{theme}css/styles-dzen.css">
        {/implantCSS}
    </head>
    <body>
        +---------------------+
        | этот фрагмент опишу |
        | в следующем посте   |
        +---------------------+

        <script>
            var siteUrl = '{site}',
                themeUrl = '{theme}';
        </script>
        {implantJS}
            <script src="{theme}js/scripts-dzen.js" async></script>
        {/implantJS}

        <div class="counters">
            {counters}
        </div>
    </body>
</html>

Перечислю использованные шаблонизационные теги библиотеки Short Codes Helper и их значение:

• {site} - вывести URL корня сайта
• {canonicalUrl} - вывести канонический адрес страницы
• {theme} - вывести URL папки шаблона
• {implantCSS} - имплантировать эти CSS в тело страницы
• {implantJS} - имплантировать эти JS в тело страницы
• {counters} - вставить из настроек сайта указанные там скрипты счётчиков, метрики и аналитики

Верстаем шапку страницы

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

Вот как шапка выглядит в коде макета:

<header class="wrapper">
    <div class="logo">
        <a href="{site}">{siteName}</a>
    </div>

    <div class="phone">
        <a href="tel:{phone}" rel="nofollow">{phone}</a>
    </div>

    <h1>Лента публикаций магазина</h1>

    <div class="text">
        здесь вступительный текст
        к странице, если нужен
    </div>
</header>

Перечислю использованные шаблонизационные теги библиотеки Short Codes Helper и их значение:

• {site} - вывести URL корня сайта
• {siteName} - вывести имя сайта из настроек
• {phone} - вывести телефон 1 из конфигурационных настроек сайта

Верстаем центральную часть

Как известно из постановки урока, центральная часть страницы представляет собой первый лист списка товаров. Смотрим исходный код макета:

<main class="wrapper">
    <div class="box">
        {getProducts pagesize=28}
        {enum}
            {dzenCard}
        {/enum}
    </div>
</main>

Перечислю использованные локальные теги и их значение:

• {dzenCard} - текущий перечисленный товар сгенерировать с помощью модуля карточки

Перечислю использованные шаблонизационные теги библиотеки Short Codes Helper и их значение:

• {getProducts ...} - прочитать список товаров, имеет параметры:
  • pagesize - сколько карточек на одном листе страницы
• {enum} - перечислить прочитанные товары

Верстаем пагинацию страниц

В нашем уроке самый простой вид пагинатора - всего из одной кнопки.

Вот как пагинатор выглядит в коде макета:

<nav class="wrapper pagination">
    <a class="btn" href="products" onclick="return loadNext(this)">
        Показать ещё
    </a>
</nav>

Верстаем подвал страницы

Подвал сайта, подобно шапке, содержит какой-нибудь завершающий текст, строку копирайта и две благодарственные ссылки на сайты.

Вот как подвал выглядит в коде макета:

<footer class="wrapper">
    <div class="text">
        здесь завершающий текст
        к странице, если нужен
    </div>

    <div class="copyright">
        <a href="..."> ... </a>
        <a class="right" href="..."> ... </a>
        &copy; {year}, {siteName}
    </div>
</footer>

Перечислю использованные шаблонизационные теги библиотеки Short Codes Helper и их значение:

• {year} - вывести 4 цифры текущего года
• {siteName} - вывести имя сайта из настроек

Доброго времени суток, есть ли продолжение данного эксперемента? Хочу такое же себе, но шаблон под ВП.

Здраве будьте Иван!

Выше есть пост с ссылками на фриланс сайты. Обратитесь по ссылкам, кто да поможет перенести шаблон Dzen на Wordpress. Ссылка на исходники шаблона присутствует в первом посте.

Попробуйте еще спросить на Envato форуме, если владеете английским. Все специалисты по вордпресу там.

Здравствуйте Иван Полянский! Легко переделаю показанный выше Дзен в шаблон WP. Качественно, профессионально.

Цена 100$ срок 2 дня. Оплата Webmoney, Qiwi, на карту Приватбанк. Обращайтесь pachulli84@gmail.com

Если надо, как хотите доработаю шаблон за дополнительную плату.