Верстаем Кинопоиск на Taptop: как собрать сложный портал без кода

Хочу поделиться с вами новостью — мы провели эксперимент по верстке сложного портала на Taptop. Решили на деле проверить, как работают коллекции и референсы, и создали в редакторе клон Кинопоиска. Взяли фильмы, актёров, жанры, трейлеры и собрали всё это в полноценный мини-портал прямо в редакторе. Расскажу, что у нас получилось и почему это оказалось проще, чем кажется на первый взгляд.

В Taptop такой проект может собрать один человек — без строчки кода и всего за пару дней. В видео вы увидите весь процесс: как наш веб-дизайнер Тимофей Коннов настроил структуру, связал данные и превратил обычный макет в работающий портал. А сейчас — коротко о том, как это все устроено.

Что использовали: коллекции, референсы и мультиреференсы

В основе всего проекта лежат коллекции — это таблицы с данными, которые превращают Taptop в гибкую CMS. Каждая строка в коллекции — это одна сущность (например, отдельный фильм, актёр, жанр или страна), а каждый столбец — значение этой сущности: название, описание, фото, дата выхода, список жанров и так далее. На основе этих данных Taptop автоматически собирает динамические страницы: вы создаёте один макет, и система сама подставляет в него контент из коллекции.

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

Референсы — это когда запись в одной коллекции ссылается на одну запись в другой.

Например: у фильма один режиссёр.

Мультиреференсы — это связь «один ко многим» или «многие ко многим».

Например: фильм может относиться к нескольким жанрам.

Именно благодаря коллекциям и связям между ними можно строить большие проекты, например:

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

И всё это на единой структуре данных, которая сама наполняет страницы контентом из базы данных.

Как верстали сайт

Динамическая страница фильма

Тимофей создал структуру, аналогичную карточке в Кинопоиске:

• постер,
• трейлер,
• описание,
• год,
• страна,
• жанры,
• режиссер,
• актёры,
• похожие фильмы.

Все эти данные подгружаются из коллекций. Для одного фильма — одна запись в табличке CMS, и Taptop автоматически строит готовую динамическую страницу с заданным оформлением.

Многоуровневые связи

Чтобы карточка выглядела «живой» и полноформатной, использовались связи между коллекциями:

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

Это позволяет кликнуть на актёра — и перейти на страницу с его фильмами. Или нажать на жанр — и увидеть все фильмы этого жанра.

Фильтры и динамические ссылки

Связанные рекомендации формируются автоматически: если два фильма имеют общие жанры, они появляются в блоке похожих. Не нужно вручную назначать связи между десятками страниц.

Все переходы — динамические: от фильма — к жанру, от жанра — к стране, от актёра — к его работам.

Conditional Visibility

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

Что в итоге получилось

Целая мини-экосистема, похожая на настоящий онлайн-кинотеатр: несколько связанных коллекций, автоматическое формирование страниц, гибкие фильтры и единая визуальная логика. Всё это без кода — только встроенные возможности CMS Taptop.

Преимущества подхода

Экономия времени
Вы настраиваете структуру один раз, а дальше страницы формируются сами — Taptop подставляет данные из коллекций и вам не нужно вручную верстать каждую страницу.

Ресурс — один человек
Один специалист может собрать портал уровня медиа, маркетплейса или онлайн-кинотеатра в одиночку.

Легко собирать и управлять
Структура понятна, данные обновляются в одном месте, связи работают сами.

Всё в одном месте
Не нужно подключать внешние ресурсы, интеграция и сложные цепочки. Taptop обеспечивает весь процесс — от визуала до CMS.

Подробнее — в видео

В тексте сложно передать, насколько мощно устроена работа с данными в Taptop. Так что советую посмотреть видео — Тимофей показывает процесс изнутри: как устроены коллекции, как они связываются, как настраиваются фильтры, как динамика превращает обычный макет в сложный контентный проект.

Если вы хотите создавать сайты уровня крупных медиаплатформ — эфир даст отличное понимание, как это работает на практике и как быстро можно собрать подобный проект в Taptop.