Cartes d'info au survol des sujets

Personnalisation Composant de thème
1
:information_source: Résumé Affiche des infobulles lors du survol (ou du toucher sur mobile) des liens internes vers des sujets, permettant de voir un aperçu rapide du contenu du sujet lié.
:eyeglasses: Aperçu Lisez-moi de GitHub
:hammer_and_wrench: Dépôt https://github.com/denvergeeks/discourse-topic-hover-cards
:question: Guide d’installation Comment installer un thème ou un composant de thème
:open_book: Nouveau sur les thèmes Discourse ? Guide pour débutant sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Des cartes d’aperçu enrichies au survol pour les liens internes vers des sujets dans les sujets, les réponses, les listes de sujets, les pages d’accueil des catégories, les catégories de documentation, les tableaux Kanban et les sujets suggérés. Pour ordinateur de bureau et/ou mobile. Valable pour tout le site et hautement configurable.

image
image1203×696 132 KB

image
image1215×707 146 KB

Fonctionnalités

  • Peut être activé sur l’ensemble du site pour tous les liens internes vers des sujets, ou uniquement ceux apparaissant dans une ou plusieurs zones, notamment :
    • Corps du sujet (publication originale)
    • Réponses
    • Listes de sujets standard (/latest, /top, /tags, listes de sujets par catégorie, etc.)
    • Listes de sujets sur la page d’accueil des catégories (Catégories + Derniers, Uniquement catégories, et mises en page apparentées)
    • Vues des catégories de documentation
    • Vues de tableaux de style Kanban
    • Sujets suggérés
  • Mise en page adaptative :
    • Carte pour ordinateur de bureau avec densité et placement des miniatures configurables
    • Aperçu sous forme de feuille en bas d’écran sur mobile avec ouverture au toucher
  • Contenu configurable :
    • Image miniature
    • Badge de catégorie
    • Étiquettes (tags)
    • Titre
    • Extrait (nettoyé des images et des lightboxes)
    • Auteur de la publication originale
    • Date de publication
    • Vues, réponses, likes, dernière activité
  • Désactivation par utilisateur via un champ utilisateur personnalisé
  • Mode de débogage réservé aux administrateurs pour un dépannage sécurisé
Paramètres

Mise en page et timing

  • card_width
    Toute valeur de largeur CSS (pour ordinateur de bureau), par exemple 32rem, 420px, 40vw, clamp(20rem, 40vw, 36rem).

  • card_max_height
    Toute valeur de hauteur maximale CSS, par exemple 10rem, 480px, 50vh, min(60vh, 32rem).

  • card_delay_ms
    Délai avant l’affichage de la carte au survol, en millisecondes (par défaut : 300).

  • enable_on_mobile
    Lorsqu’activé, toucher un lien interne vers un sujet pris en charge affiche une feuille d’aperçu mobile fixée en bas de l’écran.

  • mobile_width_percent
    Largeur de l’aperçu en feuille en bas d’écran sur mobile, exprimée en pourcentage de la largeur de la fenêtre d’affichage (par défaut : 100).

  • mobile_thumbnail_height
    Hauteur de la miniature en pixels pour l’aperçu mobile.

Densité

  • density
    Densité pour ordinateur de bureau : default, cozy ou compact.

  • density_mobile
    Densité pour mobile : default, cozy ou compact.

Ces options sont parallèles aux modèles de « Densité » de Discourse et ajustent simplement les espacements et les hauteurs de ligne.

Miniature et placement

  • show_thumbnail / show_thumbnail_mobile
    Afficher/masquer l’image du sujet (le cas échéant) sur ordinateur de bureau et mobile.

  • thumbnail_placement
    Façon dont la miniature est positionnée sur ordinateur de bureau :

    • top
    • left
    • right
    • bottom
      Sur mobile, la miniature est toujours rendue en haut de la carte.

  • image_size_percent
    Contrôle la taille de la miniature en pourcentage de la taille de la carte au survol rendue.

Champs par fenêtre d’affichage

Pour chaque bloc ci-dessous, vous disposez d’interrupteurs pour ordinateur de bureau et mobile :

  • 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
    Nombre de lignes pour l’extrait (utilise line-clamp CSS).

  • show_op / show_op_mobile
    Affiche l’avatar et le nom d’utilisateur de l’auteur de la publication originale.

  • 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

