Benutzerdefinierte Komponenten – Schaltfläche oder Text an jedem Plugin-Ausgang hinzufügen

Themenkomponente
1
:information_source: Zusammenfassung Schaltfläche oder Text überall hinzufügen
:hammer_and_wrench: Repository https://github.com/literatecomputing/discourse-custom-components
:question: Installationsanleitung So installieren Sie ein Theme oder eine Theme-Komponente
:open_book: Neu bei Discourse Themes? Anfänger-Leitfaden zur Verwendung von Discourse Themes

Diese Theme-Komponente installieren

Fügt an jedem Plugin-Outlet einen Link-Button oder beliebigen Text hinzu. (Ignorieren Sie die Wasserzeichen in den Bildern – ich habe diese Screenshots auf einer Staging-/Testseite aufgenommen.)

Um zu sehen, wo sich die Plugin-Outlets befinden, verwenden Sie Introducing Discourse developer toolbar, um sie zu finden. Wenn Sie nicht wissen, was ein Plugin-Outlet ist, können Sie sich Using Plugin Outlet Connectors from a Theme or Plugin ansehen, aber diese Komponente ermöglicht es Ihnen, mit einigen Einschränkungen, Text in jedem Plugin-Outlet einzufügen, ohne programmieren zu müssen oder wirklich zu verstehen, was ein Plugin-Outlet ist.

image
image602×138 15.1 KB

Das Bild zeigt eine Einstellungs-Oberfläche für benutzerdefinierte Schaltflächen, einschließlich Feldern für Schaltflächentext, Titel, URL, Klasse, Symbol und Gruppen, mit einem Beispiel-Button namens „Custom Component Demo Button!“. (Von der KI beschriftet)
Das Bild zeigt eine Einstellungs-Oberfläche für benutzerdefinierte Schaltflächen, einschließlich Feldern für Schaltflächentext, Titel, URL, Klasse, Symbol und Gruppen, mit einem Beispiel-Button namens „Custom Component Demo Button!“. (Von der KI beschriftet)1097×738 76.1 KB

Dieses Bild zeigt eine Theme-Einstellungs-Oberfläche zum Bearbeiten von benutzerdefinierten Textblock-Komponenten in einem Foren-Design, mit Optionen zur Anzeige bestimmter Textelemente, Konfiguration von Block-Outlets, Anwendung von Klassenstilen und Steuerung der Anzeige basierend auf Benutzergruppen. (Von der KI beschriftet)
Dieses Bild zeigt eine Theme-Einstellungs-Oberfläche zum Bearbeiten von benutzerdefinierten Textblock-Komponenten in einem Foren-Design, mit Optionen zur Anzeige bestimmter Textelemente, Konfiguration von Block-Outlets, Anwendung von Klassenstilen und Steuerung der Anzeige basierend auf Benutzergruppen. (Von der KI beschriftet)1084×621 64.7 KB

Ich begann mit der Entwicklung dieses Plugins für jemanden, der einen „Klicken Sie auf diesen Button, um zu abonnieren, damit Sie PMs senden können“-Button auf Benutzerprofilen und Benutzerkarten anzeigen wollte. Er wollte, dass der Button angezeigt wird, wenn der Benutzer keine PMs senden konnte. Da ich nicht immer so klug bin, wie ich gerne denke, habe ich die Komponente so geschrieben, dass sie Gruppen verwendet, um zu bestimmen, ob der Button angezeigt wird. Ein Problem mit diesem Ansatz war, dass sich Mitarbeiter nicht in der Abonnenten-Gruppe befanden, sodass ihnen der „Sie müssen abonnieren“-Button angezeigt wurde, obwohl sie PMs senden konnten. Außerdem war die Gruppe ausgeblendet, sodass sie sowieso nicht in einer Theme-Komponente verwendet werden konnte. Ich habe diese Theme-Komponente neu geschrieben, um currentUser.can_send_private_messages zu verwenden, um zu bestimmen, ob der Button angezeigt werden soll.

Für wen ist das gedacht?

Wenn Sie einen Button mit einem Link darin oder beliebigen Text einfügen möchten, der für bestimmte Gruppen angezeigt oder ausgeblendet wird, können Sie diese an jedem Plugin-Outlet einfügen. Sie möchten einen „Sie müssen abonnieren“-Link-Button zwischen jeder Nachricht einfügen, außer für diejenigen, die keine Mitglieder sind? Das erledigt diese Komponente. Sie möchten beliebige HTML an einem Plugin-Outlet einfügen, nur um zu sehen, wie es aussehen würde? Das erledigt diese Komponente.

Wie es Entwicklern hilft

Dieses Theme enthält einige einfache Beispiele dafür, wie man:

aber wenn Sie dies innerhalb eines <template> in einer .gjs-Datei versuchen, funktioniert es etwas anders (wie {{htmlSafe component.text}})

15 „Gefällt mir“
2

Leerzeichen machen den Text nicht fett.

Das Bild enthält zensierten Text mit der Aufschrift „Benutzerdefinierte Steckdose hinzufügen“, wobei das Wort „Steckdose“ geschwärzt ist. (Beschriftet von KI)
Das Bild enthält zensierten Text mit der Aufschrift „Benutzerdefinierte Steckdose hinzufügen“, wobei das Wort „Steckdose“ geschwärzt ist. (Beschriftet von KI)1080×684 96.9 KB

Tolles Bauteil!

5 „Gefällt mir“
3

Wäre es möglich, Platzhalter zu den Button-URLs hinzuzufügen, z. B. damit die URL die Themen-ID enthält, auf der sich der Benutzer befindet?

4

Ich bin mir nicht ganz sicher. Wenn Sie ein Budget haben, werde ich es mir ansehen.

Was würde Ihr Button tun, wenn er die Topic-ID hätte?

Wenn Sie es herausfinden und einen PR machen möchten, werde ich ihn wahrscheinlich akzeptieren.

Ich bin ziemlich sicher, dass die Antwort nein ist, aber dass Sie den hier beschriebenen Workaround verwenden könnten

2 „Gefällt mir“
5

Hallo @pfaffman

Wir möchten eine solche Schaltfläche zu jedem Thema für Mitglieder unserer Benutzergruppe für Geschäftskonten hinzufügen.
Die Schaltfläche würde dann das Erstellen einer neuen privaten Nachricht auslösen, die die aktuelle URL enthält, auf der sich der Benutzer befindet.

Auf diese Weise können unsere Geschäftskunden uns Anfragen senden, um bestimmte Themen anzuheften, hervorzuheben oder zu “sponsern”.

1 „Gefällt mir“
6

Wie Sie wissen, können Sie eine URL erstellen, die einen neuen Topic-Composer öffnet. Sie könnten diese URL zu dem Link machen, der von der Theme-Komponente hinzugefügt wird.

Ich glaube nicht, dass dies ohne das Hinzufügen von Code zur Theme-Komponente möglich ist (aber vielleicht doch?). Vielleicht hat jemand eine Idee dazu und bietet diese Lösung hier (oder im anderen Topic) an. Wenn nicht, können Sie mich kontaktieren oder in Marketplace mit einer Beschreibung dessen, was Sie benötigen, und einem Budget posten.

3 „Gefällt mir“