Argomenti in evidenza

No, non direttamente. Puoi scegliere le categorie, ma solo per limitare la selezione degli argomenti. Non vorrei aggiungere altra logica per abilitare questa opzione.

Una soluzione alternativa potrebbe essere quella di taggare automaticamente tutti i nuovi argomenti, usando un carattere jolly:

Oppure usa un componente diverso. Se riesci a spiegare un po’ di più l’aspetto che vuoi ottenere, forse posso consigliartene uno.

Grazie per la tua risposta.

Aggiungere un tag specifico per il componente comporterebbe un sovraccarico a lungo termine se decidessi mai di rimuovere questo componente.

Pertanto, la logica migliore per il componente sarebbe quella di selezionare automaticamente gli ultimi post se non viene specificato alcun tag.

Nel caso in cui dovessi mai rimuovere il componente, dovrò cercare tutti i thread che utilizzano il tag “featured” e rimuovere il tag da tutti.

Puoi rimuovere i tag dagli argomenti molto rapidamente filtrando per tag e utilizzando le opzioni di Azione di massa:

Penso che prenda solo quelli visibili sullo schermo, quindi spesso scorro verso il basso per caricarli tutti prima di applicare l’azione di massa. :+1:

1 Mi Piace

Beh, puoi anche semplicemente eliminare quel tag e non c’è più :lapide: :faccina_capovolta:

1 Mi Piace

In generale: Il componente è un fork dell’ Official Featured Tiles Component. La mia intera idea e motivazione era quella di avere un aspetto a schede con la funzionalità che quel componente offre. Non penso che aggiungerò altre funzionalità rispetto al componente originale. Il motivo è che, per quanto riguarda la manutenzione del codice, voglio essere in grado di seguire semplicemente le correzioni di compatibilità del componente ufficiale.

2 Mi Piace

Nel caso qualcuno fosse interessato: abbiamo modificato il componente delle schede in primo piano per consentire agli utenti di scorrere orizzontalmente tra tutti gli argomenti in primo piano (origine degli argomenti utilizzata: più recenti).

Questo è il CSS utilizzato:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    -ms-overflow-style: none; /* Nasconde la barra di scorrimento per MS Edge */
    scrollbar-width: none; /* Nasconde la barra di scorrimento per Mozilla Firefox */
    scroll-snap-type: x mandatory;
    scroll-padding: 8px;
}

.featured-card {
    scroll-snap-align: start;
}

.featured-cards-container::-webkit-scrollbar {
    display: none; /* Nasconde la barra di scorrimento sui browser basati su Webkit (Chrome, Safari, ecc.) */
    -webkit-overflow-scrolling: touch; /* Sui touchscreen il contenuto continua a scorrere per un po' dopo aver terminato il gesto di scorrimento */
}
3 Mi Piace

Richiesta di funzionalità.

Possiamo avere un’opzione per visualizzare questo in una pagina di categoria specifica?

ad esempio, se si visualizza Lounge, le schede in primo piano vengono mostrate qui

l’immagine mostrata è l’immagine della categoria. Sto usando il tema Air. Applicazione per mostrare argomenti in primo piano relativi a quella categoria dalla sua sottocategoria Frontier news.

Qual è la dimensione dell’immagine consigliata per l’immagine della scheda?

Ottimo, ma non supporta il tema FKB

Come posso impostare il numero massimo di caratteri per il titolo? Sto mostrando un estratto sulla card e questo si estende oltre il box con il testo del titolo e dell’estratto.

Non c’è un’impostazione per controllare il numero massimo di caratteri del titolo. Tuttavia, puoi aumentare l’impostazione altezza delle schede per adattare il contenuto.
image

Se non vuoi regolare ogni volta, puoi provare questo CSS nel tuo tema o in un componente.
Rimuove il limite di altezza della scheda e hai le seguenti opzioni:

  • se preferisci allungare la scheda
  • l’altezza massima dell’immagine.
  • le righe massime del titolo
  • le righe massime dell’estratto
.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};
        }
    }
}

Spero che questo aiuti!

1 Mi Piace

Grazie, in realtà avevo l’altezza definita di 350 prima di pubblicare, ma ho appena provato il tuo codice e sembra che regoli correttamente le dimensioni della scheda per i titoli con estratti.

2 Mi Piace

Tirando este do baú, é genial! Há alguma forma de ativá-lo também para a visualização em smartphone?

Per qualche motivo, lo scorrimento orizzontale non funziona più. Qualcuno è riuscito a farlo funzionare su desktop e mobile?

1 Mi Piace

Prova qualcosa del genere:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    scroll-snap-type: x mandatory;
    scroll-padding: 1.25rem;

    /* Rende la barra di scorrimento tangibile ma invisibile */
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;

    /* Oppure la visualizza ma sottile */
    // scrollbar-width: thin;
    // scrollbar-color: #91919185 transparent;

    /* Assicura che la barra di scorrimento sia subito sotto il contenitore invece che sotto l'altezza massima. */
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

Non sono sicuro che sia una buona idea nascondere la barra di scorrimento su un desktop; può essere frustrante accedervi.

Sottile e visibile (rendendo anche lo sfondo trasparente) mi sembra bene. Cosa ne pensi?

3 Mi Piace

Ora funziona sul desktop! Ma non sul cellulare. Ho già messo insieme un po’ di CSS per lo scorrimento orizzontale su mobile, ma non è molto sofisticato :smiley:

Ho anche aggiunto la regolazione del font poiché la dimensione del font del titolo era troppo grande per il piccolo schermo

.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 Mi Piace

C’è un modo per rendere l’intero elemento comprimibile e replicare lo stesso comportamento del componente Homepage Feature?

“A ‘Mostra estratto vuoto’ sta succedendo solo a me?”

Ho aggiornato questo componente e spostato il suo repository su GitLab: Manuel Kostka / Discourse / Components / Featured Topics · GitLab.

La nuova versione adotta un approccio di design leggermente diverso rimuovendo alcune opzioni di stile dalle impostazioni del tema. Fornisce invece due disposizioni di base (Schede e Elenco) e un modello più pulito per aggiungere dichiarazioni di stile personalizzate tramite CSS.

Se desideri continuare a utilizzare il componente precedente, è disponibile su GitHub - nolosb/discourse-featured-cards.

3 Mi Piace

È un po’ fuori tema, ma penso che sia un ottimo approccio. Trovo difficile non fornire un milione di impostazioni in un componente per amore della personalizzazione quando si dovrebbero semplificare le cose per l’utente, offrendo comunque un modo per personalizzare per un uso/utenti avanzati.

3 Mi Piace

Non l’ho ancora fatto su questo componente, ma un altro approccio che mi piace è offrire proprietà personalizzate come modo standard per personalizzare gli stili. Ad esempio, in questo modo, su Manuel Kostka / Discourse / Components / Extra Banners · GitLab :

Sul componente, puoi dichiarare lo stile con un segnaposto per la proprietà personalizzata e un valore predefinito:

background: var(--extra-banners-background, var(--secondary));
4 Mi Piace