Startseite Blöcke

Themenkomponente
1
:information_source: Zusammenfassung Erstellen Sie eine benutzerdefinierte Homepage mit konfigurierbaren Blockkomponenten
:hammer_and_wrench: Repository Manuel Kostka / Discourse / Blocks / Homepage Blocks · GitLab
:question: Installationsanleitung So installieren Sie ein Theme oder eine Theme-Komponente
:open_book: Neu bei Discourse Themes? Anfängerleitfaden zur Verwendung von Discourse Themes

Installieren Sie diese Theme-Komponente

Diese Komponente kombiniert Funktionen von Right Sidebar Blocks und der benutzerdefinierten Homepage-Route. Sie initialisiert die Route und ermöglicht es Ihnen, Inhaltsblöcke auf der Homepage zu organisieren, was Flexibilität bei Layout und Inhaltsdarstellung bietet.

Unten sehen Sie zwei Beispielansichten: Die erste zeigt eine Homepage mit grundlegenden Blöcken, die übereinander gestapelt sind, während die zweite das gleiche Layout mit angewendeten benutzerdefinierten Stilen zeigt:

Screenshot 2025-01-14 at 10-40-23 Homepage Blocks
Screenshot 2025-01-14 at 10-40-23 Homepage Blocks1486×1654 215 KB

Screenshot 2025-01-14 at 10-41-01 Homepage Blocks
Screenshot 2025-01-14 at 10-41-01 Homepage Blocks1486×2797 321 KB

Blöcke bearbeiten

Sie können Blöcke über die Komponenteneinstellungen anpassen. Jeder Block wird durch Angabe seines Ember-Komponenten-Namens hinzugefügt:

Ein Screenshot einer Benutzeroberfläche mit mehreren Dropdown-Menüs und Namenseingaben mit der Bezeichnung "block-banner", "block-top-tags" und "block-upcoming-events" unter anderem. (Beschriftet von KI)
Ein Screenshot einer Benutzeroberfläche mit mehreren Dropdown-Menüs und Namenseingaben mit der Bezeichnung "block-banner", "block-top-tags" und "block-upcoming-events" unter anderem. (Beschriftet von KI)726×1152 46.5 KB

Nachdem Sie einen Block hinzugefügt haben, können Sie seine Eigenschaften mit den verfügbaren Parametern anpassen:

Das Bild zeigt eine Benutzeroberfläche mit Textfeldern für ein "Block-Banner", einschließlich Titel-, Untertitel- und Klassenoptionen. (Beschriftet von KI)
Das Bild zeigt eine Benutzeroberfläche mit Textfeldern für ein "Block-Banner", einschließlich Titel-, Untertitel- und Klassenoptionen. (Beschriftet von KI)726×753 28.9 KB

Verfügbare Blöcke

Sie können jede Ember-Komponente unter Angabe ihres Komponenten-Namens hinzufügen. Zusätzlich habe ich eine Sammlung von Blöcken unter Blocks · GitLab verfügbar. Dies sind hauptsächlich Variationen von Right Sidebar Blocks.

Detaillierte Informationen zu jedem Block, wie z. B. der Komponentenname, die verfügbaren Parameter und das Vorlagenlayout, finden Sie in der jeweiligen README-Datei.

Eine Dokumentationsseite für die Blockkomponente "Featured List", die Parameter und Vorlagencode für die Erstellung einer Featured List mit mehreren Filtern beschreibt. (Beschriftet von KI)
Eine Dokumentationsseite für die Blockkomponente "Featured List", die Parameter und Vorlagencode für die Erstellung einer Featured List mit mehreren Filtern beschreibt. (Beschriftet von KI)964×1114 57.8 KB

23 „Gefällt mir“
2

Das ist wirklich cool, Manuel, gute Arbeit! :+1:

4 „Gefällt mir“
3

@nolo könnte dies auch verwendet werden, um benutzerdefinierte Seiten zu erstellen und sie zur Seitenleistennavigation hinzuzufügen?

4

Dies ist eine Layout-Lösung für die benutzerdefinierte Homepage-Route. Natürlich können Sie etwas Ähnliches auf anderen benutzerdefinierten Routen verwenden. Aber das Hinzufügen und Integrieren dieser Routen in Ihre App ist eine andere Aufgabe.

1 „Gefällt mir“
7

Fehler: Beim Versuch, eine dynamische Komponente mit einer String-Definition (block-banner) in einer Strict-Mode-Vorlage aufzulösen, ist ein Fehler aufgetreten. Im Strict Mode ist die Verwendung von Strings zur Auflösung von Komponenten-Definitionen nicht gestattet. Sie können stattdessen die Komponenten-Definition importieren und direkt verwenden.
Ich habe diese Fehlermeldung erhalten.

1 „Gefällt mir“
8

Danke für die Meldung @xin_wei. Obwohl ich es nicht reproduzieren kann, auf Discourse-Version 3.6.0.beta1-dev und unter Verwendung meiner Blockkomponente von Manuel Kostka / Discourse / Blocks / Banner · GitLab.