Barre d'outils sous l'en-tête du site par catégorie

https://meta.discourse.org/t/welcome-link-banner/218743/28

Bonjour, je me demandais si vous aviez vu ma demande de fonctionnalité ?

https://meta.discourse.org/t/welcome-link-banner/218743/73?u=heliosurge

Ou alternativement, un composant thématique qui permettrait de « dock » une barre d’outils sous la barre principale du site lors de la visualisation d’une catégorie spécifique ? Car c’est ce que je recherche plus spécifiquement. Cela pourrait ressembler, par exemple, aux liens d’en-tête personnalisés de Joe.

Des conseils, même pour ajuster le comportement d’un composant thématique existant pour y parvenir, seraient formidables.

Je m’excuse, car je suis encore très novice et j’apprends au fur et à mesure.

1 « J'aime »

Salut !

Pourriez-vous être un peu plus précis sur vos besoins ? Qu’est-ce que vous voulez mettre exactement sous l’en-tête de Discourse ?

La manière standard de mettre « n’importe quoi » sous l’en-tête se trouve dans l’onglet Après l’en-tête lorsque vous modifiez un thème ou un composant :

Mais il semble que vous pensiez à quelque chose de plus dynamique et/ou de plus complexe.

Plus vous fournirez d’informations, plus les réponses seront utiles :slight_smile:

1 « J'aime »

Merci pour votre réponse rapide.

Pour être très clair et précis, quelque chose comme les liens d’en-tête personnalisés de Johani (icône) serait presque parfait.

Cela dit, le but est d’avoir idéalement une barre d’outils avec un logo cliquable, puis quelques menus déroulants.

Par exemple, le forum a un sponsor qui possède la Catégorie A avec 2 sous-catégories. Lorsque les utilisateurs consultent la Catégorie A ou ses sous-catégories, une barre d’outils est ancrée sous l’en-tête du site. Avec des liens pour cette entreprise.

par exemple, lien vers le magasin, support, liens communautaires.

Le liens d’en-tête personnalisés est un composant de thème assez simple et je pense que ce serait un bon point de départ d’utiliser la même base de code mais de placer la liste de liens ailleurs.
Cela dit, il ne prend pas en charge les sous-menus, ce qui serait plus délicat à ajouter.

Une autre approche serait de faire un composant sans aucun réglage, en utilisant simplement du HTML, du CSS (et peut-être un peu de JS). Ce serait donc une personnalisation assez « statique » et si vous avez besoin de faire un changement, vous devrez modifier le code HTML et CSS approprié.

Voici un exemple que j’ai fait pour mon propre forum :

Et voici à quoi cela ressemble dans les personnalisations du site :

Une telle méthode suffirait-elle à vos besoins, ou préférez-vous quelque chose de plus facile à modifier côté admin comme le composant liens d’en-tête personnalisés avec plusieurs champs de saisie, comme ceci ?

Quelque chose comme les liens d’en-tête personnalisés pourrait être plus facile jusqu’à ce que j’acquière plus d’expérience. Ou peut-être des conseils pour créer un composant séparé qui cible et remplace, par exemple, le composant de liens d’en-tête personnalisés de Johani pour modifier le comportement sous l’en-tête (peut-être qu’il existe déjà une option pour cela) avec des remplacements pour utiliser la catégorie parente actuelle.

Cependant, si j’ai 2 sponsors, j’aurais besoin de savoir si je peux installer le composant deux fois en renommant le composant et en ciblant le composant par son nom.

c’est-à-dire

  1. (A) Liens d’en-tête personnalisés
  2. (B) Liens d’en-tête personnalisés

Si je me souviens bien, il existe un composant de thème qui ajoute une barre latérale basée sur la catégorie ? mais une barre latérale ne fonctionnerait pas car elle est uniquement pour ordinateur de bureau. j’ai donc besoin d’une barre supérieure.

Je sais que je peux exporter puis importer à partir d’une archive zip pour modifier le code. Mais j’aurais besoin de conseils sur ce qu’il faut changer si je prends cette voie. Je suis prêt à essayer.

Il pourrait maintenant être plus facile de travailler sur un composant de thème personnalisé
pour, comme vous l’avez mentionné, simplifier cela avec un simple code après l’en-tête qui cible la catégorie en affichant des liens simples avec une image ici et là pour les liens principaux, avec un lien communautaire menant à un article ou une page publiée ?

Je vous remercie encore une fois pour votre temps et le partage de vos connaissances.

Voici un exemple pratique que j’ai créé pour vous :

Voici le HTML que j’ai mis dans l’onglet Après l’en-tête

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Voici du contenu affiché uniquement dans la catégorie <strong>Général</strong></h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Voici du contenu affiché uniquement dans la catégorie <strong>Commentaires sur le site</strong></h2>
</div>

Voici le SCSS que j’ai mis dans l’onglet CSS (Discourse utilise SCSS qui étend les fonctionnalités CSS) :

$category_classes: "general", "site-feedback";

.below-header-banner {
    display: none;
}

@each $cat in $category_classes {
    body.category-#{$cat} {
        #category-#{$cat}-banner.below-header-banner {
            display: block;
        }
    }
}

Voici le résultat. Chaque bannière apparaît uniquement dans sa catégorie respective.

