🔥 Разберите мой компонент темы: Карточки продвинутых тем

Привет, ребята!

Отказ от ответственности: При создании этого компонента темы ни один ИИ не пострадал :smiley:

Да, ребята, я признаю, что бесстыдно скопировал компонент темы Topic Cards. Огромное спасибо оригинальным авторам и участникам за отличную работу!

Изначально это был форк, но более 80% кода и структуры были полностью переписаны. Мы добавили множество новых функций, и на первый взгляд все настройки могут показаться довольно ошеломляющими.

Advanced Topic Cards — предварительный релиз

Благодаря нашей переписке вы получаете:

  • более детальный контроль над местом отображения карточек тем;
  • два разных макета карточек тем;
  • слайдер с карточками избранных тем в верхней части страницы «Последние».

Полный список подробностей — ниже :down_arrow:

Не стесняйтесь тестировать, запускать, копировать и критиковать его в этой теме! Я очень жду ваших отзывов о результате:

Известные проблемы:

  • Избыточные настройки TC: некоторые функции, касающиеся миниатюр и высоты карточек, больше не актуальны/не имеют значения;
  • В настольной версии отсутствует горизонтальная прокрутка с помощью тачпада или колёсика мыши (Embla предоставляет для этого плагин, но мы ещё не успели его добавить);
  • Кнопки действий недостаточно «отполированы», требуется более качественная визуальная доработка.

Сводка улучшений и функций:

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

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

  • Слайдер избранных тем на главной странице (Embla)
    Слайдер избранных тем, который можно разместить на маршрутах обнаружения (главная/последние/топ/категории), работающий на базе Embla Carousel, с настройками количества слайдов на экран, зацикливания, выравнивания, поведения при перетаскивании и другими параметрами.

  • Слайдер подкатегорий на страницах категорий
    Превратите список подкатегорий на странице категории в горизонтальный слайдер с настройками для выбора родительских категорий и количества дочерних элементов, необходимых для отображения.

  • Возможности визуальной кастомизации

    • Заглушки для миниатюр (иконка Font Awesome), если у темы нет изображения

    • Предустановки радиуса скругления границ карточки

    • Выбор размера шрифта заголовка карточки (с использованием токенов шрифтов Discourse)

    • Опциональные фиксированные высоты карточек/сетки и управление размером миниатюр

  • Богатый набор компонентов карточки
    Новая структура карточки с:

    • Подписью (аватар автора темы + имя пользователя + опциональная дата публикации)

    • Кнопками действий (Детали + CTA для избранной ссылки)

    • Встроенными тегами (бейдж категории + теги внутри тела карточки)

  • Совместимость с другими компонентами тем/плагинами:

    • Плагин «Календарь + События»: отображение даты события после заголовка
    • Компонент темы «Портфолио пользователя»: отображение
  • Запланированные функции:

    • Более детальный контроль для слайдера избранных тем: дополнительные точки подключения плагинов, маршруты страниц и т. д.
    • Разворачивание/сворачивание слайдера карточек избранных тем (+ автоматическое разворачивание на основе новых/непрочитанных тем)

Спасибо вам большое за то, что поделились — это великолепно!

Очень здорово!! Отличная работа :+1:

Замечания:

  • Не работает на маршрутах обнаружения, не относящихся к категориям, таких как /latest или выбор тегов без категории.

  • Изображения не всегда хорошо выровнены

даже когда изображений нет

  • Карусель ОЧЕНЬ хорошая, но разве она не должна быть отдельным компонентом?

  • Было бы здорово иметь возможность исключить темы без изображения из карусели.

Спасибо за обратную связь!

Изображения действительно выглядят странно, то же самое касается обрезки текста анонса темы.

Не будет ли лучше с точки зрения UX/UI добавить отступы вокруг изображений в макете списка?

Это справедливое замечание. Хотя моя цель заключалась в том, чтобы по сути использовать одни и те же стили CSS для карусели и обычных карточек тем.

:+1:

Привет, твоему коду нужна небольшая обновка :wink:

image

Привет, @gilles, лучше поздно, чем никогда.

ИИ-разработка движется слишком быстро; возможно, даже лучше и дешевле будет переписать всё с нуля, особенно учитывая, что в Discourse теперь есть собственные компоненты слайдеров, которыми можно воспользоваться.

Но я скоро займусь этим и посмотрю, как сделать решение более устойчивым к будущим изменениям, заново «спромптить» всё с нуля и добавить совместимость с темой Horizon…