Hover-Karten für Themen

[denvergeeks]

	Zusammenfassung	Zeigt stark anpassbare Themenkarten als Hover-Tooltips beim Mauszeiger über Themenlinks an
	Vorschau	Github Readme
	Repository	https://github.com/denvergeeks/discourse-topic-hover-cards
	Installationsanleitung	So installieren Sie ein Theme oder eine Theme-Komponente
	Neu bei Discourse-Themen?	Anfängerleitfaden zur Verwendung von Discourse-Themen

Installieren Sie diese Theme-Komponente

Reiche Hover-Vorschaukarten für interne Themenlinks in Themen, Antworten, Themenlisten, der Kategorien-Startseite, Dokumentationskategorien, Kanban-Boards und vorgeschlagenen Themen.

Wenn Benutzer über einen Themenlink fahren (oder auf Mobilgeräten tippen), erscheint eine Karte mit Themenminiaturansicht, Titel, Auszug, Kategorie, Tags und wichtigen Statistiken.

Funktionen

• Hover-Karten für interne Themenlinks in:
  • Themeninhalt (ursprünglicher Beitrag)
  • Antworten
  • Standard-Themenlisten (/latest, /top, /tags, Kategorielisten für Themen usw.)
  • Themenlisten auf der Kategorien-Startseite (Kategorien + Neueste, Nur Kategorien und verwandte Layouts)
  • Ansichten für Dokumentationskategorien
  • Kanban-artige Board-Ansichten
  • Vorgeschlagene Themen
• Responsive Layout:
  • Desktop-Karte mit konfigurierbarer Dichte und Platzierung der Miniaturansicht
  • Mobile Bottom-Sheet-Vorschau mit Öffnen per Tippen
• Konfigurierbarer Inhalt:
  • Miniaturbild
  • Kategorie-Abzeichen
  • Tags
  • Titel
  • Auszug (bereinigt von Bildern/Lightboxen)
  • Ursprünglicher Beitragender
  • Veröffentlichungsdatum
  • Aufrufe, Antworten, Likes, letzte Aktivität
• Benutzerindividuelle Deaktivierung über ein benutzerdefiniertes Benutzerfeld
• Nur für Administratoren zugänglicher Debug-Modus zur sicheren Fehlerbehebung

Einstellungen

Layout & Timing

• card_width
  Jeder CSS-Längenwert (für Desktop), z. B. 32rem, 420px, 40vw, clamp(20rem, 40vw, 36rem).

• card_max_height
  Jeder CSS-Wert für max-height, z. B. 10rem, 480px, 50vh, min(60vh, 32rem).

• card_delay_ms
  Verzögerung vor der Anzeige der Hover-Karte in Millisekunden (Standard: 300).

• enable_on_mobile
  Wenn aktiviert, zeigt ein Tippen auf einen unterstützten internen Themenlink eine mobile Vorschau an.

• mobile_width_percent
  Breite der mobilen Bottom-Sheet-Vorschau als Prozentsatz der Viewport-Breite (Standard: 100).

• mobile_thumbnail_height
  Höhe der Miniaturansicht in Pixeln für die mobile Vorschau.

Dichte

• density
  Desktop-Dichte: default, cozy oder compact.

• density_mobile
  Mobile Dichte: default, cozy oder compact.

Diese entsprechen den Discourse-„Dichte“-Mustern und passen lediglich Abstände und Zeilenhöhen an.

Miniaturansicht & Platzierung

• show_thumbnail / show_thumbnail_mobile
  Anzeigen/Ausblenden des Themenbildes (falls vorhanden) auf Desktop und Mobilgeräten.

• thumbnail_placement
  Wie die Miniaturansicht auf dem Desktop positioniert wird:

  • top
  • left
  • right
  • bottom
    Auf Mobilgeräten wird die Miniaturansicht immer oben in der Karte gerendert.

• image_size_percent
  Für Desktop-Layouts mit left und right steuert dies die Breite der Miniaturansicht als Prozentsatz der Hover-Kartenbreite.

Felder pro Viewport

Für jeden Block unten haben Sie sowohl Desktop- als auch Mobile-umschalter:

• 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
  Anzahl der Zeilen für den Auszug (CSS line-clamp).

• show_op / show_op_mobile
  Zeigt Avatar und Benutzername des ursprünglichen Beitragenden.

• 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

Wo Hover-Karten erscheinen

• enable_on_topics
  Themenlinks im ursprünglichen Beitrag.

• enable_on_replies
  Themenlinks in Antworten.