J’espère que cela vous aidera davantage !

1 « J'aime »

C’est absolument parfait ! Merci beaucoup !

Avec ce code de base, s’affichera-t-il toujours s’il se trouve dans une sous-catégorie du parent ? ou dois-je ajouter les sous-catégories à la condition ?

Je devrais vraiment copier-coller et vous recontacter. Car vous avez été très gentil avec tout le temps que vous avez partagé pour m’aider.

:vulcan_salute::smiling_face_with_sunglasses::handshake:

1 « J'aime »

Les sous-catégories ont leur propre classe dans la balise body.

Par exemple, dans WordPress - Discourse Meta, Support > WordPress est une sous-catégorie de Support.

La classe de catégorie sur <body> est : category-support-wordpress.

Si vous souhaitez que la bannière s’affiche dans les sous-catégories ainsi que dans leur parent, le code SCSS devrait être différent. Je pourrai y jeter un œil demain.

1 « J'aime »

Génial ! Merci encore de partager la richesse de vos connaissances et de me donner un bon départ.
Vous êtes vraiment un atout pour votre équipe ! :clinking_beer_mugs::smiling_face_with_sunglasses::vulcan_salute:

2 « J'aime »

Mes excuses pour mon inexpérience. Mais puis-je compter sur vous une fois de plus ?


<div id="pimax-navbar">
 <span id="pimax-top-links">
 <ul class="pimax-nav-link-container">
   <li><b><a href="//pimax.com/pages/pitool/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=pitool_button" class="pimax-link">Pitool</a></b></li>
   <li><b><a href="//www.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=brandsite_button" class="pimax-link">Store</a></b></li>
   <li><b><a href="//support.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=support_button" class="pimax-link">Support</a></b></li>
</ul>
</span>
</div>

Comment combiner cela avec votre exemple ? Et obtenir également les liens qui s’étendent de gauche à droite ? Au lieu d’être empilés les uns sur les autres ?

Essentiellement, vous prendriez ce code et le mettriez dans mon code en remplacement de la balise <h2> et de son contenu. Mais je vous suggérerais d’affiner et d’adapter ce code à vos besoins, pas seulement de le copier-coller.

Quant à avoir la liste d’éléments en ligne au lieu d’une sur l’autre, il existe de nombreuses façons CSS de le faire… Beaucoup d’entre elles sont assez simples, mais nous sortons alors un peu du cadre de l’aide que nous fournissons ici. Voir cette explication :

Dans ce genre de cas concernant des choses HTML et CSS générales, non directement liées à Discourse, vous pouvez trouver des informations ici : Making custom CSS changes on your site
Et à peu près n’importe où sur Internet. Par exemple :

Google Search

Cela dit, quelles sont vos compétences actuelles en HTML et CSS ?
En savoir un peu plus à ce sujet aiderait à formuler des réponses plus personnalisées. :slight_smile:

1 « J'aime »

Pour être honnête avec moi-même et avec mon entourage, je suis un passionné novice. J’ai eu quelques cours de programmation au lycée impliquant gwbasic et turbo pascal. J’ai pris l’initiative d’utiliser une application pour m’aider à apprendre le HTML et le CSS et j’ai eu quelques succès. Cependant, rien de haut niveau.

Par exemple, quelqu’un a partagé un exemple de code pour masquer une catégorie du menu hamburger. Cela a bien fonctionné, mais c’était beaucoup de code pour masquer toutes celles que je voulais. C’était avant le composant de thème “Category Hider”, bien que j’aie contribué avec une idée pour avoir une option pour masquer toutes les sous-catégories, à laquelle un membre de la communauté a partagé un code de 1 ou 2 lignes qui masquait toutes les sous-catégories. lol

C’était beaucoup plus efficace que de cibler individuellement chacune pour la masquer. :wink:

Cependant, j’ai maintenant eu un succès modéré en modifiant la bannière Welcome Link en comparant le fichier settings.yml avec les Modern Category boxes, j’ai échangé le premier paramètre avec un qui cible la liste des catégories plutôt que la découverte. Cependant, il semble que je doive encore comparer quelques fichiers pour voir où le paramètre prend effet. Comme je peux ajouter des catégories au premier paramètre, cela ne semble pas encore fonctionner.

Je sais que je dois lire davantage et utiliser un meilleur IDE que mon mobile pour vraiment faire évoluer ma compréhension et ma conscience. J’y arriverai, j’ai juste besoin d’avoir l’humilité et la concentration nécessaires pour le faire.

Pour cela, je suis vraiment reconnaissant d’avoir cette communauté formidable et compréhensive qui m’a souvent donné, lorsque je le demandais, les conseils dont j’avais besoin avec un haut niveau de patience que beaucoup n’auraient pas accordé.

Je sais qu’en étudiant le code et en prenant mon temps, j’y arriverai. Je suis trop têtu pour ne pas le faire.

J’utilise Linux et j’ai maintenant configuré mon bureau pour mieux faciliter les choses… de plus, je dois voir comment le côté bureau du design et le côté mobile créent un design bien équilibré. J’apprends constamment de nouvelles choses. Je base le cœur sur le thème Air car c’est un excellent point de départ.

1 « J'aime »

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.