Ce composant de thème vous permet de mettre en évidence une catégorie (ou plusieurs) dans votre Discourse. Vous pouvez :
- Donner un style d’arrière-plan spécial à des catégories spécifiques
- Ajouter un lien vers la catégorie dans l’en-tête avec le même style spécial
Un cas d’utilisation typique concerne une catégorie contenant du contenu « Premium ».
Comment installer
Obtenir le codeNavigation des catégories et libellé de l’en-tête
Page des catégories
Configuration
Le composant de thème « Category Highlighter » dispose d’un paramètre principal : « Mettre en évidence les catégories ». Vous trouverez ce paramètre dans le panneau de configuration du composant de thème Category Highlighter.
Chaque catégorie que vous souhaitez mettre en évidence possède sa propre entrée dans ce paramètre. Le format de chaque entrée est :
category_slug~background~text_color~header_label~header_label_mobile~parent_slug~alternate_link
Voici un exemple de ce format :
premium~linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%)~#88562e~:star: Premium~:star:
Il existe six valeurs possibles, séparées par un tilde (~). Passons en revue chaque valeur.
Slug de la catégorie
Il s’agit du « slug » de la catégorie que vous souhaitez mettre en évidence. Vous pouvez le trouver dans les paramètres de votre catégorie.
Si vous devez mettre en évidence une sous-catégorie, vous devez utiliser le slug de la catégorie « Parent », suivi du slug de la sous-catégorie séparé par un /.
Par exemple, s’il existe une sous-catégorie de premium avec le slug videos que je souhaite mettre en évidence, j’utiliserais :
premium/videos
Permissions
Notez que seuls les utilisateurs disposant des permissions de lecture pour la catégorie mise en évidence verront les mises en évidence, y compris le libellé de l’en-tête. Vous pouvez modifier les permissions de votre catégorie dans les paramètres de « Sécurité » de la catégorie.
Arrière-plan
Il s’agit d’une valeur qui sera attribuée à la propriété CSS background du badge de catégorie. Vous pouvez utiliser n’importe quelle entrée prise en charge par cette propriété.
background - CSS: Cascading Style Sheets | MDN
La propriété CSS raccourcie background définit toutes les propriétés de style d’arrière-plan en une seule fois, telles que la couleur, l’image, l’origine et la taille, ou la méthode de répétition.
Par exemple : linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%).
Couleur du texte
Il s’agit d’une valeur qui sera attribuée à la propriété CSS color du badge de catégorie. Cela affecte la couleur du texte. Vous pouvez utiliser n’importe quelle entrée prise en charge par cette propriété.
color - CSS: Cascading Style Sheets | MDN
La propriété CSS color définit la valeur de couleur de premier plan du texte d’un élément et de ses décorations de texte, et définit la valeur currentcolor. currentcolor peut être utilisé comme valeur indirecte sur d’autres propriétés et est la valeur par défaut pour d’autres propriétés de couleur, telles que…
Dans notre exemple, il s’agit de #88562e.
Libellé de l’en-tête
Cette valeur sert à deux fins. Elle détermine :
- si la catégorie mise en évidence affichera un libellé dans l’en-tête ; et
- le contenu de ce libellé.
Si vous ne souhaitez pas de libellé dans l’en-tête, n’incluez pas cette valeur.
Cette valeur prend en charge le texte, les entités HTML et les émojis.
La valeur du libellé de l’en-tête ici est : :star: Premium. Cela correspond à :
- Le code court de l’émoji étoile :
:star: - Deux entités HTML d’espace insécable (chacune ajoute un espace blanc) :
- Notre texte de libellé :
Premium
Vous pouvez trouver la liste complète des codes courts d’émojis ici et la liste complète des entités HTML ici.
Libellé de l’en-tête mobile
Cette valeur sert également à deux fins. Elle détermine :
- si la catégorie mise en évidence affichera un libellé dans l’en-tête mobile ; et
- le contenu du libellé de l’en-tête mobile.
L’utilisation et le formatage sont identiques à ceux du libellé de l’en-tête. Une chose à noter ici est que vous disposez de moins d’espace sur mobile, il est donc prudent d’utiliser uniquement un émoji ou un mot court pour économiser de l’espace.
Catégorie parente
Vous pouvez créer un menu déroulant dans l’en-tête en définissant le « parent » d’un élément. Insérez le slug d’une catégorie en tant que sixième élément, et l’élément concerné deviendra un élément de sous-menu de cette catégorie dans l’en-tête. Comme pour le premier élément, assurez-vous d’utiliser le slug de la catégorie ici, que vous pouvez récupérer dans la fenêtre modale des paramètres de la catégorie.
Lien alternatif
Par défaut, chaque élément de catégorie pointe vers la catégorie correspondante. Vous pouvez modifier le lien en ajoutant une URL en tant que sixième élément dans le bloc de paramètres.
preeemium