• enable_on_topic_lists
  Themenlinks in Standard-Themenlisten, z. B. /latest, /top, Kategorielisten für Themen.

• enable_on_category_homepage_topic_lists
  Themenlinks in den „Neuesten Themen“ oder entsprechenden Listen auf der Kategorien-Startseite:

  • Kategorien + Neueste Themen
  • Nur Kategorien
  • Verwandte Varianten, gerendert unter / oder /categories, je nach Konfiguration Ihrer Startseite.

• enable_on_doc_categories
  Themenlinks in Ansichten für Dokumentationskategorien (falls zutreffend).

• enable_on_kanban_boards
  Themenlinks, die in Kanban-artigen Board-Layouts gerendert werden (falls zutreffend).

• enable_on_suggested_topic_links
  Links im Abschnitt „Vorgeschlagene Themen“.

---

Benutzerindividuelle Deaktivierung

Sie können einzelnen Benutzern ermöglichen, Hover-Karten über ein benutzerdefiniertes Benutzerfeld zu deaktivieren. Dies verwendet den standardmäßigen Theme-Einstellungsmechanismus und den Zugriff auf Daten des aktuellen Benutzers, wie in den Entwicklerleitfäden beschrieben.

• user_preference_field_name
  Der Schlüssel, der zur Erkennung der Deaktivierung beim aktuellen Benutzer verwendet wird. Dies kann sein:
  • ein direkter Schlüssel für ein benutzerdefiniertes Feld, z. B. disable_topic_hover_cards
  • eine numerische ID, z. B. 1
  • ein user_field_X-Schlüssel, z. B. user_field_1

Funktionsweise der Übereinstimmung

1. Die Komponente prüft zunächst die custom_fields und user_fields des aktuellen Benutzers auf:
   • den konfigurierten user_preference_field_name
   • denselben Wert, falls erforderlich, zwischen 1 und user_field_1 konvertiert
2. Wenn keine Übereinstimmung gefunden wird und der aktuelle Benutzer Mitarbeiter (Administrator/Moderator) ist und
   resolve_user_field_id_for_admins aktiviert ist, ruft die Komponente auf:
   • /admin/config/user-fields.json
     um den konfigurierten Wert (Feldname oder user_field_X) auf seine numerische ID abzubilden.
3. Mit der numerischen ID wird geprüft:
   • user_fields[id]
   • user_fields['user_field_' + id]
   • custom_fields[id]
   • custom_fields['user_field_' + id]

Jeder wahrheitswerte Wert an diesen Positionen (z. B. 1, true, yes, on, checked) deaktiviert Hover-Karten für diesen Benutzer.

Einstellungen für dieses Verhalten

• resolve_user_field_id_for_admins
  Wenn aktiviert (empfohlen), können Administratoren das Feld entweder per Name oder user_field_X konfigurieren, und die Komponente löst und matcht die numerische ID automatisch.

• debug_mode
  Wenn aktiviert, protokolliert detaillierte Erkennungsinformationen in die Browserkonsole für Mitarbeiter, einschließlich:

  • welche Schlüssel geprüft wurden
  • wo eine Übereinstimmung gefunden wurde (aktueller Benutzer vs. vollständiger Benutzerdatensatz)
  • die aufgelöste numerische Benutzer-Feld-ID, falls vorhanden

---

Fehlerbehebung

Wenn Hover-Karten nicht dort erscheinen, wo Sie es erwarten, verwenden Sie den integrierten Debug-Modus:

1. Aktivieren Sie debug_mode in den Einstellungen dieser Komponente.
2. Öffnen Sie die Entwicklertools des Browsers.
3. Fahren Sie über einen relevanten Themenlink oder tippen Sie darauf.

Sie werden Nachrichten ähnlich folgenden sehen:

• Hover cards initialized – bestätigt die Initialisierung und die aktivierten Standorte.
• Resolved admin user-field mapping – bestätigt die Zuordnung Ihres konfigurierten Benutzerfeldnamens/-schlüssels zu einer numerischen ID (für Mitarbeiter).
• No disable field match found anywhere – bestätigt, dass Hover-Karten für den aktuellen Benutzer nicht unterdrückt werden.

Um zu debuggen, wo die Karte erscheinen sollte, stellen Sie sicher, dass:

• Ihr Ziel-Link ein interner Themenlink (/t/...) ist, der von topicIdFromHref() geparst werden kann
• das entsprechende Standort-Flag aktiviert ist:
  • 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

[chapoi]

Könntest du einen funktionierenden Vorschau-Link oder einige Screenshots hinzufügen, um zu zeigen, wie das aussieht?