Icône / Emoji de l'élément de navigation de Discourse

Composant de thème
1
:information_source: Résumé Ajouter une icône / un emoji avant un élément de navigation
:hammer_and_wrench: Dépôt GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item
:question: Guide d’installation Comment installer un thème ou un composant de thème
:open_book: Nouveau aux thèmes Discourse ? Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Bonjour :wave:

Avec ce composant de thème, vous pouvez ajouter une icône ou un emoji avant les éléments de navigation. Le composant de thème est basé sur Discourse Easy 'SVG Icon' and 'Emoji' in CSS.

nav item prefix

Ce paramètre peut également gérer les icônes et les emojis.

La règle à suivre est :

Icône

Si vous souhaitez ajouter une icône avant un élément de navigation :
icon:nav-item:icon-set:icon-name:icon-color

Vous devez d’abord définir le type, qui est icon si vous souhaitez ajouter une icône avant l’élément de navigation.

  • nav-item : latest, hot, new, unread, categories, etc…
  • icon-set : brands, regular, solid
  • icon-color : currentColor, HEX ou variable de couleur

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

icon

Emoji

Si vous souhaitez ajouter un emoji avant un élément de navigation :
emoji:nav-item:emoji-set:emoji-name:filter

Vous devez d’abord définir le type, qui est emoji si vous souhaitez ajouter un emoji avant l’élément de navigation.

  • nav-item : latest, hot, new, unread, categories, etc…
  • emoji-set : apple, google, twitter, win10, google_classic, facebook_messenger
  • filter : Il rend l’emoji noir en mode clair et blanc en mode sombre. Si l’emoji est survolé ou actif, il apparaîtra avec une transition. (facultatif)
    emoji-filter

Par exemple :
emoji:latest:twitter:rocket:filter
emoji:top:google:star
emoji:new:facebook_messenger:bell

Navigation de bureau

emoji

Navigation mobile

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

8 « J'aime »
2

Très cool Don, y a-t-il un espoir de faire fonctionner cela avec FontAwesome Pro ? J’utilise des icônes légères…

1 « J'aime »
3

Oui, je pense que c’est possible mais malheureusement je n’ai pas accès à la suite d’icônes pro. Cela fonctionne avec des SVG d’icônes donc si vous y avez accès, cela devrait fonctionner. Il faut modifier un peu le composant et ajouter ces SVG. Après, vous pourrez l’utiliser avec les paramètres. Et aussi, il est important de connaître l’usage légal des SVG d’icônes pro sur un site web, ce dont je ne suis pas sûr.

2 « J'aime »
4

Pourquoi n’y a-t-il pas de discussion de suivi :rofl: ? Chaque sujet que vous créez, je veux une notification !, comme le terme l’indique… VOUS DÉCHIREZ !

1 « J'aime »
5

Après la mise à jour de Discourse, l’icône ne s’affiche pas sur le terminal mobile, ce qui crée de la confusion. Quelqu’un est-il dans la même situation que moi ??

918be26963cb519ce9897825d269aee4_720
918be26963cb519ce9897825d269aee4_7201080×2460 490 KB

6

Cela ressemble à une vue de bureau dans votre capture d’écran (à en juger par l’icône hamburger dans le coin gauche), mais le composant fonctionne pour moi sur mobile. :thinking:

L'image affiche l'interface utilisateur d'une application, spécifiquement l'interface LilyPad, qui est probablement liée aux soins des animaux de compagnie ou au suivi des chiens. (Légendé par l'IA)
L'image affiche l'interface utilisateur d'une application, spécifiquement l'interface LilyPad, qui est probablement liée aux soins des animaux de compagnie ou au suivi des chiens. (Légendé par l'IA)1290×639 66.2 KB

7

Je suis d’accord avec ce que dit @sheng_hualuo à propos de la nouvelle navigation (menu déroulant) ; elle n’apparaît pas.

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

Ah, je le vois aussi dans la liste déroulante. :thinking:

Ceci est une capture d'écran d'une interface de médias sociaux montrant des catégories à gauche et une barre de recherche à droite. (Légendé par l'IA)
Ceci est une capture d'écran d'une interface de médias sociaux montrant des catégories à gauche et une barre de recherche à droite. (Légendé par l'IA)1290×836 83.1 KB

9

Oui, désolé, ce composant de thème et mes autres qui ont modifié la barre de navigation doivent être mis à jour depuis ce changement DEV: replace list control nav dropdown with DMenuMobile (#28324) · discourse/discourse@931485b · GitHub. Je vais réfléchir à une solution. Nous pouvons cibler facilement les éléments de navigation dans la modale mais le sélectionné n’a malheureusement pas de classe spécifique et je pense que nous devrons abandonner les navigations de bureau des composants.

4 « J'aime »
10

Bonjour :wave:

J’ai apporté une mise à jour à ce composant.

  1. Supprime la version de navigation de bureau sur mobile
  2. Ajoute la compatibilité avec la nouvelle navigation mobile

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

Malheureusement, nous ne pouvons pas l’ajouter ici car cette section n’a pas de classe spécifique pour l’élément de navigation.
Screenshot 2024-08-19 at 19.52.18

2 « J'aime »
11

Merci beaucoup pour la correction, mais je suis vraiment désolé que la fonctionnalité de la version de bureau ait été supprimée, car elle s’intègre parfaitement à mon site Web.

2 « J'aime »