Verwendung der neuen Custom-Homepage-Funktion

[manuel (Manuel Kostka)]

Probiere die neue benutzerdefinierte Homepage-Funktion aus: https://github.com/discourse/discourse/pull/26291
@pmusaraj Ich frage mich, was der beste Ansatz ist, um Komponenten hinzuzufügen?

1. Das Hinzufügen des benutzerdefinierten Homepage-Modifikators aktiviert die Route discovery.custom und zeigt eine Standardinformationsmeldung an, die im custom-homepage-Outlet gerendert wird:

   

2. Ich füge eine Komponente zum Outlet hinzu und sie wird stattdessen gerendert:

   
   

3. Wenn ich jedoch mehr als eine Komponente hinzufüge, erhalte ich einen Fehler:

   
   

4. Ich kann jedoch weitere Komponenten zu anderen Outlets hinzufügen. Hier ist eine Ansicht mit sichtbaren Plugin-Outlets:

   
   

Ich frage mich also, wie das neue Outlet funktionieren soll:

• In gewisser Weise bräuchte ich das Outlet nicht. Ich kann einfach die anderen verfügbaren verwenden und Komponenten auf die Route discovery.custom beschränken.
• Obwohl es scheint, dass ich mindestens eine Komponente im Outlet platzieren muss, sonst wird die Standardmeldung gerendert? Das Platzieren einer leeren Vorlage dort funktioniert nicht.
• Andererseits, wenn ich mehrere Komponenten zum Outlet hinzufügen könnte, müsste ich überhaupt keine Routenlogik haben. Komponenten würden nur auf der Homepage angezeigt, da das Outlet auf anderen Routen nicht verfügbar wäre?

[merefield (Robert)]

@manuel

Wenn ich jedoch mehr als eine Komponente hinzufüge, erhalte ich einen Fehler:

Das ist nicht überraschend?

Legen Sie hier eine einzelne Vorlagendatei ab und verwenden Sie diese, um auf Ihre Komponenten im Komponentenordner zu verweisen (von denen Sie dann viele haben können)

<MeineErsteKomponente />
<MeineZweiteKomponente />
<MeineDritteKomponente />

Oder was auch immer Sie möchten … bleiben Sie einfach bei einer Vorlage in diesem Ordner?

[manuel (Manuel Kostka)]

@merefield

Das ist nicht überraschend?

Ich dachte, es liegt daran, dass es mit anderen Ausgängen funktioniert? Wie auf dem obigen Screenshot zu sehen ist.

[merefield (Robert)]

Oh Entschuldigung, Sie haben Recht, es scheint (normalerweise) legal zu sein, mehr als eine Template-Datei in einer einzigen Theme Component zu veröffentlichen (ich war mir bewusst, dass sie Konflikte zwischen Theme Components und Plugins handhabt, sodass sie alle gerendert werden können). Neugierig.

Ich frage mich aber: Warum sollte man das tun wollen? Man hat weniger Kontrolle über das Layout?

Ein Template zwingt Sie, das gesamte Layout in einem Rutsch mit beliebig vielen Unterkomponenten zusammenzustellen?

Das Verhalten scheint jedoch inkonsistent zu sein …

[manuel (Manuel Kostka)]

Wenn ich eine benutzerdefinierte Homepage erstelle, möchte ich mehrere vorhandene Komponenten darauf rendern können. Und wie bereits erwähnt, funktioniert dies bereits, wenn andere verfügbare Outlets verwendet und die Komponenten auf die benutzerdefinierte Homepage-Route beschränkt werden.

Wenn ich nur eine Komponente zum jeweiligen benutzerdefinierten Homepage-Outlet hinzufügen kann und auch eine hinzufügen muss, um den Standard-Yield zu deaktivieren, schränkt dies meine Layoutkontrolle tatsächlich ein.

[merefield (Robert)]

Aber warum können Sie nicht alle diese Komponenten in einer Vorlage referenzieren?

