Im ersten Beitrag gibt es einen Link zu Github mit Kommentaren, die das Feature erklären. Ich glaube, dies ist immer noch eine experimentelle Funktion, und um sie auszuprobieren, müssen Sie die Discourse Theme CLI-Konsolen-App installieren, um Ihnen beim Erstellen von Themes zu helfen verwenden.
1 „Gefällt mir“
Danke für die Antwort, Manuel. Ich benutze bereits die CLI. Die Git-Dokumente zeigen, wie man benutzerdefiniertes HTML hinzufügt, aber keine tatsächlichen Komponenten. Ich möchte das Suchbanner hinzufügen, das bereits im Forum installiert ist. Kann ich es in home.hbs aufrufen oder muss ich ein neues HTML-Suchbanner erstellen, um es zu verwenden?
Wie wäre es, wenn Sie es dann auf der Homepage anzeigen?
1 „Gefällt mir“
Ja, das ist das Problem. Ich muss es auf der Homepage hinzufügen. Ich habe bereits ein benutzerdefiniertes hinzugefügt, jetzt habe ich 2. Ich werde eines aus dem Theme entfernen. Danke nochmal, sehr geschätzt.
1 „Gefällt mir“
Wie bereits erwähnt, funktioniert es bei mehreren Iterationen bei den nachfolgenden und nur beim ersten Mal wird der Filter nicht angewendet. Es würde also funktionieren, wenn ich dem Store einen anfänglichen Dry-Run hinzufüge:
Ich weiß nicht, wie ich das richtig debuggen kann, aber vielleicht hilft es, das Problem einzugrenzen.
3 „Gefällt mir“
Das klingt nach einem Cache, der aufgewärmt werden muss.
2 „Gefällt mir“
Ja, das hat damit zu tun, wie wir Daten vorladen. Ich habe einen PR mit einer möglichen Lösung bereit: DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub
Wird Anfang nächster Woche zusammengeführt.
5 „Gefällt mir“
Der obige PR wurde jetzt mit @manuel zusammengeführt, er sollte das Problem für Sie beheben. Vielen Dank nochmals für den Bericht!
2 „Gefällt mir“
Mir ist heute aufgefallen, dass das Hinzufügen einer Komponente zu einer Route über die neue empfohlene Methode nicht funktioniert, wenn dieser Theme-Modifikator verwendet wird.
import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";
export default apiInitializer("1.8.0", (api) => {
api.renderInOutlet("custom-homepage", welcomeBanner);
});
Die einzige Möglichkeit, wie es funktioniert, ist javascripts/connectors/custom-homepage/welcome-banner.hbs.
4 „Gefällt mir“
Scheint für mich zu funktionieren.. Rendern Sie bereits eine andere Komponente? Ich glaube, es gab das Problem, dass es nur mit einer funktioniert. Oder es liegt daran, dass ich es derzeit nur auf Stable verwende.
3 „Gefällt mir“
Ich muss noch mehr testen, ich bin mir nicht sicher, warum das im Moment bei mir nicht funktioniert.
2 „Gefällt mir“
Ich habe dies ziemlich oft zusammen mit meiner Homepage Blocks-Komponente verwendet. Zwei Vorschläge:
Standardklassen
Ich habe die Komponente so angepasst, dass sie dem Body immer eine Klasse homepage und einem Sidebar-Link mit href=\"/custom\" eine Klasse active hinzufügt. Könnten diese Funktionen standardmäßig für den Modifier sein?
api.onPageChange(() => {
const currentRoute = router.currentRoute.name;
const customHomepageLink = document.querySelector(
'.sidebar-section-link[href=\"/custom\"]'
);
if (currentRoute === "discovery.custom") {
document.body.classList.add("homepage");
if (customHomepageLink) {
customHomepageLink.classList.add("active");
}
} else {
document.body.classList.remove("homepage");
if (customHomepageLink) {
customHomepageLink.classList.remove("active");
}
}
});
});
(Ich wollte ursprünglich den Sidebar-Link standardmäßig hinzufügen, aber die Unfähigkeit, einen solchen Link in der Benutzeroberfläche zu bearbeiten, scheint mir ein echter Nachteil zu sein, siehe How can I edit sidebar links that are added with api.addCommunitySectionLink?)
Schneller erster Anstrich
Ich wüsste nicht, wie ich das technisch angehen soll. Aber ich frage mich, ob wir, wenn wir auf einer benutzerdefinierten Homepage landen, die typischerweise eine begrenzte Auswahl an Inhalten anzeigt, das FCP für die Homepage verbessern und sie bereits rendern könnten, während der Rest der App geladen wird? Vielleicht missverstehe ich die Natur der Single-App-Architektur hier… es ist einfach etwas enttäuschend, zuerst die Ladeanimation zu sehen und dann auf einer eher einfachen Seite zu landen, die an sich ziemlich sofort da sein könnte.
4 „Gefällt mir“
Vielleicht… bin mir nicht sicher. Es ist relativ einfach, diese Klasse jetzt zu jeder Komponentenvorlage hinzuzufügen, Sie müssen nur den bodyClass-Helfer verwenden. Zum Beispiel machen wir das in einem separaten Thema:
<template>
{{bodyClass "custom-homepage"}}
...
</template>
Dies erreicht dasselbe wie der onPageChange-Hook, ist aber zuverlässiger. Es wird diese Klasse nur dann auf den Body gesetzt, wenn die Komponente gerendert wird.
Wenn die Komponente bereits über alle benötigten Daten verfügt, dann ja, es gibt keinen Grund, warum sie nicht mit dem Rest der App gerendert werden kann. In den meisten Fällen muss die Komponente jedoch eine Anfrage stellen, um zusätzliche Daten zu erhalten, was den Ladeindikator auslöst. Ich kann mir ehrlich gesagt keine einfache Möglichkeit vorstellen, das schneller zu laden.
Während wir hier sind, haben wir diese Funktion zusätzlich verbessert. Bis vor kurzem war die Crawler-Ansicht der benutzerdefinierten Homepage nicht anpassbar. Jetzt ist sie über einen serverseitigen HTML-Outlet anpassbar: DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub
5 „Gefällt mir“
Ich habe mein Theme früher über die Admin-Oberfläche angepasst, aber da ich jetzt eine Deprecation-Warnung erhalte, schaue ich mir stattdessen die Option custom-homepage an.
Ich habe meinen <head> und CSS migriert, indem ich diesem Beispiel gefolgt bin. Mein Versuch ist hier. Bisher lief alles gut.
Das Problem ist nun, wie ich die Suchleiste und die Komponente „Wer ist online“ einfügen kann.
In meinem früheren <head> habe ich einfach {{whos-online}} und {{search-menu}} dort eingefügt, wo ich sie im Code haben wollte, aber das funktioniert hier nicht – ich kann nicht herausfinden, wie ich sie korrekt einfügen kann.
Könnte mir jemand hier in die richtige Richtung weisen oder die richtige Syntax kennen?
Das Endergebnis sollte so aussehen (derzeit auf meinen früheren, bald veralteten Code zurückgesetzt).
Ich habe mir das lokal kurz angesehen und bin auf ein Problem mit der WhosOnline-Komponente gestoßen. Aber nachdem ich den Server neu gestartet hatte, funktionierte es einwandfrei. Der Code, den ich in der Homepage-Komponente verwendet habe, war:
import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";
...
<template>
<WhosOnline />
</template>
Beachten Sie jedoch, dass SearchMenu immer vorhanden ist, da es im Kern enthalten ist, während <WhosOnline /> von einem Plugin stammt und nur registriert wird, wenn das Plugin aktiviert ist.
3 „Gefällt mir“
Das hat das „Wer ist online“-Menü und das Suchmenü gelöst! Großartig. Jetzt muss ich nur noch die Syntax herausfinden, um den Feed zu bekommen, den ich gerade hier sehe.
Derzeit wird er angezeigt, indem alles andere auf der Seite außer dem Feed ausgeblendet, die Heldenanzeige, die Online-Anzeige, das Suchmenü und die Links eingefügt und dann der Feed relativ zu diesen positioniert werden, indem das CSS überschrieben wird. Nicht ideal.
Ich bin kurz davor, ein benutzerdefiniertes Homepage-Layout zu erstellen, in dem ich alle Teile an ihren richtigen Stellen platzieren kann, aber mir fehlt noch, wie ich den Feed abrufen kann. Ich habe versucht, die aktuelle Seite mit Ember zu inspizieren und mir die Discourse App-Komponenten angesehen, um zu erfahren, wie ich ihn importieren kann, aber ohne Erfolg.
Irgendwelche Hinweise?
Ich würde eine Komponente wie Featured Lists verwenden, um eine Themenliste mit einer begrenzten Anzahl von Themen auf der Homepage hervorzuheben. Ich glaube, wenn Sie die Kernliste einfügen, erhalten Sie eine unendliche Liste, die Lazy Loading verwendet. Vielleicht ist das, was Sie wollen? Aber warum dann eine separate Homepage hinzufügen, anstatt Ihre Landingpage direkt auf dieser Themenlistenansicht aufzubauen?
Sie könnten sich auch meine Komponente Homepage Blocks ansehen, um Ihr Homepage-Layout zu gestalten. Sie können Komponenten hinzufügen und deren Reihenfolge über einen Editor anordnen. Die Komponente fügt auch eine Body-Klasse homepage und ein zusätzliches Wrapper-Element homepage-blocks hinzu, das Sie für eine bessere responsive Gestaltung verwenden können. Zum Beispiel könnten Sie ein Grid auf dem Wrapper definieren und Ihr Layout je nach Breite anpassen, sodass Sie auf breiten Bildschirmen ein Layout mit einer Seitenleiste und Hauptinhalt haben und auf schmaleren Ansichten ein einzelnes Zeilenlayout mit allen gestapelten Inhalten. Im Moment schrumpfen Ihre Seitenleistenelemente einfach, was bei einigen Breiten vielleicht nicht ideal aussieht.
Dies wäre ein einfaches Beispiel für ein Homepage-Grid, das das Layout je nach Breite wechselt: https://forum.zolidar.com.
1 „Gefällt mir“