Код от сайта театра им. Алехандро Валенсио https://valensio.com.
- формировать афишу джоином двух таблиц из БД: с описанием мероприятий и с ближайшими датами
- генерировать посты для соцсетей с афишей на месяц
- расставлять utm-метки для соцсетей
- сокращать ссылки с метками встроенным сокращателем valensio.com/s/...
- переносить utm-метки на виджет с покупкой билетов — маркетолог узнает откуда пришёл покупатель, даже при разрыве сессии
- автоматически включает тёмную тему на основе предпочтений пользователя. Избегает «мерцания тёмной темы».
- гибкая настройка цветовых тем
Сайт написан под CMS Modx. В этом репозитории хранится содержимое пользовательской папки assets.
Используется стандартное модэксовское разделение на элементы:
- чанки (переиспользуемые куски HTML)
- сниппеты (код на PHP)
- ресурсы (страницы сайта)
- шаблоны (страницы сайта).
Каждый элемент — статический.
Что такое статические элементы в MODX
По умолчанию коды всех элементов хранятся в базе данных, а не в файлах. Редактируются они в админке сайта с помощью встроенного редактора.
Чтобы сделать процесс разработки привычнее, я пользуюсь статическими элементами: они хранятся в виде обычных файлов, а в базе данных вместо кода хранятся пути к этим файлам.
Код написан с использованием БЭМ. По крайней мере, в отношении именования классов и независимости блоков.
Также частично использую Google HTML/CSS Style Guide, Code Guide и Sass Guidelines. Когда-нибудь у меня дойдут руки привести код в максимальное соответствие этим гайдам.
В базе данных лежат две таблицы: repertoire и tickets.
- repertoire содержит в себе информацию о спектаклях: идентификатор, название, описание, эмодзи, возраст, теги и т.д.
- tickets содержит информацию о датах мероприятий: идентификатор мероприятия, дата, место, ссылка на билеты и т.д.
Для генерации афиши на главной странице используется join двух этих таблиц: информация о конкретной дате соединяется с информацией о мероприятии в целом.
На странице со всеми спектаклями выводится информация только из repertoire. Но есть особенность сортировки: мероприятия, на которые билеты есть, идут выше остальных. Поэтому для сортировки мероприятий также используется таблица tickets.
За управление цветом отвечают файлы:
К элементу <html> прикручивается класс color-theme, содержащий дефолтную белую тему. Изменяется тема с помощью классов-модификаторов типа color-theme_name_***, где *** — это название темы. Оно задаётся с помощью TV, которое так и называется — сolor-theme_name.
Что такое TV
Это возможность CMS Modx. Название темы можно задать в админке в отдельном поле при редактировании страницы сайта. Из кода страницы (ресурса в терминологии Modx, папка ./resources) задать цветовую тему нельзя.
Модификаторов нет, используется дефолтная белая тема:
<html class="color-theme">
Есть модификатор, используется зелёная тема:
<html class="color-theme color-theme_name_green">
Список всех тем есть в ./scss/_color-theme.scss.
Чтобы активировать тёмную тему надо добавить класс color-theme_name_dark. При этом удалять классы-модификаторы, которые были изначально, не нужно: это позволит восстановить тему, при переключении с тёмной обратно на светлую. Достаточно будет просто удалить класс color-theme_name_dark и изначальная тема применится автоматически.
Используются два модификатора: зелёной и тёмной темы. Тёмная — приоритетнее.
<html class="color-theme color-theme_name_green color-theme_name_dark">
Цветовая тема (color theme) и цветовой режим (color mode) — разные понятия.
- Тема может быть белой, тёмной, красной, зелёной, какой угодно. Мы говорили о ней выше.
- Режим может принимать только три значения:
light,darkAndColorsиdark. О нём поподробнее
Пользователь загружает страницу. Активируется ли тёмная тема? На этот вопрос отвечает цветовой режим.
- Когда используется режим
light, тёмная тема не используется вообще, классcolor-theme_name_darkне добавляется. - Когда используется режим
dark, на всех страницах используется тёмная тема, классcolor-theme_name_darkвсегда добавляется. - Когда используется режим
darkAndColors, все цветные страницы остаются цветными, а страницы с дефолтной белой темой становятся тёмными. Классcolor-theme_name_darkдобавляется только когда нет модификаторов цветовой темы (то есть она белая, дефолтная).
Цветовой режим записывается в cookie с названием color-mode.
Когда пользователь приходит на сайт первый раз, color-mode у него не установлен. Он устанавливается на фронтенде файлом color-theme.js на основе медиа-запроса о предпочтениях пользователя (prefers-color-scheme: ):
- Если пользователь предпочитает светлую тему, то ставим режим
light. - Если пользователь предпочитает тёмную тему, то ставим ему режим
darkAndColors. Так он не ослепнет от белых страниц, но увидит потрясающие цвета на цветных страницах.
На сайте есть кнопка, переключающая цветовые режимы. Она работает с тем же файлом color-theme.js. С помощью неё можно переключиться на режимы light и dark. На darkAndColors переключиться нельзя, его можно только получить по дефолту. Так сделано, чтобы не усложнять интерфейс. Пусть пользователи думают, что есть только светлый режим и тёмный режим.
Чтобы избежать мерцания тёмной темы (dark mode flash), тёмная тема устанавливается на бэкенде. При генерации страницы, сервер на основе текущего цветового режима решает добавлять ему класс color-theme_name_dark или нет. Ответственный за это код прописан в сниппете color-theme_names.