Oh, weil sie aus verschiedenen Theme Components stammen?

Ich glaube, wir haben hier aneinander vorbeigeredet.

Wenn ich sage, legen Sie alle Ihre (Ember-)Komponenten im Ordner „Components“ ab, meine ich genau das, aber in einer Theme Component.

Ich denke, der Kernpunkt hier ist einfach: „Warum verhält sich dieser Outlet anders?“ Ich verstehe, dass Sie versuchen, verschiedene Theme Components zu kombinieren.

[manuel (Manuel Kostka)]

@merefield

Oh, weil sie von verschiedenen Theme Components stammen?

Ja, das ist die Idee. Ich habe oben nur die einfachen Textvorlagen als Veranschaulichung verwendet. Ich benutze z. B. Featured Lists. Und ich kann es mit diesen Einstellungen im Outlet rendern:

Aber wenn ich ein weiteres auf die gleiche Weise rendern möchte, erhalte ich den Fehler mit mehreren Connectors.

@merefield

Ich denke, der Kernpunkt ist einfach: „Warum verhält sich dieses Outlet anders?“

[pmusaraj (Penar Musaraj)]

Danke fürs Testen @manuel und für die Fragen.

@merefield

Ich denke, der Kernpunkt ist einfach: „Warum verhält sich dieser Outlet anders?“

Das wusste ich auch nicht, aber ich habe nachgesehen und ungefähr herausgefunden, warum. Wir haben kürzlich eine Unterscheidung zwischen klassischen Plugin-Outlets und Wrapper-Plugin-Outlets eingeführt, in diesem PR von letztem Jahr: DEV: Allow PluginOutlets to 'wrap' a core implementation by davidtaylorhq · Pull Request #23110 · discourse/discourse · GitHub

Die Wrapper-Plugin-Outlets sind diejenigen, die nur einen Connector zulassen, die anderen lassen mehrere zu. Zur Veranschaulichung ist der aktuelle Core-Plugin-Outlet-Code dieser:

<PluginOutlet @name="custom-homepage">
  {{#if this.currentUser.admin}}
    <p class="alert alert-info">
      {{i18n "custom_homepage.admin_message"}}
    </p>
  {{/if}}
</PluginOutlet>

und er lässt nur einen Connector zu. Aber wenn ich den Core-Outlet-Code ändere in:

<PluginOutlet @name="custom-homepage" />

wird er problemlos mehrere Connector-Templates zulassen. Wir könnten diese Änderung im Core für dieses spezielle Outlet vornehmen, aber dieser Unterschied ist allgemeiner. Er erscheint Entwicklern jedoch etwas undurchsichtig, ich verstehe Ihren Punkt.

Beachten Sie auch, dass mehrere Connectors ein Ordnungsproblem haben, soweit ich weiß, haben wir keinen Mechanismus, um die Reihenfolge zu bestimmen.

Ich denke, der beste Ansatz hier ist sowieso, was @merefield vorgeschlagen hat: Verwenden Sie ein Template und verweisen Sie von dort auf Ember-Komponenten.

@manuel

Obwohl es scheint, dass ich mindestens eine Komponente im Outlet platzieren muss, sonst wird die Standardwarnung gerendert?

Die Standardwarnung wird übrigens nur für Administratoren angezeigt.

[manuel (Manuel Kostka)]

Vielen Dank für die Erklärungen!

Ich habe damit weitergespielt. Es ist wirklich neu und eine Freude zu benutzen!

Ich habe drei vorhandene Komponenten für dieses Layout verwendet, und das würde ich als gängigen Ansatz beim Erstellen einer benutzerdefinierten Homepage erwarten. Ich konnte nur eine davon zum Wrapper-Outlet hinzufügen, deshalb denke ich, dass ein einfaches Outlet hier hilfreicher wäre.

[manuel (Manuel Kostka)]

Eine weitere Beobachtung: Ich habe einen Link in der Seitenleiste über die /custom-URL eingefügt:

Er wird auf der benutzerdefinierten Route nicht hervorgehoben.

Wenn ich die Logik mit den Hervorhebungen in der Seitenleiste richtig verstehe, sollte er auch auf der Stamm-URL / hervorgehoben werden.

[pmusaraj (Penar Musaraj)]

Ich sehe Ihr Problem nach einem kurzen Blick auf die Komponente Featured Lists klarer. Eine Option ist, diese Komponente zu refaktorieren und alle Listen in eine Ember-Komponente auszugeben. Dann könnten Sie diese Komponente zu einem Plugin-Wrapper-Outlet hinzufügen.

Eine andere Option ist, dem benutzerdefinierten Homepage-Template ein zweites Plugin-Outlet hinzuzufügen, so etwas wie <PluginOutlet @name="below-custom-homepage"/>.

Ich halte vielleicht aus keinem guten Grund an diesem custom-homepage-Outlet mit einer Nachricht für Administratoren fest, ehrlich gesagt. Diese Warnung ist nicht besonders nützlich…

@manuel

Es wird nicht hervorgehoben, wenn man sich auf der benutzerdefinierten Route befindet.

Ja, das kann knifflig sein. In meinem lokalen Test gerade funktioniert /custom nicht richtig. Es ist besser, / zu verwenden, das korrekt weiterleitet. Aber es wird immer noch nicht hervorgehoben.

[manuel (Manuel Kostka)]

@pmusaraj

Ja, das kann knifflig sein. Bei meinem lokalen Test gerade funktioniert /custom nicht richtig. Es ist besser, / zu verwenden, das richtig weiterleitet. Aber es hebt trotzdem nichts hervor.

Das scheint ein häufiges Problem zu sein. Wenn ich / verwende, werden auch andere Routen, die als Startseite festgelegt sind, nicht hervorgehoben.

@pmusaraj

Ich halte vielleicht aus keinem guten Grund an diesem custom-homepage-Outlet mit einer Nachricht für Administratoren fest, um ehrlich zu sein. Diese Warnung ist nicht besonders nützlich…

Ja, ich könnte mir auch vorstellen, dass die Warnung einfach anders angezeigt wird. Der Hauptvorteil von Wrapper-Outlets scheint zu sein, dass ich Kerncode bedingt übergeben oder benutzerdefinierten Code rendern kann. Aber das wäre für diese Info-Nachricht wahrscheinlich nie der Fall.

@pmusaraj

Ich sehe Ihr Problem klarer, nachdem ich mir die Featured Lists Komponente kurz angesehen habe. Eine Möglichkeit besteht darin, diese Komponente zu refaktorieren und alle Listen in einer Ember-Komponente auszugeben. Dann könnten Sie diese Komponente zu einem Plugin-Wrapper-Outlet hinzufügen.

Da muss ein Missverständnis vorliegen. Die Komponente umschließt bereits alle Listen in einer einzigen Wrapper-Komponente und rendert sie in jedem gegebenen Outlet:

Ich kann die Komponente also problemlos zum aktuellen Wrapper-Outlet auf der benutzerdefinierten Startseite hinzufügen.
Was ich nicht tun kann, ist, dieses Outlet zu verwenden, um mehr als eine eigenständige Komponente auf der benutzerdefinierten Startseite zu rendern. Komponenten, die ich als Theme-Komponenten installiert hätte, wie diese drei:

Meine Annahme ist, dass die Verwendung mehrerer eigenständiger Theme-Komponenten zum Erstellen einer benutzerdefinierten Startseite der übliche Ansatz wäre. Anstatt alles von Grund auf in einem Theme zu erstellen.

@pmusaraj

Eine andere Möglichkeit ist, dem benutzerdefinierten Startseitentemplate ein zweites Plugin-Outlet hinzuzufügen, so etwas wie <PluginOutlet @name="below-custom-homepage" />.

Wenn Sie in Erwägung ziehen, ein weiteres Outlet hinzuzufügen oder die Outlet-Einrichtung zu ändern, könnte ich weiteres Feedback aus meiner bisherigen Nutzung geben. Ich werde diesen Kaninchenbau jedoch in Details verpacken

Ich habe festgestellt, dass das Outlet innerhalb des main-outlet-Elements gerendert wird. Die Gesamtstruktur dieser Elemente ist dann:

• main-outlet-Wrapper
  • sidebar-wrapper
  • main-outlet
    • custom-homepage-Outlet

Als Designer bin ich bei der Anordnung von Elementen auf einer benutzerdefinierten Startseite mit diesem Outlet nicht sehr flexibel. Für das oben gezeigte Design habe ich stattdessen das before-main-outlet-Outlet verwendet, nicht nur, weil ich mehr als eine Komponente platzieren kann, sondern auch, weil es keine Komponenten innerhalb des main-outlet-Elements verschachtelt.
Die Struktur, wie sie im obigen Screenshot gezeigt wird, sieht so aus:

• main-outlet-Wrapper
  • sidebar-wrapper
  • Komponente: Suchbanner
  • Komponente: Hervorgehobene Themen
  • Komponente: Hervorgehobene Listen
  • main-outlet

Der Vorteil ist, dass ich Elemente über die gesamte Breite des main-outlet-Wrappers anordnen kann und nicht nur innerhalb des main-outlet-Elements. Um den Punkt zu verdeutlichen: Wenn ich eine der Komponenten im aktuellen custom-homepage-Outlet rendern würde, würde sie verschachtelt innerhalb des main-outlet-Elements gerendert werden, wie hier:

Meiner Meinung nach würde das größte Maß an Flexibilität für benutzerdefinierte Designs durch ein Plugin-Outlet geboten, das platziert wird

• als direktes Kind des main-outlet-Wrappers (ähnlich dem before-main-outlet-Outlet)
• innerhalb eines Wrapper-Divs

Dieses Wrapper-Div würde alle darin hinzugefügten Komponenten bündeln und eine einfache Reihenfolge ermöglichen. Eine solche Struktur würde dann so aussehen:

• main-outlet-Wrapper
  • sidebar-wrapper
  • custom-homepage-wrapper
    • Komponente: Suchbanner
    • Komponente: Hervorgehobene Themen
    • Komponente: Hervorgehobene Listen
  • main-outlet

Das ist also mein Feedback als Designer. Ich schätze, es liegt an Ihnen zu entscheiden, wie sehr dies mit dem übereinstimmt, was Sie als übliche Anwendung für die benutzerdefinierte Startseitenfunktion betrachten würden.

[merefield (Robert)]

Vermutlich ist diese Seite „oberflächlich“, da sie für den Benutzer, aber nicht für „Googlebot“ erscheint und somit nicht indexiert wird?

[pmusaraj (Penar Musaraj)]

Korrekt, ja, für die Crawler-Ansicht habe ich mich entschieden, nur das Top-Menü auszugeben. Ich kann aus der Rails-App nicht wirklich wissen, was ein Theme auf dieser Route ausgibt.

@manuel

Wenn Sie in Erwägung ziehen, einen weiteren Ausgang hinzuzufügen oder die Ausgangskonfiguration zu ändern, kann ich Ihnen weiteres Feedback aus meiner bisherigen Nutzung geben.

Ich denke über die Vorschläge hier nach, @manuel, und werde mir bald etwas Zeit nehmen, um einige Änderungen zu testen. Bitte Sie mir Geduld.

[merefield (Robert)]

Ich habe die Unterstützung für diese Funktion in Discourse Bars 🍻 🍸 (a sidebar framework) - #43 by merefield hinzugefügt

[manuel (Manuel Kostka)]

Ein Problem, auf das ich gestoßen bin: Ich wollte die Homepage Feature-Komponente auf der benutzerdefinierten Homepage anzeigen. Aber dann werden die Themen auf dieser Route nicht gefiltert. Die Komponente zeigt einfach jedes aktuelle Thema an, das ein Bild hat.

Der Code in der Komponente lautet:

    const topicList = await this.store.findFiltered("topicList", {
      filter: "latest",
      params: {
        tags: [`${settings.featured_tag}`],
        order: sortOrder,
      }

Und es scheint, dass die Parameter auf der benutzerdefinierten Homepage nicht angewendet werden. Ansonsten funktioniert es einwandfrei. Ich bin mir nicht sicher, warum das passiert?

Bearbeitung: Ich verwende die gleiche Methode in der Featured Lists-Komponente. Wenn ich diese Komponente auf der benutzerdefinierten Homepage verwende, wird der Filter ebenfalls nicht angewendet. Aber nur bei der ersten Liste… wenn es mehr gibt, werden die folgenden Listen alle korrekt gefiltert.

[pmusaraj (Penar Musaraj)]

Interessant, ich bin mir nicht sicher, warum das so ist, vielleicht gibt es eine Logik im topicList-Store, die an die Discovery-Routen gebunden ist? Die benutzerdefinierte Homepage ist keine Discovery-Route.

Ich bin neugierig, funktioniert dieselbe Komponente mit den Parametern beispielsweise in einer Admin-Route? Oder einer Benutzerprofilroute? Können Sie das vielleicht überprüfen?

@tynaut stieß auf ein ähnliches Problem, daher muss hier wahrscheinlich etwas behoben werden.

[manuel (Manuel Kostka)]

Ich habe es mit der Komponente „Featured Lists“ versucht, sie hat bereits eine Einstellung, um die Komponente überall anzuzeigen. Dies schließt keine Admin-Routen ein, aber ich habe es auf allen anderen (statische Seiten, Benutzerprofile usw.) versucht und es scheint überall zu funktionieren, außer auf der benutzerdefinierten Homepage.

Das andere Seltsame ist, wie erwähnt, dass nur die erste Liste nicht gefiltert wird. Zum Beispiel filtere ich hier zwei Listen, eine für den Tag „Featured“ und eine für die Kategorie „General“, und so werden die Listen auf allen anderen Routen angezeigt:

Nur auf der benutzerdefinierten Homepage-Route werden sie so angezeigt:

Die erste Liste filtert also nicht mehr nach dem Tag, aber die zweite Liste filtert nach der Kategorie. Und wenn ich die Reihenfolge der Listen ändere, filtert die erste Liste nicht nach der Kategorie, aber die zweite filtert nach dem Tag:

[pmusaraj (Penar Musaraj)]

Ich fand es etwas schwierig, dies mit der Featured Homepage-Komponente richtig zu reproduzieren, da sie zu viele andere Bedingungen mischt.

Ich kann es jedoch leicht mit einer abgespeckten Komponente reproduzieren. Ich habe dies hier in ein Beispiel-Repository gepusht: GitHub - pmusaraj/discourse-sample-custom-homepage

Die sample-list Komponente dort sollte nur Themen mit dem featured-Tag einbeziehen, tut dies aber nicht (sie zieht für mich die ersten 3 Themen). Wenn ich den custom_homepage-Modifikator aus der about.json-Datei dieses Themes entferne, werden die richtigen Themen abgerufen.

Ich werde jemanden finden, der sich mit dem Store-Service besser auskennt, um sich das anzusehen. Danke!

[pinder99 (Pushpender Singh)]

Hallo

Können Sie bitte erklären, wie man eine Komponente (Suchbanner oder eine benutzerdefinierte Komponente, die bereits im Forum installiert ist) in die Datei home.hbs einfügt, damit sie auf der neuen benutzerdefinierten Homepage angezeigt wird?

Danke