Верстаем Кинопоиск на Taptop: мощная CMS, динамические страницы, гибкие фильтры — быстро и без кода
Хочу поделиться с вами новостью — мы провели эксперимент по верстке сложного портала на Taptop. Решили на деле проверить, как работают коллекции и референсы, и создали в редакторе клон Кинопоиска. Взяли фильмы, актёров, жанры, трейлеры и собрали всё это в полноценный мини-портал прямо в редакторе. Расскажу, что у нас получилось и почему это оказалось проще, чем кажется на первый взгляд.
В Taptop такой проект может собрать один человек — без строчки кода и всего за пару дней. В видео вы увидите весь процесс: как наш веб-дизайнер Тимофей Коннов настроил структуру, связал данные и превратил обычный макет в работающий портал. А сейчас — коротко о том, как это все устроено.
Что использовали: коллекции, референсы и мультиреференсы
В основе всего проекта лежат коллекции — это таблицы с данными, которые превращают Taptop в гибкую CMS. Каждая строка в коллекции — это одна сущность (например, отдельный фильм, актёр, жанр или страна), а каждый столбец — значение этой сущности: название, описание, фото, дата выхода, список жанров и так далее. На основе этих данных Taptop автоматически собирает динамические страницы: вы создаёте один макет, и система сама подставляет в него контент из коллекции.
Далее подключаются референсы и мультиреференсы, которые создают связи между коллекциями.
Референсы — это когда запись в одной коллекции ссылается на одну запись в другой.
Например: у фильма один режиссёр.
Мультиреференсы — это связь «один ко многим» или «многие ко многим».
Например: фильм может относиться к нескольким жанрам.
Именно благодаря коллекциям и связям между ними можно строить большие проекты, например:
- каталог фильмов,
- маркетплейс с товарами,
- библиотеку рецептов,
- портал с курсами,
- туристический гид,
- базу недвижимости.
И всё это на единой структуре данных, которая сама наполняет страницы контентом из базы данных.
Как верстали сайт
Динамическая страница фильма
Тимофей создал структуру, аналогичную карточке в Кинопоиске:
• постер,
• трейлер,
• описание,
• год,
• страна,
• жанры,
• режиссер,
• актёры,
• похожие фильмы.
Все эти данные подгружаются из коллекций. Для одного фильма — одна запись в табличке CMS, и Taptop автоматически строит готовую динамическую страницу с заданным оформлением.
Многоуровневые связи
Чтобы карточка выглядела «живой» и полноформатной, использовались связи между коллекциями:
• фильм связан с жанрами (мультиреференс),
• фильм связан с режиссёром (референс),
• фильм связан со страной производства,
• фильм связан с актёрами, у каждого из которых — своя отдельная страница, тоже динамическая.
Это позволяет кликнуть на актёра — и перейти на страницу с его фильмами. Или нажать на жанр — и увидеть все фильмы этого жанра.
Фильтры и динамические ссылки
Связанные рекомендации формируются автоматически: если два фильма имеют общие жанры, они появляются в блоке похожих. Не нужно вручную назначать связи между десятками страниц.
Все переходы — динамические: от фильма — к жанру, от жанра — к стране, от актёра — к его работам.
Conditional Visibility
Отдельным блоком Тимофей показал, как можно менять внешний вид элементов на основе данных в коллекциях. Например, рейтинг фильма выводится разным стилем — золотым, зелёным или серым — в зависимости от числового значения.
Что в итоге получилось
Целая мини-экосистема, похожая на настоящий онлайн-кинотеатр: несколько связанных коллекций, автоматическое формирование страниц, гибкие фильтры и единая визуальная логика. Всё это без кода — только встроенные возможности CMS Taptop.
Преимущества подхода
Экономия времени
Вы настраиваете структуру один раз, а дальше страницы формируются сами — Taptop подставляет данные из коллекций и вам не нужно вручную верстать каждую страницу.
Ресурс — один человек
Один специалист может собрать портал уровня медиа, маркетплейса или онлайн-кинотеатра в одиночку.
Легко собирать и управлять
Структура понятна, данные обновляются в одном месте, связи работают сами.
Всё в одном месте
Не нужно подключать внешние ресурсы, интеграция и сложные цепочки. Taptop обеспечивает весь процесс — от визуала до CMS.
Подробнее — в видео
В тексте сложно передать, насколько мощно устроена работа с данными в Taptop. Так что советую посмотреть видео — Тимофей показывает процесс изнутри: как устроены коллекции, как они связываются, как настраиваются фильтры, как динамика превращает обычный макет в сложный контентный проект.
Если вы хотите создавать сайты уровня крупных медиаплатформ — эфир даст отличное понимание, как это работает на практике и как быстро можно собрать подобный проект в Taptop.