Où les cartes au survol apparaissent

  • enable_on_topics
    Liens vers des sujets dans la publication originale.

  • enable_on_replies
    Liens vers des sujets dans les réponses.

  • enable_on_topic_lists
    Liens vers des sujets dans les listes de sujets standard, par exemple /latest, /top, listes de sujets par catégorie.

  • enable_on_category_homepage_topic_lists
    Liens vers des sujets dans les listes « derniers sujets » ou équivalentes sur la page d’accueil des catégories :

    • Catégories + derniers sujets
    • Uniquement catégories
    • Variantes apparentées rendues à / ou /categories, selon la configuration de votre page d’accueil.

  • enable_on_doc_categories
    Liens vers des sujets dans les vues des catégories de documentation (le cas échéant).

  • enable_on_kanban_boards
    Liens vers des sujets rendus dans les mises en page de tableaux de style Kanban (le cas échéant).

  • enable_on_suggested_topic_links
    Liens dans la section « Sujets suggérés ».

Désactivation par utilisateur

Vous pouvez permettre à des utilisateurs individuels de désactiver les cartes au survol en utilisant un champ utilisateur personnalisé. Cela utilise le mécanisme standard des paramètres de thème et l’accès aux données de l’utilisateur actuel décrit dans les guides pour développeurs.

  • user_preference_field_name
    La clé utilisée pour détecter la désactivation chez l’utilisateur actuel. Cela peut être :
    • une clé de champ personnalisé directe, par exemple disable_topic_hover_cards
    • un identifiant numérique, par exemple 1
    • une clé user_field_X, par exemple user_field_1

Fonctionnement de la correspondance

  1. Le composant vérifie d’abord les custom_fields et user_fields de l’utilisateur actuel pour :
    • le user_preference_field_name configuré
    • la même valeur convertie entre 1 et user_field_1 lorsque cela est approprié
  2. Si aucune correspondance n’est trouvée et que l’utilisateur actuel est membre du personnel (administrateur/modérateur) et que resolve_user_field_id_for_admins est activé, le composant appelle :
    • /admin/config/user-fields.json
      pour mapper la valeur configurée (nom du champ ou user_field_X) à son identifiant numérique.
  3. Avec l’identifiant numérique, il vérifie :
    • user_fields[id]
    • user_fields['user_field_' + id]
    • custom_fields[id]
    • custom_fields['user_field_' + id]

Toute valeur vraie à ces positions (par exemple 1, true, yes, on, checked) désactive les cartes au survol pour cet utilisateur.

Paramètres pour ce comportement

  • resolve_user_field_id_for_admins
    Lorsqu’activé (recommandé), les administrateurs peuvent configurer le champ soit par nom, soit par user_field_X, et le composant résoudra et correspondra automatiquement l’identifiant numérique.

  • debug_mode
    Lorsqu’activé, enregistre des informations détaillées de détection dans la console du navigateur pour le personnel, notamment :

    • quelles clés ont été vérifiées
    • où une correspondance a été trouvée (utilisateur actuel vs enregistrement complet de l’utilisateur)
    • l’identifiant numérique du champ utilisateur résolu, le cas échéant

Débogage

Si les cartes au survol n’apparaissent pas là où vous les attendez, utilisez le mode de débogage intégré :

  1. Activez debug_mode dans les paramètres de ce composant.
  2. Ouvrez la console de développement du navigateur.
  3. Passez la souris ou touchez un lien vers un sujet pertinent.

Vous verrez des messages similaires à :

  • Hover cards initialized – confirme l’initialisation et les emplacements activés.
  • Resolved admin user-field mapping – confirme la correspondance du nom/clé de votre champ utilisateur configuré vers un identifiant numérique (pour le personnel).
  • No disable field match found anywhere – confirme que les cartes au survol ne sont pas supprimées pour l’utilisateur actuel.

Pour déboguer où la carte devrait apparaître, vérifiez que :

  • votre lien cible est un lien interne vers un sujet (/t/...) que topicIdFromHref() peut analyser
  • le drapeau d’emplacement pertinent est activé :
    • 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

Paramètres et fonctionnalités prévus mais pas encore ajoutés :

  • Étiquettes exclues
  • Étiquettes incluses
  • Classes exclues
  • Classes incluses
  • Exclure OneBoxes et autres par défaut
  • Suggestions ??
6 « J'aime »
2

Pourriez-vous ajouter un lien d’aperçu fonctionnel ou quelques captures d’écran pour montrer à quoi cela ressemble ?

9 « J'aime »