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

Создаём на сайте ленту в стиле Яндекс.Дзен

Следить
Главная
17:12
02 мая
#
Разработчик написал:

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

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


Исходник »

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

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

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

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

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

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

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

Никакие части макета не могут быть использованы на вашем сайте, пока они слепо копируют задумки Яндекса.

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

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

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




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

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

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

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

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


Лента как у Яндекс.Дзен собственного изготовления

Живое демо »

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

Лента как у Яндекс.Дзен собственного изготовления

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

Приступаем

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

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

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

Скачать Имперу »

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

17:28
02 мая
#
Разработчик написал:

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

Папка шаблона:

  • css
    • ...
    • styles-dzen.css
  • fonts
    • ...
  • html
    • ...
    • abstract
      • dzen.htm
  • images
    • ...
  • js
    • ...
    • scripts-dzen.js

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

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

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

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

Что такое ShortCodes Helper

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

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

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


Скачать ShortCodes »

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

17:45
02 мая
#
Разработчик написал:

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

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


Схематический набросок страницы Дзена

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

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


Контакты »

Кого интересуют доработки только в частном порядке - спрашивайте на фрилансе:

Об удачном сотрудничестве и новом классном специалисте, которого найдёте, маякните и нам в контакты. Будем благодарны.

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

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

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

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

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


Показать стили »

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


Показать скрипты »

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

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

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

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

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

1 Использован дефолтный шрифт Verdana вместо семейства шрифтов OpenSans. Найдите оригинальный шрифт, например в сервисе бесплатных шрифтов Google Fonts, и подключите в стилях макета.

2 Карточки имеют тонкую рамку. У оригинала фотография доходит до краёв карточки, никакой рамки нет. Не нравится - удалите рамку в стилях.

3 Название и краткий текст публикаций отцентрированы, а в оригинале выровнены налево. Тоже исправляется в стилях.

4 Эффект наведения курсора сделан светлым фоном, у оригинала он тёмный.

5 Использована большая длина градиента вливания фотографии в фон, около 50%. Из-за этого половина изображения находится в затенении, не такая яркая. Но тут, как говорится, на вкус и цвет...

6 Число в правом углу карточки показывает число просмотров страницы товара. Но иконка при числе осталась от функции "Нравится". Бесплатные иконки в формате SVG можно найти в сервисе FlatIcon.

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

1 Метод resizeItems устанавливает чередование рядов с широкой карточки, в то время как оригинал начинается с трёх обычных карточек. Прокрутите этот урок до начала и сравните 2 первых снимка.

Кому срочно нужно исправить эти недоделки со скриптами, звоните-пишите в контакты - за 25 usd вопрос решается. И себе поможете, и остальным сделаете добро - им это исправление уже достанется бесплатно.


Контакты »

2 Метод loadNext содержит заглушку вместо аяксовой подгрузки продолжения. Если вам действительно нужна аяксовая подгрузка, придётся написать этот метод так, чтобы он отправлял на сервер запрос (например POST с параметрами ajax=1 и page=N, где N равен номеру следующей страницы) и ответную разметку с продолжением карточек добавлял в конец ленты.

3 Отсутствует бесконечная подгрузка ленты при прокрутке страницы вниз, как в оригинале. Это действие можно сымитировать, навесив метод loadNext на событие onscroll документа и скрыть стилями блок пагинации и подвал.

4 Метод colorizeItems раскрашивает фон карточек не по тону картинки, а случайным образом из палитры 8 наперёд заданных цветов. Сравните 2 первых снимка этого урока. Чтобы повторить идею оригинала, вам потребуется изменить код метода так, чтобы по событию onload картинки пробежать по пикселям canvas загрузившегося изображения и вычислить средний тон, а затем инлайновым стилем установить вычисленное значение как фон карточки.

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

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

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

18:07
02 мая
#
Разработчик написал:

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

Папка шаблона:

  • css
  • fonts
  • html
    • ...
    • abstract
      • dzen.htm
  • images
  • js

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

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

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

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

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

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

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

Без SEO никуда

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

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

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


Тест PageSpeed »

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

  • шапка страницы сделана тегом <header>
    • текстовый логотип из имени сайта - ссылка на главную
    • главный заголовок - тегом <h1>
    • некий вступительный (или продвигающий) текст

  • главная часть страницы сделана тегом <main>
    • карточка публикации (товара) - тегом <article>
      • название товара - тегом <h2>
      • фото - тегом <figure>
      • alt фотографии равен названию товара
      • лишь одна ссылка на целевую страницу
      • title ссылки равен тайтлу целевой
      • добавочная без тайтла ссылка на категорию

  • пагинатор (листалка страниц) сделан тегом <nav>

  • подвал страницы сделан тегом <footer>
    • некий завершающий (или перелинковочный) текст
    • ссылки на внешние сайты закрыты через nofollow
    • копирайт из имени сайта

PageSpeed оптимизация - способ ускорить загрузку страницы в браузер клиента и сократить время до показа первого экрана.

  • задан viewport
  • минификация разметки
  • минификация стилей
  • минификация скриптов
  • имплантация скриптов и стилей в тело страницы

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

Счётчики и метрика, скрипты аналитики и прочая тормозящая загрузку лабуда перенесена подальше в конец разметки. Люди получают вставочные коды этих измеряющих скриптов в личных аккаунтах соответствующих аналитических сервисов. В каких-то CMS приходится "зашивать" коды прямо в шаблон, в каких-то CMS можно просто вставить в соответствующее поле настроек через админпанель и коды сами подтянутся в момент генерации шаблона.

18:28
02 мая
#
Разработчик написал:

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

Первым делом я рассмотрел в исходном 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} - показать название категории
18:45
02 мая
#
Разработчик написал:

Обеспечиваем поддержку 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} - сигнал "стоп после этого макета"

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

18:57
02 мая
#
Разработчик написал:

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

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

<!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} - вставить из настроек сайта указанные там скрипты счётчиков, метрики и аналитики
19:18
02 мая
#
Разработчик написал:

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

Следуя схематическому наброску, в шапке сайта есть логотип в виде ссылки, телефон в виде ссылки, 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} - вывести имя сайта из настроек

Написание ответа

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


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