Vorgestellte Kategorienüberschrift

[manuel (Manuel Kostka)]

	Zusammenfassung	Feature-Kategorien auf ausgewählten Ansichten.
	Repository-Link	Manuel Kostka / Discourse / Components / Featured Categories · GitLab
	Neu bei Discourse-Themen?	Anfängerleitfaden zur Verwendung von Discourse-Themen

Dieses Theme-Komponente installieren

Kartenansicht

Listenansicht

Einstellungen

Sie können zwischen den beiden oben genannten Layouts wechseln oder keines auswählen und Ihre eigenen Stile definieren. Sie können auch eine Route auswählen und einen Outlet für die Komponente festlegen.

Vorlage

.featured-categories {
  &__container {
  }
  &__heading {
  }
  &__list-container {
  }
  &__category-container {
  }
  &__category-link {
    .category-logo {}
    .category-name {}
    .category-description {}
}

[Zup]

Handy TC, danke.

Ich stelle mir eine Umschaltmöglichkeit vor, um nur auf der Startseite anzuzeigen, das Site-Logo anzuzeigen und die Site-Beschreibung unter dem Logo anzuzeigen. Das wären wünschenswerte Ergänzungen.

[manuel (Manuel Kostka)]

@Zup

Ein Umschalter, um es nur auf der Startseite anzuzeigen

Derzeit wird es in den globalen Listen (neueste/neu/ungelesen/beliebt) angezeigt. Ich habe darüber nachgedacht, in den Einstellungen ein Dropdown-Menü hinzuzufügen, um die globalen Seiten auszuwählen, auf denen es erscheinen soll. Also ja, das steht auf meiner Roadmap, sobald ich wieder Zeit dafür habe!

Welchen Nutzen hätte es, das Logo anzuzeigen? Auf den globalen Seiten bist du ohnehin fast schon „zuhause".

Was ich am meisten hinzufügen möchte, ist eine mobile Ansicht. Dafür hatte ich bisher keine Idee, weshalb es auf mobilen Geräten noch nicht angezeigt wird. Danke für den Hinweis! Falls du eine Idee dafür hast, lass es mich wissen!

[Zup]

@manuel

Welchen Anwendungsfall hätte die Einbindung des Logos?

Personalisierte Ästhetik und, kombiniert mit einer kurzen Beschreibung, ein schneller Einblick für neue Besucher in die Community sowie eine Erinnerung für bestehende Nutzer an die Mission der Community. Positioniert oberhalb oder links neben den Links.

Die standardmäßige Anzeige auf globalen Links sowie optional pro Kategorie (und Tag-Seiten?) würde als praktisches Navigationsmenü für priorisierte Bereiche dienen – das wäre mein primärer beabsichtigter Anwendungszweck. (Übrigens wäre die Möglichkeit, benutzerdefinierte Links einzubinden – nicht nur Kategorien – eine weitere wünschenswerte Funktion.)

Persönlich finde ich, dass die meisten Discourse-Seiten besonders beim ersten Besuch eher vage wirken, und standardmäßig halte ich die Discourse-Navigation für den durchschnittlichen Nutzer für verwirrend. Im Allgemeinen sind meine Seiten so gestaltet, dass sie nur wenige Bereiche (von vielen) priorisieren, und diese vorgeschlagenen Ergänzungen würden dem durchschnittlichen Nutzer sehr klar machen, was diese Bereiche sind, und den Zugriff darauf erleichtern.

[valsha (KingPin)]

Gute Komponente,
wir haben das „Versatile Banner" installiert. Wie können wir diese Komponente unter das „Versatile Banner" verschieben, sodass das „Versatile Banner" zuerst angezeigt wird und danach Ihre Komponente?
Vielen Dank.

[manuel (Manuel Kostka)]

Ja, beide Komponenten werden im selben Outlet gerendert. Ich weiß nicht, was in diesem Fall die Reihenfolge der Elemente verursacht? Auf meiner Seite wird sie standardmäßig unter dem Banner angezeigt.

Aber Sie sollten die Reihenfolge mit CSS-Deklarationen steuern können:

.below-site-header-outlet.categories-header {
  order: -1 !important;
}
.below-site-header-outlet.banner-themes {
  order: -2 !important;
}

[manuel (Manuel Kostka)]

@Zup

Übrigens wäre die Möglichkeit, benutzerdefinierte Links – nicht nur Kategorien – einzubinden, eine weitere wünschenswerte Funktion.

Das klingt nach vielen benutzerdefinierten Optionen. Ich möchte nicht zu viel Logik in diese Komponente einbauen.

Eine hervorgehobene Navigation klingt für mich eher nach einem Anwendungsfall für ein benutzerdefiniertes HTML-Banner? Du bräuchtest einfach einige Links mit Bildern und Titeln.

@Zup

Ich finde, die meisten Discourse-Seiten wirken besonders beim ersten Besuch eher vage, und standardmäßig kann die Discourse-Navigation für den Durchschnittsnutzer verwirrend sein.

Dem stimme ich zu! Ich denke, dedizierte Banner für Besucher und neu angemeldete Benutzer können hilfreich und einladend sein.

[JammyDodger]

In den Einstellungen für das „Vielseitige Banner" gibt es eine Option „Standort standardmäßig tauschen", falls dir das hilft?

Standort standardmäßig tauschen

Wenn eine andere bannerbezogene Komponente aktiv ist, kannst du damit deren Position mit der des Vielseitigen Banners tauschen.

[valsha (KingPin)]

Probier diese Einstellung, sie hat mir leider nicht geholfen

[Rhod (Rodolfo)]

Ich habe eine Theme-Komponente installiert, aber sie passt nicht in den Hauptinhalt, wodurch sie fehl am Platz (hässlich) aussieht. Ich benutze das Air-Theme.
Können Sie mir bitte helfen, wo ich die Komponente im dunkel gefärbten Container erscheinen lassen kann?

Es sieht so aus:

Ich möchte, dass es so aussieht:

[AkaiBukai]

Hallo,
ich fange gerade erst mit Discourse und Theming an.
Ich möchte oben eine Art Karten haben, wie man sie hier sehen kann: Secret World Legends - Funcom Forums
Diese Theme-Komponente scheint in diese Richtung zu helfen.
Ich habe sie installiert und konnte die Kategorien auswählen, die erscheinen sollen, aber ich habe nur die Titel bekommen.
Was Sinn macht, da ich noch kein Bild eingestellt habe.

Meine Frage (die wahrscheinlich eine dumme Frage ist, da sie noch niemand sonst gestellt hat) ist, wie ich das Bild der Kategorien einstellen kann.
Und wie ich sie “hochlade”?

Vielen Dank für jede Hilfe.

[Heliosurge (Dan DeMontmorency)]

Gehen Sie zu Ihren Kategorieeinstellungen, mit denen Sie eine Kategorie erstellt haben, und wählen Sie die Registerkarte „Bild“.

Bild hochladen

[Vasan_Cannane]

Hallo, ich bin neu bei Discourse und habe eine Frage zum Header der hervorgehobenen Kategorien

Ich versuche, dies zu erreichen, aber es gelingt mir nicht.

Sie haben ein paar Codezeilen angegeben:

html.categories-header{
  .below-site-header-outlet.categories-header {
    .wrap {
      .categories-header-item {
        [each item's link, logo, name..]
      }
    }
  }
}

Wie kann ich den Link, das Logo und den Namen des Elements angeben?

Kann mir das jemand erklären?

Danke

[Arkshine]

Hallo, willkommen

Wenn Sie ein Bild wie das im Beispiel anzeigen möchten, müssen Sie die relevanten Kategorien in den Einstellungen der Theme-Komponente auswählen und sicherstellen, dass jeder von ihnen ein Bild zugewiesen ist (Kategorieeinstellungen → Bilder → Kategorie-Logo-Bild).

[Vasan_Cannane]

Dies ist die Einstellung der Theme-Komponente „Featured Categories“ und ich kann nichts finden

[Arkshine]

Sie müssen Ihre Kategorieeinstellung bearbeiten:

Klicken Sie auf die Registerkarte Bilder:

…und laden Sie ein Kategorie-Logo-Bild hoch!

[Vasan_Cannane]

Ich habe eine Reihe von Produkten, wie kann ich die Produkte in mehrere Spalten aufteilen?

[Arkshine]

So etwas?

Wenn ja, versuchen Sie es mit diesem CSS. Fügen Sie es Ihrem Theme-CSS oder in einer Komponente hinzu.

Im Inneren sehen Sie Variablen, die Sie steuern können.
Sie können die Anzahl der Spalten, den Abstand zwischen den Elementen und die Breite jedes Elements auswählen.
Die Elemente werden automatisch gestapelt.

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 6;
    --ch-gap: 2.5em;
    --ch-width: 110px;
    
    display: grid !important;
    
    grid-template-columns: repeat(auto-fill, minmax(var(--ch-width), 0fr));
    gap: var(--ch-gap) !important;
    
    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap))) !important;
}

[Vasan_Cannane]

Danke für die Hilfe.

Kann ich um weitere Hilfe bitten?

Das ist, was ich erreichen möchte.

Können Sie mir dabei bitte helfen?

[Arkshine]

Versuchen Sie es mit etwas wie diesem:

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 4;
    --ch-gap-row: 2em;
    --ch-gap-col: 6em;
    --ch-width: 120px;
    
    & > div {
        width: var(--ch-width);
    }
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap-col))) !important;
}