Bannières de catégorie

[Discourse]

	Résumé	Bannières de catégorie utilise les détails existants des catégories pour créer des bannières pour vos pages de catégories (pour les balises, consultez Discourse Tag Banners).
	Aperçu	Aperçu sur Discourse Theme Creator
	Lien du dépôt	https://github.com/discourse/discourse-category-banners
	Nouveau sur les thèmes Discourse ?	Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Comme il s’agit d’un composant de thème official maintenu par l’équipe Discourse, les demandes de Support, de rapport de bug, d’amélioration de l’expérience utilisateur (ux) et de nouvelle fonctionnalité (#feature) peuvent être soumises dans les catégories respectives ici sur Meta, en les étiquetant avec le tag approprié du composant de thème. Cliquez sur un lien ci-dessous pour en créer un.

 Support  Bug  UX  Fonctionnalité

Fonctionnalités

Bannières de catégorie utilise les détails existants des catégories pour créer des bannières pour vos pages de catégories. Il utilise le nom de la catégorie, sa description et sa couleur pour générer une bannière en haut des pages de catégorie concernées (pour les balises, consultez Discourse Tag Banners).

La description de la catégorie est définie par le premier paragraphe du sujet « Définition de la catégorie pour … » de chaque catégorie. Les couleurs de l’arrière-plan et du texte de la bannière sont définies par vos paramètres de badge de catégorie.

Par défaut, cela s’affichera sur les versions bureau et mobile de toutes les pages de catégorie et de sous-catégorie, mais ne s’affichera pas si vous n’avez pas attribué de description à votre catégorie.

Paramètres

Ce composant propose des options pour remplacer les paramètres par défaut :

Nom	Description
show description	Afficher la description du message « À propos de cette catégorie »
show mobile	Afficher les bannières sur mobile
show subcategory	Afficher les bannières pour les sous-catégories
hide if no description	Masquer les bannières si la description de la catégorie n’est pas définie
show category logo	Afficher le logo de la catégorie
align text	Aligner le texte
exceptions	La bannière ne s’affichera pas pour ces NOMS de catégorie
categories	Catégories pour lesquelles afficher une bannière
plugin outlet	Modifie la position de la bannière sur la page
show category icon	Afficher l’icône ou l’émoji de la catégorie définis dans les paramètres de catégorie *
override category icon color	Lorsque les icônes de catégorie sont utilisées, activer cette option fera correspondre l’icône à la couleur du texte de la bannière

• Notez que ce paramètre fait maintenant référence à l’icône ou à l’émoji de catégorie défini dans les paramètres de catégorie, et non au composant de thème Category Icons (qui est obsolète au profit de la fonctionnalité principale).

Notes sur la personnalisation

Si vous souhaitez les personnaliser avec du CSS supplémentaire, vous pouvez cibler des en-têtes de catégorie spécifiques en utilisant cette structure (exemple-category est le nom de votre catégorie) :

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

Ce composant ajoute également la classe category-header à la balise body comme cible CSS supplémentaire.

Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos plans Standard, Business et Entreprise.

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

Not prefixing the category name is a recipe for disaster, so I’ve added category-banner- before the class name (e.g., category-banner-meta). If you were targeting the category name in your CSS you’ll just have to add category-banner- before it.

@jrgong

Is there any way to display emoji’s there?

I’m not sure, I don’t think our default category descriptions support them either, but I can look into it…

[Hang]

I want to use the uploaded background image from the category to put it in the background of the banner. I’ve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!

[Vanecx]

Bonjour et merci pour ce composant de thème !

Je viens de l’installer en suivant ce tutoriel (j’ai suivi exactement les mêmes étapes) pour essayer ce composant de bannières de catégories, mais rien ne se passe. Aucune bannière n’apparaît dans les catégories. Y a-t-il quelque chose que j’aurais pu faire qui empêche cela de fonctionner ? La seule explication que je vois est que l’avertissement « bootstrap » le bloque ?

[simon]

@Vanecx

Aucune bannière dans l’une des catégories. Y a-t-il quelque chose que j’aurais pu faire pour que cela ne fonctionne pas ?

Par défaut, le composant de thème n’affiche pas les bannières de catégorie si vous n’avez pas défini de description pour une catégorie. Cela peut être modifié en décochant la case « Masquer les bannières si aucune description de catégorie n’est définie ».

Les descriptions de catégorie sont définies en modifiant le sujet « À propos de la catégorie » que Discourse crée automatiquement pour chaque catégorie. Si vous avez soit ajouté des descriptions de catégorie, soit désactivé le paramètre pour masquer les bannières pour les catégories sans description, et que vous ne voyez toujours pas les bannières de catégorie, faites-le-nous savoir. Nous examinerons ce qui se passe.

[Vanecx]

Merci pour votre réponse. J’ai vérifié et confirmé que chaque catégorie sur le forum possède une description. L’option « Masquer les bannières… » est maintenant décochée par mesure de précaution, mais rien ne change.

Comme vous pouvez le voir sur les images, tout semble normal dans les paramètres :

Je ne sais pas si cela pourrait avoir un lien avec le problème, mais je vous informe qu’il s’agit d’une installation Discourse sur une instance Yunohost.

[downey (Michael Downey)]

Est-ce que quelqu’un d’autre que moi pense qu’il serait agréable d’activer ce même style sur les pages de liste des groupes (par exemple, /g/foo) ? Malheureusement, le CSS n’est pas tout à fait le même, et je suppose que cela nécessiterait un traitement supplémentaire des différents boutons situés à droite du nom du groupe, à savoir : Demander Message Supprimer

Cela pourrait grandement contribuer à une apparence et une sensation cohérentes, et rendre les groupes plus comme des citoyens de « premier ordre » au sein de l’interface utilisateur. (À mon avis)

[jord8on (Jordan)]

J’adore ces bannières de catégorie ! Merci d’avoir créé ce composant de thème !

J’aimerais beaucoup que cette bannière apparaisse sur la page d’accueil principale de nos forums, en fonction de l’option affichée :

• Discussions « Récentes » ou
• Discussions « Meilleures » ou
• « Catégories » ou
• « Suivi » (si vous utilisez le plugin Follow )

Existerait-il un moyen (relativement) simple d’afficher une bannière adaptée selon l’option sélectionnée par l’utilisateur ?

[Rhidian (Rhidian Bramley)]

@awesomerobot, j’espère que cela ne vous dérange pas que je partage ceci ici…

J’ai créé un fork du thème discourse-category-banners appelé

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

Vous pouvez en avoir un aperçu ici :

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

Il fait essentiellement la même chose, mais avec quelques modifications :

• La boîte de bannière de catégorie s’affiche en ligne au-dessus du titre principal, au lieu de s’étendre sur toute la largeur en haut. Cela permet d’afficher un thème de bannière en haut, par exemple discourse-versatile-banner.

• La boîte de bannière de catégorie s’affiche dans le même style que les boîtes de sous-catégories natives de Discourse, qui sont un composant central de la plateforme. Ces boîtes de sous-catégories sont une option d’affichage dans les paramètres de catégorie de Discourse Afficher la liste des sous-catégories au-dessus des sujets dans cette catégorie. Cette option affiche le nom et la description de la sous-catégorie sous forme de ligne ou de boîte au-dessus de la liste des sujets, en utilisant la couleur d’arrière-plan de la catégorie comme bordure gauche.

• Si la catégorie est une sous-catégorie, le nom de la catégorie s’affiche sous forme de fil d’Ariane comme suit : Nom de la catégorie parente : Nom de la sous-catégorie.

Capture d’écran de démonstration de la boîte de bannière du thème pour la catégorie, au-dessus des boîtes de sous-catégories natives.

Capture d’écran de la sous-catégorie, montrant la référence de fil d’Ariane vers la catégorie parente.

Ceci est ma première tentative de modification de thème. J’espère que cela vous sera utile ?

Mise à jour

J’ai refactorisé cette adaptation en tant que composant distinct, avec de nombreuses fonctionnalités supplémentaires, notamment l’utilisation de l’image du logo de la catégorie et de l’image d’arrière-plan dans l’en-tête. Ce nouveau composant remplace efficacement l’en-tête de catégorie standard de Discourse, contrairement aux bannières de catégorie, ce qui en fait un nouveau composant. Veuillez consulter :

Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

Exceptions : si vous ne souhaitez pas qu’une catégorie ait une bannière, ajoutez son nom ici

Ça ne fonctionne pas pour nous. J’ai essayé à la fois l’identifiant de la catégorie (slug) et son ID, mais la bannière reste obstinément là. Est-ce que cela fonctionne pour quelqu’un d’autre ?

[awesomerobot (Kris)]

Je viens de l’essayer et cela fonctionne pour moi : il recherche le nom de catégorie name sensible à la casse. En y repensant, ce n’était peut-être pas la meilleure façon de l’implémenter… Je peux probablement l’améliorer.

[nathank (Nathan Kershaw)]

Ah - ce type de tri est fait pour moi ! Et vous mentionnez bien « nom » dans le guide ci-dessus, je ne l’avais simplement pas lu.

« Nom » n’est pas très intuitif car nous ne l’utilisons pas vraiment pour autre chose. Mais il est affiché très souvent. Le rendre plus explicite dans les paramètres serait parfait, je pense.

[AntiMetaman]

Au lieu d’ajouter des exceptions pour indiquer quelles catégories n’afficheront pas un bannière donnée, ne pouvons-nous pas simplement spécifier quelle catégorie doit afficher quel bannière ?

[awesomerobot (Kris)]

Cela dépend du site spécifique et du cas d’utilisation, je suppose. Ma première idée était qu’il serait plus probable qu’un site veuille l’implémenter partout, et s’il y avait des exceptions, elles ne concerneraient que quelques-unes.

Si vous souhaitiez mettre en œuvre une bannière pour un petit nombre de catégories, il pourrait exister une meilleure option de composant de thème conçue pour être moins générique et universelle, comme Versatile Banner ou en personnalisant l’une des options trouvées dans https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368

[Idan]

Ce serait super de pouvoir télécharger une image pour remplacer le texte.

[oca]

Merci pour ce composant très utile !

Serait-il possible d’ajouter une petite fonctionnalité ?

• Ajouter la classe restricted à l’élément <span.discourse-category-banners> ou <div.category-title-header> lorsque la catégorie n’est pas publique, de la même manière que le badge de catégorie.

Cela serait utile pour personnaliser la bannière avec un CSS supplémentaire afin d’indiquer à l’utilisateur que cette catégorie est spéciale.

Actuellement, c’est possible mais compliqué de sélectionner l’icône de cadenas avec CSS pour effectuer certaines modifications. Comme CSS ne dispose pas de sélecteur de parent, je ne peux pas utiliser la présence de l’icône de cadenas pour vérifier si la bannière doit être modifiée.

Je ne sais pas encore vraiment comment faire des PR, mais je profiterais de cette occasion pour apprendre si vous êtes ouvert à ma modification.

[Drew-ART (Drew)]

Est-il possible de le faire fonctionner sur les pages de balises ? J’ai trouvé le plugin tag-banners, mais il ne permet pas d’ajouter du texte ou des liens.