Intestazione Categorie in Evidenza

[manuel (Manuel Kostka)]

	Riepilogo	Categorie delle funzionalità su alcune visualizzazioni.
	Collegamento al repository	Manuel Kostka / Discourse / Components / Featured Categories · GitLab
	Nuovo su Discourse Themes?	Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Visualizzazione a schede

Visualizzazione a elenco

Impostazioni

Puoi passare tra i due layout sopra oppure scegliere nessuno e definire i tuoi stili. Puoi anche selezionare una rotta e impostare un outlet per il componente.

Template

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

[Zup]

Grazie, Handy TC.

Immagino che sarebbero aggiunte utili un interruttore per visualizzare solo nella home page, per mostrare il logo del sito e per mostrare la descrizione del sito sotto il logo.

[manuel (Manuel Kostka)]

@Zup

Un interruttore per visualizzarlo solo nella homepage

Al momento appare nelle liste globali (ultimi/nuovi/letti/popolari). Stavo pensando di aggiungere un menu a tendina nelle impostazioni per selezionare le pagine globali in cui dovrebbe essere mostrato. Quindi sì, è nella mia roadmap, quando avrò di nuovo tempo per occuparmene!

Qual sarebbe il caso d’uso per avere il logo? Nelle pagine globali sei quasi “a casa” comunque, no?

Quello che mi interesserebbe davvero aggiungere è una visualizzazione per dispositivi mobili. Finora non ho avuto un’idea al riguardo, quindi non viene mostrato sui dispositivi mobili. Grazie per aver condiviso! Se hai un’idea al riguardo, fammelo sapere!

[Zup]

@manuel

Qual è il caso d’uso per avere il logo?

Estetica personalizzata e, se abbinata a una breve descrizione, offrirebbe una rapida panoramica della comunità ai nuovi visitatori e fungerebbe da promemoria per gli utenti esistenti riguardo alla missione della comunità. Posizionato sopra o a sinistra dei collegamenti.

Visualizzarlo di default nei collegamenti globali, nonché opzionalmente per categoria (e pagine dei tag?), costituirebbe un comodo menu di navigazione per le aree prioritarie: questo sarebbe il mio utilizzo principale. (A proposito, la possibilità di includere collegamenti personalizzati, non solo categorie, sarebbe un’altra funzionalità desiderabile.)

Personalmente, trovo che la maggior parte dei siti Discourse tenda a essere piuttosto vaga, specialmente al primo accesso, e credo che di default la navigazione di Discourse possa risultare confusa per l’utente medio. In generale, i miei siti sono progettati per dare priorità a poche aree (tra molte), e questi aggiunte proposte renderebbero molto chiaro all’utente medio quali sono queste aree, rendendole anche facilmente accessibili.

[valsha (KingPin)]

Buon componente,
abbiamo installato Versatile Banner. Come possiamo spostare questo componente SOTTO Versatile Banner?
In modo che il componente Versatile Banner venga visualizzato per primo e il tuo successivamente.
Grazie.

[manuel (Manuel Kostka)]

Sì, entrambi i componenti vengono renderizzati nello stesso outlet. Non so cosa causi l’ordine degli elementi in quel caso… Nel mio sito viene mostrato sotto il banner per impostazione predefinita.

Tuttavia, dovresti essere in grado di controllare l’ordine tramite dichiarazioni CSS:

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

[manuel (Manuel Kostka)]

@Zup

A proposito, la possibilità di includere collegamenti personalizzati - non solo le categorie - sarebbe un’altra funzionalità desiderabile

Questo sembra implicare molte opzioni personalizzate. Non vorrei aggiungere così tanta logica a questo componente.
Creare una navigazione in evidenza mi sembra più un caso d’uso per un banner HTML personalizzato? Ti basterebbero alcuni collegamenti con immagini e titoli.

@Zup

Trovo che la maggior parte dei siti Discourse tenda ad essere vaga, specialmente alla prima visita, e di default penso che la navigazione di Discourse possa essere confusa per l’utente medio.

Sono d’accordo! Penso che banner dedicati per i visitatori e per gli utenti appena registrati possano essere utili e accoglienti.

[JammyDodger]

Nelle impostazioni del Versatile Banner c’è un’opzione ‘swap default positioning’, potrebbe esserti utile?

swap default positioning

Se è attivo un altro componente relativo ai banner, usa questa opzione per scambiare la sua posizione con quella del Versatile Banner

[valsha (KingPin)]

Prova questa impostazione, non mi ha aiutato

[Rhod (Rodolfo)]

Ho installato un componente tema ma non si adatta al contenuto principale, facendolo sembrare fuori posto (brutto), uso il tema air.
Puoi aiutarmi per favore dove posso far apparire il componente all’interno del contenitore colorato scuro?

Sembra così:

Vorrei che apparisse così:

[AkaiBukai]

Ciao,
Sto appena iniziando con discourse e il theming..
Vorrei avere delle specie di schede in alto come puoi vedere qui: Secret World Legends - Funcom Forums
Questo componente del tema sembra aiutare in quella direzione..
L’ho installato e sono stato in grado di selezionare le categorie che voglio che appaiano, ma ho ottenuto solo i titoli..
Il che ha senso dato che non ho ancora impostato alcuna immagine..

La mia domanda (che probabilmente è una domanda stupida dato che nessun altro l’ha ancora posta) è come posso impostare l’immagine delle categorie..
E come le "carico"?

Grazie per qualsiasi aiuto..

[Heliosurge (Dan DeMontmorency)]

Vai alle impostazioni delle tue categorie che hai utilizzato per creare la categoria e seleziona la scheda immagine.

Carica immagine

[Vasan_Cannane]

Ciao, sono nuovo a Discourse, quindi ho una domanda sull’intestazione delle categorie in primo piano

Sto cercando di ottenere questo ma non ci riesco

Hanno fornito qualche riga di codice

html.categories-header{
  .below-site-header-outlet.categories-header {
    .wrap {
      .categories-header-item {
        [link, logo, nome di ogni elemento...]
      }
    }
  }
}

come posso specificare il link, il logo e il nome dell’elemento

Qualcuno può chiarire questo?

Grazie

[Arkshine]

Ciao, benvenuto

Se vuoi visualizzare un’immagine come quella nell’esempio, devi selezionare le categorie pertinenti nelle impostazioni del componente del tema e assicurarti che ognuna abbia un’immagine assegnata (impostazioni categoria → Immagini → Immagine del logo della categoria)

[Vasan_Cannane]

Questa è l’impostazione del componente del tema Categorie in primo piano e non riesco a trovare nulla

[Arkshine]

Devi modificare le impostazioni della tua categoria:

Fai clic sulla scheda Immagini:

…e carica un’Immagine del logo della categoria!

[Vasan_Cannane]

Ho una riga di prodotti, come posso suddividere i prodotti in più colonne?

[Arkshine]

Qualcosa del genere?

Se sì, prova questo CSS. Aggiungilo al tuo CSS del tema o in un componente.

All’interno, puoi vedere le variabili che puoi controllare.
Puoi scegliere il numero di colonne, lo spazio tra gli elementi e la larghezza di ciascun elemento.
Gli elementi si stanno impilando automaticamente.

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

Grazie per l’aiuto.

Posso chiedere un altro aiuto?

Questo è ciò che sto cercando di ottenere.

Puoi aiutarmi in questo?

[Arkshine]

Prova qualcosa del genere:

.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;
}