Ah oui. C’était mon problème. Merci de l’avoir souligné.
Dans le sous-ensemble d’icônes SVG, vous ajoutez le nom de l’icône Font Awesome que vous recherchez, puis dans le menu où vous ajoutez les boutons dans l’en-tête, vous utilisez la même syntaxe. Pour l’icône utilisateur, il vous suffit d’écrire « user », par exemple.
J’ai pu faire en sorte que les liens s’ouvrent dans un nouvel onglet avec ce script. Ajoutez simplement le script suivant à la section « Head ».
<script>
document.addEventListener("DOMContentLoaded", function() {
const links = document.querySelectorAll(".custom-header-link.with-url");
links.forEach(link => {
link.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
const titles = {
"Documentation": "Enter URL Here",
"Downloads": "Enter URL Here",
"Source Code": "Enter URL Here",
"Dev Portal": "Enter URL Here",
"Slack Channel": "Enter URL Here"
};
const url = titles[this.getAttribute("title")];
if (url) {
window.open(url, '_blank');
}
});
link.setAttribute("href", "#");
});
});
</script>
J’espère que cela vous aidera !
Est-il possible d’avoir une vue différente lorsque le titre du site est réduit et que le titre du sujet actuel du sujet est affiché (lors du défilement d’un sujet) ?
J’ai remarqué que l’en-tête déroulant est toujours très beau et a beaucoup de sens sur les grands écrans, mais ce n’est pas le cas sur les petits écrans. Donc, faire un display: none serait utile et c’est déjà fait sur ordinateur lorsque max-width: 712px.
Merci et meilleures salutations. 
2 « J'aime »
Y a-t-il un moyen d’afficher uniquement l’en-tête déroulant sur mobile ?
J’ai essayé ceci :
/* Styles par défaut - masquer les boutons d'en-tête */
.header-buttons {
display: none;
visibility: hidden;
}
/* Requête média pour les appareils mobiles */
@media screen and (max-width: 767px) {
.header-buttons {
display: inline; /* ou display: inline-block; selon votre mise en page */
visibility: visible;
}
}
Ce qui fonctionne, mais tout le reste qui se trouve dans l’en-tête (par exemple GitHub - discourse/discourse-header-search ) est toujours réduit comme si l’en-tête déroulant était toujours là…
Qu’est-ce qui me manque ?
Merci
1 « J'aime »
Il est probable que votre personnalisation ait été écrasée.
Vous n’avez pas besoin de visibility – vous pouvez faire :
.header-buttons {
display: none !important;
}
2 « J'aime »
Requête concernant l’utilisation des fonctions de sécurité :
Si vous utilisez cette fonction, est-il possible d’avoir plus d’un groupe de sécurité ayant accès à un menu ?
Notre exemple : nous gérons plusieurs programmes éducatifs (avec plusieurs années/groupes de classe pour chaque programme), chaque groupe de classe a son propre groupe de sécurité afin que nous puissions leur donner accès aux bonnes ressources éducatives (sans qu’ils n’accèdent à des ressources destinées à un autre programme/année de classe), chaque groupe d’année ayant une catégorie unique pour leur classe.
Je dois créer des menus pour permettre à chaque classe d’accéder à sa catégorie, mais je dois aussi permettre à notre équipe pédagogique (qui n’est pas dans le groupe de sécurité des étudiants) d’accéder à ces espaces.
Pour le moment, les deux seules solutions que je vois sont :
- créer un groupe de sécurité combinant le personnel et chaque classe (agaçant car j’aimerais moins de complications concernant les groupes de sécurité, pas plus)
- dupliquer les menus, de sorte qu’il y en ait un pour le groupe d’étudiants et un pour le groupe de personnel
Aucune de ces solutions ne semble idéale.
Question suivante : Qu’en est-il de l’ajout de fonctionnalités de sécurité aux éléments du sous-menu ?
(Pour mon exemple : cela signifierait que je pourrais avoir un menu pour tous les différents groupes de cours/classes, et ensuite seulement montrer aux étudiants les éléments de sous-menu applicables. Alors qu’en ce moment, j’ai environ 5 à 6 menus principaux à gérer)
1 « J'aime »
Je vous encourage à rechercher des alternatives à ce composant de thème, car il ne correspond pas à votre cas d’utilisation.
Puis-je plutôt vous suggérer de simplement mettre les catégories de classe dans le paramètre du site default_navigation_menu_categories ?
En tant qu’administrateur, vous les verrez toutes (bien que vous puissiez personnaliser cette vue), mais les membres de votre classe et le personnel ne verront que ceux auxquels ils ont accès dans la barre latérale.
Si je comprends bien votre problème, cela fonctionnerait très bien pour vous.
2 « J'aime »
Salut Nathan,
Nous avons configuré nos catégories. Mais nous aimerions aussi avoir un menu en haut de la page. Les utilisateurs sont habitués aux menus en haut de page - et les communautés sont déjà une courbe d’apprentissage assez difficile (nous ne sommes pas là pour créer un tout nouvel univers technologique pour nos étudiants).
De plus, cela ne fonctionne pas car nous devons pouvoir lier des sites externes depuis le menu (en particulier nos sites SharePoint, utilisés car Discourse n’inclut pas de bibliothèque structurée), et les catégories ne le permettent tout simplement pas.
Honnêtement, pouvoir autoriser plusieurs groupes de sécurité à consulter un menu (de la même manière que nous autorisons plusieurs groupes de sécurité dans une catégorie) serait tout simplement plus simple. Mais si ce n’est pas possible, nous devrons trouver une autre solution.
1 « J'aime »
@merefield La hauteur des boutons de connexion est affectée par l’en-tête déroulant
Ce n’est un problème que si « right » est utilisé pour la position des liens.
2 « J'aime »
Je ne maintiens plus cela, je l’ai donc marqué comme unmaintained
Cependant, n’hésitez pas à soumettre une PR et je l’examinerai. Si vous n’avez pas personnellement le temps ou les compétences mais souhaitez que quelqu’un le corrige et avez un budget, envisagez de poster dans Marketplace.
4 « J'aime »
Cela me pose également un problème. J’ai jeté un coup d’œil, mais c’est trop complexe pour mes hacks CSS de base malheureusement.
3 « J'aime »
J’ai créé une PR pour moderniser le composant. (sponsorisé par @davidkingham) 
En cours de route, cela corrige quelques problèmes d’UX que j’ai remarqués.
Le composant pourrait être encore amélioré. Je ferai peut-être une autre PR plus tard. En voici quelques-unes que j’ai notées :
- Remplacer le type de réglage
json_schemapar le typeobjects - Ajouter une option pour ouvrir un lien dans un nouvel onglet
- Meilleure accessibilité
10 « J'aime »
Merci @Arkshine - excellent travail !
4 « J'aime »
Je vois cette erreur fatale sur un site utilisant ce composant de thème 
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'trim')
at get source (custom-icon.gjs:20:24)
...
3 « J'aime »
Oh. J’ai fait une PR pour corriger le problème ; merci de l’avoir signalé !
Fusionné !
7 « J'aime »
Excellent composant et excellent travail — merci pour vos efforts et votre expertise ! J’ai remarqué que le menu déroulant prend actuellement en charge un élément d’en-tête principal avec un niveau de sous-éléments (par exemple, Élément d’en-tête → Liens). Est-il possible d’ajouter un autre niveau, de sorte qu’il fonctionne comme suit : Élément d’en-tête → Sous-élément → Liens ?
2 « J'aime »
@angus J’ai ouvert une PR pour mettre à jour un nom d’icône Font Awesome obsolète que j’ai repéré :
2 « J'aime »
Merci @kelv 
3 « J'aime »
Cela devrait fonctionner sur Horizon ou quelque chose doit-il être modifié ?
Ce plugin est indispensable pour les communautés qui ont un blog et/ou plus d’applications associées.