Featured Topics

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:

Oder verwenden Sie eine andere Komponente. Wenn Sie das gewünschte Aussehen etwas genauer erklären können, kann ich Ihnen vielleicht eine empfehlen.

Vielen Dank für Ihre Antwort.

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.

Sie können Tags sehr schnell aus Themen entfernen, indem Sie nach Tag filtern und die Optionen für Massenaktionen verwenden:

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. :+1:

1 „Gefällt mir“

Nun, du kannst dieses Tag auch einfach löschen und es ist weg :Grabstein: :umgedrehtes_Gesicht:

1 „Gefällt mir“

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.

2 „Gefällt mir“

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 */
}
3 „Gefällt mir“

Feature Request.

Können wir eine Option haben, dies auf einer bestimmten Kategorie-Seite anzuzeigen?

d.h. wenn Lounge aufgerufen wird, werden hier vorgestellte Karten angezeigt

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?

Großartig, aber er unterstützt das FKB-Theme nicht

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.
image

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:

  • ob Sie die Karte dehnen möchten
  • die maximale Bildhöhe.
  • die maximalen Titelzeilen
  • die maximalen Auszugzeilen
.featured-cards-container {
    $stretch_card: "true";
    $max-image-height: 10em;
    $max-title-lines: 3;
    $max-excerpt-lines: 4;
    
    height: inherit; 
    max-height: inherit;
    
    .featured-card {
        @if $stretch_card == "true" {
            height: inherit;
        }
        
        a.card-content .card-details {
            .topic-title {
                -webkit-line-clamp: $max-title-lines;
            }
            
            .topic-excerpt {
                -webkit-line-clamp: $max-excerpt-lines;
            }
        }

        a.card-content .card-image {
            height: #{$max-image-height};
            min-height: #{$max-image-height};
        }
    }
}

Ich hoffe, das hilft!

1 „Gefällt mir“

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.

2 „Gefällt mir“

Ich grabe das hier aus, das ist genial! Gibt es eine Möglichkeit, es auch für die Smartphone-Ansicht zu aktivieren?

Aus irgendeinem Grund funktioniert das horizontale Scrollen nicht mehr. Konnte es jemand auf Desktop und Mobilgeräten zum Laufen bringen?

1 „Gefällt mir“

Versuchen Sie es mal so:

.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?

3 „Gefällt mir“

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 :smiley:

Außerdem habe ich die Schriftgröße angepasst, da die Titelschriftgröße für die kleine Bildschirmgröße zu groß war

.featured-cards-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
    align-content: flex-start;
    overflow-x: auto;
    max-height: 350px;
}
.featured-cards-container .featured-card {
    min-width: 90%;
    
}


.featured-card a.card-content .card-details .topic-title {
    font-size: var(--font-up-1);
}
3 „Gefällt mir“

Gibt es eine Möglichkeit, das gesamte Element einklappbar zu machen und das gleiche Verhalten wie die Komponente Homepage Feature zu replizieren?

„Ist ‚Auszug ist leer‘ nur bei mir?“

Ich habe diese Komponente aktualisiert und ihr Repository nach GitLab verschoben: Manuel Kostka / Discourse / Components / Featured Topics · GitLab.

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.

Wenn Sie die vorherige Komponente weiterhin verwenden möchten, ist sie unter GitHub - nolosb/discourse-featured-cards verfügbar.

3 „Gefällt mir“

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.

3 „Gefällt mir“

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 :

Auf der Komponente können Sie den Stil mit einem Platzhalter für die benutzerdefinierte Eigenschaft und einem Standardersatzwert deklarieren:

background: var(--extra-banners-background, var(--secondary));
4 „Gefällt mir“