Wie fügt man einen benutzerdefinierten Button zur Profilkarte hinzu?

Entwickler
1

Wie kann ich eine benutzerdefinierte Schaltfläche in unserer Benutzerprofilzusammenfassung und Kartenansicht hinzufügen?
Wir wollten eine CTA hinzufügen, die etwas tut (z. B. weiterleitet), aber keine Daten speichert…

image
image1812×800 88.3 KB

und auch in der Profilkarte:

image
image946×252 49.6 KB

Mein anfänglicher Code unten erreicht fast alles, aber er befindet sich im Header-Bereich und ich konnte keinen Weg finden, ihn in der Benutzerprofilzusammenfassung und Karte zu implementieren:

<script type="text/discourse-plugin" version="0.4">
    api.decorateWidget('header-buttons:after', helper => {
        if (Discourse.User.current()) {
            const cta = function() {
                // do something here...
            };
            return helper.h('button#create-new', {
                className: "btn fa fa-plus",
                onclick: cta
            }, 'CTA' );
        }
    });
</script>
1 „Gefällt mir“
2

Hallo, willkommen hier :wave:
Sie müssten hier Plugin-Outlets verwenden, speziell user-profile-controls.
Ein Beispiel finden Sie hier:

3 „Gefällt mir“
3

Vielen Dank @Arkshine, und ich bin wirklich neu in diesen Plugins, daher dachte ich, es wäre etwas Ähnliches wie Header-Buttons gemacht worden.

In jedem Fall ist user-profile-controls ein Plugin? Können Sie mich anleiten, wie ich es erreichen kann?

4

Ich empfehle dir, Using Plugin Outlet Connectors from a Theme or Plugin zu lesen; das wird deine Frage beantworten!

Im Wesentlichen ist ein Plugin-Outlet eine Möglichkeit, Code an einer bestimmten Stelle einzufügen.

Es wäre empfehlenswert, eine Theme-Komponente mit der Theme CLI zu erstellen und separate Dateien zu verwenden, wie ich es in meiner Theme-Komponente hier getan habe (zögere nicht, mein Repository zu klonen, damit du es testen/modifizieren kannst):

Du kannst es jedoch immer noch von deinem <script>-Tag aus testen:

In deinem Fall würdest du schreiben:

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  Template content here
</script>

Beachte die erste Zeile. Wir verwenden user-profile-controls als Connector-Namen, und my_connector_name kann beliebig benannt werden.

4 „Gefällt mir“
5

Großartig! Ich verstehe es jetzt und da es im Skript-Tag getestet werden kann, können wir es zumindest zuerst testen, bevor wir die Komponente erstellen. Nochmals vielen Dank :beers:

3 „Gefällt mir“
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.