Карточки при наведении на тему

Настройка Компонент темы
1
:information_source: Краткое описание Показывает всплывающие подсказки при наведении курсора (или тапе на мобильных устройствах) на внутренние ссылки на темы, демонстрируя быстрый предпросмотр содержимого связанной темы.
:eyeglasses: Предпросмотр Github Readme
:hammer_and_wrench: Репозиторий https://github.com/denvergeeks/discourse-topic-hover-cards
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начинающее руководство по использованию тем Discourse

Установить этот компонент темы

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

image
image1203×696 132 KB

image
image1215×707 146 KB

Возможности

  • Можно активировать на всем сайте для всех внутренних ссылок на темы или только для тех, которые появляются в одной или нескольких областях, включая:
    • Тело темы (первоначальный пост)
    • Ответы
    • Стандартные списки тем (/latest, /top, /tags, списки тем в категориях и т.д.)
    • Списки тем на главной странице категорий (Категории + Последние, Только категории и связанные макеты)
    • Категории документации
    • Канбан-доска
    • Рекомендуемые темы
  • Адаптивный макет:
    • Карточка для настольных компьютеров с настраиваемой плотностью и расположением миниатюры
    • Предпросмотр в виде нижней панели на мобильных устройствах с открытием по тапу
  • Настраиваемое содержимое может включать:
    • Миниатюрное изображение
    • Заголовок темы
    • Выдержку
    • Категорию
    • Теги
    • Автор оригинального поста (имя пользователя и аватар)
    • Дата публикации
    • Дата последнего действия
    • Количество просмотров
    • Количество ответов
    • Количество лайков
  • Отключение для отдельных пользователей с помощью пользовательского поля
  • Режим отладки только для администраторов для безопасного устранения неполадок
Нажмите, чтобы увидеть все включенные настройки...

Макет и время

  • card_width
    Любое значение ширины CSS (для настольных компьютеров), например, 32rem, 420px, 40vw, clamp(20rem, 40vw, 36rem).

  • card_max_height
    Любое значение максимальной высоты CSS, например, 10rem, 480px, 50vh, min(60vh, 32rem).

  • card_delay_ms
    Задержка перед отображением карточки при наведении, в миллисекундах (по умолчанию: 300).

  • enable_on_mobile
    При включении тап по поддерживаемой внутренней ссылке на тему показывает предпросмотр на мобильном устройстве, закрепленный в нижней части экрана.

  • mobile_width_percent
    Ширина предпросмотра нижней панели на мобильных устройствах в процентах от ширины окна просмотра (по умолчанию: 100).

  • mobile_thumbnail_height
    Высота миниатюры в пикселях для предпросмотра на мобильных устройствах.

Плотность

  • density
    Плотность для настольных компьютеров: default, cozy или compact.

  • density_mobile
    Плотность для мобильных устройств: default, cozy или compact.

Эти параметры аналогичны шаблонам «Плотность» в Discourse, которые регулируют отступы, межстрочные интервалы и размер шрифта.

Миниатюра и расположение

  • show_thumbnail / show_thumbnail_mobile
    Показать/скрыть изображение темы (если есть) на настольных и мобильных устройствах.

  • thumbnail_placement
    Как размещается миниатюра на настольных устройствах:

    • top
    • left
    • right
    • bottom
      На мобильных устройствах миниатюра всегда отображается в верхней части карточки.

  • image_size_percent
    Управляет размером миниатюры в процентах от размера отображаемой карточки при наведении.

Поля для каждого окна просмотра

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

  • show_category / show_category_mobile

  • show_tags / show_tags_mobile

  • show_title / show_title_mobile

  • show_excerpt / show_excerpt_mobile

  • excerpt_length / excerpt_length_mobile
    Количество строк для выдержки (использует CSS line-clamp).

  • show_op / show_op_mobile
    Показывает аватар и имя пользователя автора оригинального поста.

  • show_publish_date / show_publish_date_mobile

  • show_views / show_views_mobile

  • show_reply_count / show_reply_count_mobile

  • show_likes / show_likes_mobile

  • show_activity / show_activity_mobile

