Ich habe eine benutzerdefinierte Homepage erstellt, indem ich:
a) die Klasse .custom-homepage zur Landingpage hinzugefügt habe. Ich verwende dies, um einfach den Inhalt anzusprechen, den ich auf dieser speziellen Seite über mein benutzerdefiniertes CSS ausblenden/anpassen möchte.
b) neue Komponenten direkt in die Kopfzeile meines Standardthemas mit benutzerdefiniertem HTML eingefügt habe.
So sieht es aus:
<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("above-main-container", "custom-homepage", {
setupComponent(args, component) {
var topMenuRoutes =
component.siteSettings.top_menu.split('|')
.map(function(route) {return '/' + route});
// Die erste Seite, die in der Einstellung 'top_menu' aufgeführt ist, ist Ihre Homepage
var homeRoute = topMenuRoutes[0];
// Dies ruft unseren Code jedes Mal auf, wenn sich die Seite ändert
api.onPageChange((url) => {
// Überprüfen, ob wir uns auf der Homepage befinden
if (url === "/" || url === homeRoute ){
// Wenn es die Homepage ist, fügen Sie die Klasse 'custom-homepage' zum HTML-Tag hinzu
// und setzen Sie 'displayCustomHomepage' auf true
document.querySelector("html").classList.add("custom-homepage");
component.set("displayCustomHomepage", true);
} else {
// Wenn wir uns nicht auf der Homepage befinden, entfernen Sie die Klasse
// und setzen Sie `displayCustomHomepage` auf false
document.querySelector("html").classList.remove("custom-homepage");
component.set("displayCustomHomepage", false);
}
});
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/custom-homepage">
{{#if displayCustomHomepage}}
<div class="custom-homepage-wrapper mask-polygon">
<div class="custom-welcome-banner">
<h1 class="welcome-header-text">Willkommen bei Schwedens genossenschaftlicher Baukultur</h1>
<p>Hier können Sie fertige und geplante Projekte sehen, Wissen finden, Ratschläge erhalten - und Kontakt zu anderen aufnehmen, die landesweit zusammen bauen und leben.</p>
</div>
</div>
{{whos-online}}
{{search-menu}}
<div class="two-column-layout">
<div>
(Mein eigener Code für das Kartenbild ist hier, ich erspare es Ihnen)
</div>
<WANTED DIV>
(Hier möchte ich meinen Feed einfügen, vielleicht so etwas wie {{categories-topic- list topics=latest filter=“latest” limit=“10” … }})
</WANTED DIV>
</div>
{{/if}}
</script>
Bisher gut. Die Seite sieht so aus:
Das Problem ist, dass ich keine Kontrolle über den aktuellen Feed habe. Es ist einfach der Standard-Feed, dessen Breite und Position ich grob in meinem benutzerdefinierten CSS mit .custom-homepage + class angepasst habe, um Platz für die linke Karte zu schaffen. Er ist zum Beispiel derzeit unendlich. Ich möchte, dass er nur die neuesten 10 Beiträge anzeigt.
Meine Frage ist:
- Welche Klasse sollte ich ausblenden, um den aktuellen Feed auszublenden?
- Was ist die richtige Syntax, um stattdessen meine neuesten Beiträge in meinen eigenen Code einzufügen? Bitte sehen Sie den Abschnitt ‘WANTED DIV’ im obigen Code.
Live-Seite: https://bygg.boihop.co/
Vielen Dank für jede Hilfe dabei.