Icona / Emoji dell'elemento Nav di Discourse

Componente del tema
1
:information_source: Riepilogo Aggiungi Icona / Emoji prima dell’elemento di navigazione
:hammer_and_wrench: Repository GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item
:question: Guida all’installazione Come installare un tema o un componente del tema
:open_book: Nuovo ai temi di Discourse? Guida per principianti all’uso dei temi di Discourse

Installa questo componente del tema

Ciao :wave:

Con questo componente del tema puoi aggiungere icone o emoji prima degli elementi di navigazione. Il componente del tema si basa su Discourse Easy 'SVG Icon' and 'Emoji' in CSS.

nav item prefix

Questa impostazione può gestire anche icone ed emoji.

La regola da seguire è:

Icona

Se vuoi aggiungere un’icona prima di un elemento di navigazione:
icon:nav-item:icon-set:icon-name:icon-color

Per prima cosa devi definire il tipo che è icon se vuoi aggiungere un’icona prima dell’elemento di navigazione.

  • nav-item: latest, hot, new, unread, categories ecc…
  • icon-set: brands, regular, solid
  • icon-color: currentColor, HEX o variabile di colore

Ad esempio:
icon:latest:solid:rocket:currentColor
icon:top:regular:star:var(--gold)
icon:unseen:solid:compass:#228C22

icon

Emoji

Se vuoi aggiungere un’emoji prima di un elemento di navigazione:
emoji:nav-item:emoji-set:emoji-name:filter

Per prima cosa devi definire il tipo che è emoji se vuoi aggiungere un’emoji prima dell’elemento di navigazione.

  • nav-item: latest, hot, new, unread, categories ecc…
  • emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
  • filter: Rende l’emoji di colore nero in modalità chiara e bianca in modalità scura. Se l’emoji è in hover o attiva, verrà visualizzata con una transizione. (opzionale)
    emoji-filter

Ad esempio:
emoji:latest:twitter:rocket:filter
emoji:top:google:star
emoji:new:facebook_messenger:bell

Navigazione Desktop

emoji

Navigazione Mobile

Screenshot 2024-08-19 at 19.51.40
Screenshot 2024-08-19 at 19.51.40345×236 6.62 KB

8 Mi Piace
2

Molto bello Don, c’è qualche speranza di farlo funzionare con FontAwesome Pro? Uso icone light…

1 Mi Piace
3

Sì, penso sia possibile ma sfortunatamente non ho accesso al set di icone pro. Funziona con le icone SVG quindi se hai accesso a questo, dovrebbe funzionare. Richiede di modificare leggermente il componente e aggiungere queste SVG. Dopodiché puoi usarlo con le impostazioni. E inoltre è importante quale sia l’uso legale delle icone SVG pro sul sito web, cosa di cui non sono sicuro.

2 Mi Piace
4

Perché non c’è un discorso di follow-up :rofl: ? Ogni argomento che crei, voglio una notifica!, come dice il termine… LO SPETTACOLO!

1 Mi Piace
5

Dopo l’aggiornamento di Discourse, il terminale mobile non visualizza l’icona, il che crea confusione. Qualcuno si trova nella mia stessa situazione??

918be26963cb519ce9897825d269aee4_720
918be26963cb519ce9897825d269aee4_7201080×2460 490 KB

6

Sembra la visualizzazione desktop nel tuo screenshot (a giudicare dall’icona hamburger nell’angolo in basso a sinistra), ma il componente funziona per me su mobile. :thinking:

L'immagine mostra l'interfaccia utente di un'applicazione, in particolare l'interfaccia LilyPad, che è probabilmente correlata alla cura degli animali domestici o al monitoraggio dei cani. (Sottotitolato dall'IA)
L'immagine mostra l'interfaccia utente di un'applicazione, in particolare l'interfaccia LilyPad, che è probabilmente correlata alla cura degli animali domestici o al monitoraggio dei cani. (Sottotitolato dall'IA)1290×639 66.2 KB

7

Concordo com o que @sheng_hualuo está dizendo sobre a nova navegação (dropdown); ela não aparece.

Screenshot_20240818_164227_Chrome
Screenshot_20240818_164227_Chrome904×166 15.3 KB

Screenshot_20240818_164343_Chrome
Screenshot_20240818_164343_Chrome904×1466 74.7 KB

8

oh lo vedo anche nel menu a discesa. :thinking:

Questo è uno screenshot di un'interfaccia di social media che mostra le categorie a sinistra e una barra di ricerca a destra. (Sottotitolato dall'IA)
Questo è uno screenshot di un'interfaccia di social media che mostra le categorie a sinistra e una barra di ricerca a destra. (Sottotitolato dall'IA)1290×836 83.1 KB

9

Sì, scusa, questo componente del tema e anche gli altri miei che hanno modificato la barra di navigazione devono essere aggiornati a causa di questa modifica DEV: replace list control nav dropdown with DMenuMobile (#28324) · discourse/discourse@931485b · GitHub. Ci penserò a una soluzione. Possiamo facilmente puntare alle voci di navigazione nel modale, ma quella selezionata purtroppo non ha una classe specifica e penso che dovremo abbandonare le navigazioni desktop dai componenti.

4 Mi Piace
10

Ciao :wave:

Ho apportato un aggiornamento a questo componente.

  1. rimuove la versione desktop della navigazione su mobile
  2. aggiunge la compatibilità alla nuova navigazione mobile

Screenshot 2024-08-19 at 19.51.40
Screenshot 2024-08-19 at 19.51.40345×236 6.62 KB

Sfortunatamente non possiamo aggiungere qui poiché questa sezione non ha una classe specifica per l’elemento di navigazione.
Screenshot 2024-08-19 at 19.52.18

2 Mi Piace
11

La ringrazio molto per la correzione, ma mi dispiace molto che la funzionalità della versione desktop sia stata rimossa, perché si integra perfettamente con il mio sito web.

2 Mi Piace