Где появляются карточки при наведении

  • enable_on_topics
    Ссылки на темы в первоначальном посте.

  • enable_on_replies
    Ссылки на темы в ответах.

  • enable_on_topic_lists
    Ссылки на темы в стандартных списках тем, например, /latest, /top, списки тем в категориях.

  • enable_on_category_homepage_topic_lists
    Ссылки на темы в списках «Последние темы» или аналогичных на главной странице категорий:

    • Категории + Последние темы
    • Только категории
    • Связанные варианты, отображаемые на / или /categories, в зависимости от настройки вашей главной страницы.

  • enable_on_doc_categories
    Ссылки на темы в представлениях категорий документации (если применимо).

  • enable_on_kanban_boards
    Ссылки на темы, отображаемые в макетах канбан-досок (если применимо).

  • enable_on_suggested_topic_links
    Ссылки в разделе «Рекомендуемые темы».

Отключение для отдельных пользователей

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

  • user_preference_field_name
    Ключ, используемый для обнаружения отключения у текущего пользователя. Это может быть:
    • прямой ключ пользовательского поля, например, disable_topic_hover_cards
    • числовой ID, например, 1
    • ключ user_field_X, например, user_field_1

Как работает сопоставление

  1. Компонент сначала проверяет custom_fields и user_fields текущего пользователя на наличие:
    • настроенного user_preference_field_name
    • того же значения, конвертированного между 1 и user_field_1, когда это уместно
  2. Если совпадение не найдено и текущий пользователь является сотрудником (администратором/модератором) и
    resolve_user_field_id_for_admins включен, компонент вызывает:
    • /admin/config/user-fields.json
      для сопоставления настроенного значения (имя поля или user_field_X) с его числовым ID.
  3. С числовым ID он проверяет:
    • user_fields[id]
    • user_fields['user_field_' + id]
    • custom_fields[id]
    • custom_fields['user_field_' + id]

Любое истинное значение в этих позициях (например, 1, true, yes, on, checked) отключает карточки при наведении для этого пользователя.

Настройки для этого поведения

  • resolve_user_field_id_for_admins
    При включении (рекомендуется) администраторы могут настроить поле либо по имени, либо через user_field_X, и компонент автоматически определит и сопоставит числовой ID.

  • debug_mode
    При включении записывает подробную информацию об обнаружении в консоль браузера для сотрудников, включая:

    • какие ключи проверялись
    • где было найдено совпадение (текущий пользователь или полная запись пользователя)
    • определенный числовой ID пользовательского поля, если таковой имеется

Отладка

Если карточки при наведении не появляются там, где вы ожидаете, используйте встроенный режим отладки:

  1. Включите debug_mode в настройках этого компонента.
  2. Откройте консоль разработчика браузера.
  3. Наведите курсор или коснитесь соответствующей ссылки на тему.

Вы увидите сообщения, подобные следующим:

  • Hover cards initialized – подтверждает инициализацию и включенные области.
  • Resolved admin user-field mapping – подтверждает сопоставление настроенного имени/ключа пользовательского поля с числовым ID (для сотрудников).
  • No disable field match found anywhere – подтверждает, что карточки при наведении не подавляются для текущего пользователя.

Чтобы отладить где должна появиться карточка, убедитесь, что:

  • ваша целевая ссылка является внутренней ссылкой на тему (/t/...), которую может распарсить topicIdFromHref()
  • включен соответствующий флаг области:
    • enable_on_topics
    • enable_on_replies
    • enable_on_topic_lists
    • enable_on_category_homepage_topic_lists
    • enable_on_doc_categories
    • enable_on_kanban_boards
    • enable_on_suggested_topic_links

Запланированные настройки и функции, которые еще предстоит добавить:

  • Исключенные теги
  • Включенные теги
  • Исключенные классы
  • Включенные классы
  • По умолчанию исключать OneBoxes и другие элементы
  • Предложения??
6 лайков
2

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

9 лайков