Verwendung von Plugin Outlet Connectors aus einem Theme oder Plugin

[Discourse]

Discourse umfasst Hunderte von Plugin-Outlets, die verwendet werden können, um neuen Inhalt einzufügen oder bestehenden Inhalt in der Discourse-Benutzeroberfläche zu ersetzen. „Outlet-Argumente

[Firepup650 (Firepup Sixfifty)]

@Discourse

In älteren Versionen von Discourse war es nicht möglich, eine benutzerdefinierte Komponentendefinition zu exportieren. Stattdessen konnte man ein Objekt mit den Funktionen setupComponent(args, component) und teardownComponent(component) exportieren. Diese ältere Technik ist noch nicht offiziell veraltet, aber wir empfehlen, zukünftig auf den neuen Ansatz für den Komponentenexport umzusteigen.

Dies ist jetzt veraltet, richtig?
Deprecation notice: Defining connector classes via registerConnectorClass is deprecated. See https://meta.discourse.org/t/32727 for more modern patterns. [deprecation id: discourse.register-connector-class-legacy]

[Arkshine]

Das ist richtig; Sie können stattdessen api.renderInOutlet verwenden.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L982-L1008

[Firepup650 (Firepup Sixfifty)]

Ich glaube, es ist ein bisschen komplizierter als das
https://github.com/Firepup6500/discourse-custom-profile-link/blob/master/common/head_tag.html

[Arkshine]

Keine Sorge; ich werde sehen, was ich später für Sie tun kann (ich muss jetzt schlafen).

[Firepup650 (Firepup Sixfifty)]

Danke! (Entschuldigung, dass der Code ein Chaos ist, ich wollte nur, dass er funktioniert, als ich ihn das letzte Mal angefasst habe )

[cogdog (Alan Levine)]

Ich stecke hier etwas fest. Ich habe eine Benachrichtigung für meine Komponente erhalten, die in der HEAD-Datei meines Themes verwendet wird. Ich bin mir nicht sicher, wie ich sie mit api.renderInOutlet neu schreiben soll.

  const ajax = require('discourse/lib/ajax').ajax;
  const Topic = require('discourse/models/topic').default;
  // Wir verwenden ajax und das Topic-Modell von Discourse

  api.registerConnectorClass('above-main-container', 'featured-topics', {
    // above-main-container ist der Plugin-Outlet,
    // featured-topics ist der Name Ihrer benutzerdefinierten Komponente

    setupComponent(args, component) {

   // der Rest des Codes folgt

Ich glaube, ich habe versucht, api.registerConnectorClass durch api.renderInOutlet zu ersetzen, aber es hat nicht funktioniert. Ich bin hier kein Experte für Theme-Coding. Danke für jede Hilfe.

[Arkshine]

Sie können hier ein Beispiel sehen:

javascripts/discourse/initializers/stat-banner.js

StatBanner ist eine native Klasse, die im Verzeichnis components definiert ist:

javascripts/discourse/components/stat-banner.gjs

In Ihrem Fall wäre das api.renderInOutlet("above-main-container", YourClass)

Ich glaube nicht, dass Sie das in der HEAD-Datei tun können. Sie sollten Ihren Code in mehrere Dateien aufteilen.

Ich ermutige Sie, Discourse Theme CLI zu verwenden, da die Entwicklung einer Theme-Komponente damit viel einfacher ist!

Ist Ihre Theme-Komponente öffentlich?

[NateDhaliwal]

Gibt es eine Möglichkeit, den aktuellen Auslass in meiner .js-Datei zu erhalten?

[merefield (Robert)]

Ich glaube nicht, dass das möglich ist.

Früher war es möglich, parentView in Classic Components zu inspizieren.

Aber diese Eigenschaft wurde als veraltet markiert.

Get glimmer component access to stuff from the parent

Did this print a deprecation message to the console? It should’ve done, because we’ll be removing parentView access from PluginOutlet’s imminently. In fact, it’s so un-recommended that it should cause a warning banner to be shown to admins in the UI If you didn’t see any warnings, please let us know! (parentView is part of Ember’s classic component system, which we’re moving away from) If you want to access information from higher up in the tree, then it either needs to be pass…

[david (David Taylor)]

Was meinen Sie mit „den aktuellen Auslass erhalten“? Meinen Sie den Namen des Auslasses? Oder etwas anderes?

[NateDhaliwal]

Ich habe eine Lösung für mein Problem gefunden (hier), aber sie sah ungefähr so aus:

• Erstellen Sie .hbs- und .js-Dateien für 3 verschiedene Auslässe.
• Überprüfen Sie in jeder JS-Datei, ob der verwendete Auslass dem Wert der Einstellung banner_location entspricht.
• Wenn ja, zeigen Sie das Banner an. Wenn nicht, blenden Sie das Banner aus.

[david (David Taylor)]

Cool! Es sieht so aus, als ob Sie sich für die Verwendung von api.renderInOutlet mit einem dynamischen Wert für den Outlet-Namen entschieden haben