api.decorateWidget - wie finde ich die Namen der Vorlagen?

[Ed_Bobkov (Ed)]

Wie finde ich die Discourse-Template-Standorte, um sie im Code festzulegen?
Besonders interessiert mich der korrekte Name der Benutzerkarte

@Johani

decorateWidget()

Mit dieser Methode können Sie HTML vor oder nach einem Widget hinzufügen. Sie verwenden es wie folgt

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('NAME:LOCATION', helper => {

  });
</script>

[tshenry (Taylor)]

Es gibt eine sehr nützliche Theme-Komponente, um die Plugin-Öffnungen (plugin outlets) unserer verschiedenen Handlebars-Templates aufzuspüren: (deprecated) Plugin outlet locations theme component. Am Ende des ersten Beitrags finden Sie einen Link zu einer Vorschau der Komponente auf unserer Theme-Creator-Website. Damit können Sie die meisten Plugin-Öffnungen finden, ohne sie auf Ihrer eigenen Seite installieren zu müssen.

Etwas, das Sie beachten sollten, ist, dass Templates und Widgets zwei separate Konzepte sind. Das heißt nicht, dass sie nicht zusammenarbeiten können, falls erforderlich, indem ein Widget an einer Plugin-Öffnung eines Templates angebracht wird. Häufiger ist es jedoch, Connector-Komponenten oder Controller zu verwenden, um mit Plugin-Öffnungen zu arbeiten, ähnlich wie in einem Plugin.

Dieser Abschnitt des Entwicklerhandbuchs behandelt vieles von dem, wonach Sie suchen. Ich empfehle Ihnen außerdem, die GitHub-Repositories von Theme-Komponenten in unserer Kategorie Customization > Theme durchzugehen, um einige gute Beispiele zu sehen.

[Ed_Bobkov (Ed)]

Vielen Dank für den Hinweis! Ich habe den erforderlichen Teil user-card-post-names:after gefunden.

'Plugin Outlet Locations' by @RGJ

Ich habe versucht, ihn im ursprünglichen Code zu verwenden, aber es hat nicht funktioniert.

@simon

<script type="text/discourse-plugin" version="0.8.27">
    api.decorateWidget('poster-name:after', helper => {
        const attrs = helper.attrs;
        if (attrs.userCustomFields && attrs.userCustomFields.user_field_4) {
            return helper.h('span.poster-user-field', helper.attrs.userCustomFields.user_field_4);
        }
    });
</script>

Ich habe poster-name:after zu user-card-post-names:after geändert, aber es hat nicht funktioniert und das benutzerdefinierte Feld ist auf der Benutzerkarte nicht sichtbar. Hast du eine Idee, woran das liegen könnte?

[tshenry (Taylor)]

Sie können decorateWidget() nicht auf einem Plugin-Outlet verwenden. Versuchen Sie stattdessen etwas wie folgt:

<script type="text/discourse-plugin" version="0.8.42">
    const h = require("virtual-dom").h;
    api.createWidget("user-card-custom-field", {
      html(attrs) {
        const userCustomFields = attrs.user.custom_fields;
        if (userCustomFields.user_field_4) {
            return h('span.poster-user-field', userCustomFields.user_field_4);
        }
      }
    });
</script>

<script type="text/x-handlebars" data-template-name="/connectors/user-card-post-names/user-card-custom-field">
    {{mount-widget widget="user-card-custom-field" args=(hash user=user)}}
</script>

mount-widget übergibt das Benutzerobjekt, das wir aus dem Plugin-Outlet im Kern verfügbar haben, und macht es in den Attributen des von uns erstellten user-card-custom-field-Widgets verfügbar.

app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs

Stellen Sie sicher, dass Sie user_field_4 nach Bedarf zu Ihren Einstellungen für „öffentliche Benutzerbenutzerfelder

[Ed_Bobkov (Ed)]

Vielen Dank! Alles funktioniert.