Nein, nicht direkt. Sie können Kategorien auswählen, aber nur, um die Auswahl von Themen einzuschränken. Ich möchte keine zusätzliche Logik hinzufügen, um diese Option zu ermöglichen.
Eine Problemumgehung könnte darin bestehen, alle neuen Themen mit einem Platzhalter automatisch zu kennzeichnen:
Das Hinzufügen eines spezifischen Tags für die Komponente würde langfristig zu einer zusätzlichen Belastung führen, falls ich mich jemals entscheide, diese Komponente zu entfernen.
Daher wäre die beste Logik für die Komponente, die neuesten Beiträge automatisch auszuwählen, wenn kein Tag angegeben ist.
Falls ich die Komponente jemals entferne, muss ich alle Threads suchen, die den Tag „featured“ verwenden, und sie alle enttaggen.
Ich glaube, es werden nur die auf dem Bildschirm sichtbaren erfasst, daher scrolle ich oft nach unten, um sie alle zu laden, bevor ich die Massenaktion anwende.
Allgemeiner Hinweis: Die Komponente ist ein Fork der offiziellen Featured Tiles Component. Die gesamte Idee und Motivation für mich war es, ein Karten-Look mit der Funktionalität zu haben, die diese Komponente bietet. Ich glaube nicht, dass ich dem Original-Komponente weitere funktionale Features hinzufügen werde. Der Grund dafür ist, dass ich im Hinblick auf die Code-Wartung in der Lage sein möchte, einfach die Kompatibilitätsfixes der offiziellen Komponente zu verfolgen.
Falls es jemanden interessiert: Wir haben die Komponente für hervorgehobene Karten so modifiziert, dass Benutzer horizontal durch alle hervorgehobenen Themen scrollen können (verwendete Themenquelle: neueste).
Dies ist das verwendete CSS:
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
-ms-overflow-style: none; /* Scrollleiste für MS Edge ausblenden */
scrollbar-width: none; /* Scrollleiste für Mozilla Firefox ausblenden */
scroll-snap-type: x mandatory;
scroll-padding: 8px;
}
.featured-card {
scroll-snap-align: start;
}
.featured-cards-container::-webkit-scrollbar {
display: none; /* Scrollleiste auf Webkit-basierten Browsern (Chrome, Safari usw.) ausblenden */
-webkit-overflow-scrolling: touch; /* Auf Touchscreens scrollt der Inhalt nach Abschluss der Scroll-Geste noch eine Weile weiter */
}
Das angezeigte Bild ist das Kategoriebild. Ich verwende das Air Theme. Anwendung zum Anzeigen von vorgestellten Themen, die sich auf diese Kategorie beziehen, aus ihrer Unterkategorie Frontier News.
Welche Bildgröße wird für das Kartenbild empfohlen?
Wie kann ich die maximale Zeichenanzahl für den Titel festlegen? Ich zeige einen Auszug auf der Karte an und er ragt über die Box mit dem Titel und dem Auszugstext hinaus.
Es gibt keine Einstellung, um die maximale Anzahl von Titelzeichen zu steuern. Sie können jedoch die Einstellung cards height erhöhen, um den Inhalt anzupassen.
Wenn Sie nicht jedes Mal etwas anpassen möchten, können Sie dieses CSS in Ihrem Theme oder einer Komponente ausprobieren.
Es entfernt das Höhenlimit der Karten, und Sie haben die folgenden Optionen:
Danke, ich hatte tatsächlich Ihre definierte Höhe von 350 vor dem Posten, aber ich habe gerade Ihren Code ausprobiert und er scheint die Kartengröße für Titel mit Auszügen entsprechend anzupassen.
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
scroll-snap-type: x mandatory;
scroll-padding: 1.25rem;
/* Macht die Scrollleiste greifbar, aber unsichtbar */
scrollbar-width: auto;
scrollbar-color: transparent transparent;
/* Oder zeigt sie an, aber dünn */
// scrollbar-width: thin;
// scrollbar-color: #91919185 transparent;
/* Stellt sicher, dass die Scrollleiste direkt unter dem Container liegt und nicht unter der maximalen Höhe. */
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
Ich bin mir nicht sicher, ob es eine gute Idee ist, die Scrollleiste auf einem Desktop zu verstecken; es kann frustrierend sein, darauf zuzugreifen.
Dünn und sichtbar (auch mit transparentem Hintergrund) sieht für mich gut aus. Was meinen Sie?
Das funktioniert jetzt auf dem Desktop! Aber nicht auf dem Handy. Ich habe schon etwas CSS für das horizontale Scrollen auf dem Handy zusammengebastelt, aber es ist nicht wirklich ausgefeilt
Außerdem habe ich die Schriftgröße angepasst, da die Titelschriftgröße für die kleine Bildschirmgröße zu groß war
Die neue Version verfolgt einen etwas anderen Designansatz, indem sie bestimmte Stiloptionen aus den Theme-Einstellungen entfernt. Stattdessen bietet sie zwei grundlegende Layout-Anordnungen (Karten und Liste) und eine sauberere Vorlage zum Hinzufügen benutzerdefinierter Stildeklarationen über CSS.
Es ist zwar etwas themenfremd, aber ich finde es einen großartigen Ansatz. Ich habe Schwierigkeiten, in einer Komponente nicht unzählige Einstellungen zur Anpassung anzubieten, wenn man die Dinge für den Benutzer einfach halten sollte, aber dennoch eine Möglichkeit zur Anpassung für fortgeschrittene Benutzer/Anwendungsfälle bieten sollte.
Das habe ich bei dieser Komponente noch nicht gemacht, aber ein anderer Ansatz, den ich mag, ist das Anbieten von benutzerdefinierten Eigenschaften als Standardmethode zum Anpassen von Stilen. Z.B. so, auf Manuel Kostka / Discourse / Components / Extra Banners · GitLab :