C’est généralement vrai, le CSS n’est pas un moyen sûr de cacher quoi que ce soit car une personne avertie pourrait regarder le code source de la page pour quelque raison que ce soit… mais nous servons une vue sans JS aux robots d’indexation, donc dans ce cas, le contenu ajouté par les thèmes n’est généralement pas indexé de toute façon.
J’ai mis à jour le lien de prévisualisation, il devrait fonctionner maintenant !
Est-il possible d’utiliser ce composant pour appeler un javascript avec
javascript:script('function');
au lieu d’une URL réelle ?
(Cela semble presque fonctionner, mais je rencontre des violations CSP.)
Modifié pour ajouter :
J’ai réussi. Si jamais d’autres se posent la question, j’ai utilisé # dans l’interface utilisateur du composant à la place d’une URL, puis j’ai utilisé un écouteur d’événements pour appeler la fonction javascript.
D’autres connaissent probablement une meilleure façon, et j’espère qu’ils partageront cette connaissance s’ils le font !
Bonjour, j’aimerais ajuster la police et la taille des liens d’en-tête. Quelqu’un pourrait-il m’indiquer le CSS correct qui me permet de le faire ? Merci !
Salut @brentoshiro, les propriétés varieront en fonction de ce que vous devez styliser, mais la façon dont vous sélectionneriez les liens serait la suivante :
Pour styliser tous les liens d’en-tête :
.custom-header-links .headerLink a {
font-size: 1rem; // remplacez par la taille de police de votre choix
color: #96b67b; // peut également utiliser des variables telles que var(--tertiary) ;
font-style: italic; // options : normal, italic, oblique
}
Pour styliser un lien spécifique
Vous pouvez accéder au lien soit en utilisant le titre du lien (séparé par des tirets et en minuscules) comme ceci pour « Confidentialité » :
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: red;
}
ou en utilisant l’attribut title et en entrant le titre du lien :
.custom-header-links .headerLink a[title='Our Privacy Policy'] {
color: purple;
}
Pour ajouter des styles au survol, ajoutez simplement :hover après la balise a :
.custom-header-links .headerLink a:hover {
color: var(--primary-low);
}
Bonjour, serait-il possible de styliser les liens pour qu’ils soient centrés au lieu d’être simplement alignés à gauche/droite ?
C’est vraiment génial. Je me demande quel travail supplémentaire cela représenterait pour permettre différentes listes de liens d’en-tête par groupe ? Nous avons du personnel et des étudiants sur notre site et nous aimerions pouvoir fournir des liens principaux différents dans l’en-tête pour chaque groupe.
Vous pourriez y parvenir en attribuant à chaque groupe un Thème différent, chaque thème utilisant sa propre copie de ce Composant de Thème.
Cela fonctionnerait bien si l’un de vos deux groupes était assez statique (ou du moins plus petit) - votre groupe de personnel semble idéal pour cela. Ou du moins si vous n’aviez qu’un seul groupe dynamique.
Vous faites ensuite des liens étudiants le Thème par défaut du site, et vous faites en sorte que vos membres du personnel aient les liens du personnel manuellement (soit via l’interface utilisateur, soit via la console Rails).
Je venais justement pour poser cette question, car j’ai finalement remarqué qu’ils apparaissaient sur l’écran de connexion.
Dans mon cas, l’un des liens change chaque mois (tandis que le nom de l’en-tête reste le même). Est-il possible de masquer l’en-tête avec un code sans avoir à modifier le code pour masquer le lien ? Par exemple, en utilisant votre exemple, j’aurais
Support client
2022-customer-support/26903 est mon lien, puis customer-support-july, etc.
Comme vous pouvez le voir, masquer customer-support-june fonctionnerait bien, mais il faudrait le mettre à jour mensuellement au lieu de masquer “FAQ” (et je ne peux pas non plus ajouter le /26903 du sujet au code CSS, donc je ne peux pas masquer ce lien spécifique bien que je puisse éventuellement contourner cela en publiant la page ?). S’il n’y a pas d’autre moyen, ce n’est pas grave du tout, ce n’est pas un effort considérable, c’est plutôt que je suis sûr que j’oublierai.
Bonjour, je voulais savoir s’il était possible d’obtenir des traductions pour le texte ? Peut-être en incluant des clés de traduction, si le composant en inclut ![]()
**Y a-t-il une raison pour laquelle par défaut il ne s’affiche pas aux utilisateurs non connectés ? **
Ignorez, pour une raison quelconque, lorsque j’applique un composant au thème, il n’apparaît pas. Je dois ajouter le composant au thème à la place.
Utilisation des icônes UTF-8
Notez que vous pouvez utiliser des icônes UTF-8 comme ancres de lien.
Dans ce cas, vous pourriez vouloir essayer ce CSS pour correspondre aux autres icônes de menu déroulant d’en-tête :
.custom-header-links .headerLink {
margin-top: -1px;
}
.custom-header-links .headerLink a {
padding: 3px 10px;
color: var(--primary-low-mid);
font-size: var(--font-up-5);
font-weight: bold;
}
.custom-header-links .headerLink:hover {
background-color: var(--primary-low);
}
.custom-header-links .headerLink:hover a {
color: var(--primary-medium);
}
Cela fait quelque chose comme ceci :


J’ai vient d’installer ce composant et ajouté quelques liens, mais ils ne s’affichaient pas.
J’ai découvert qu’entrer une langue empêche les liens de s’afficher sur mon site. À l’origine, j’avais ajouté « blank » par souci de complétude, même si ce n’était pas nécessaire. Ils ne s’affichaient toujours pas lorsque j’ai changé « blank » en « en ». Supprimer complètement la valeur a résolu le problème dans mon cas. Je n’ai aucune idée pourquoi, mais j’ai pensé que je devrais le mentionner au cas où quelqu’un d’autre aurait un problème similaire.
Je suis tombé sur le même problème l’autre jour :
Je vais voir si nous pouvons peut-être modifier les exemples par défaut pour les rendre plus intuitifs.
J’ai supprimé la locale des paramètres par défaut ici : UX: remove locale from default settings by awesomerobot · Pull Request #38 · discourse/discourse-custom-header-links · GitHub
Les valeurs par défaut devraient donc maintenant apparaître quelle que soit la locale définie sur le site. Merci @packman et @JammyDodger !
Mes liens ont disparu après la dernière mise à niveau (PC, Ubuntu, Brave)
Pourriez-vous vérifier cela ?
@cmdntd – voir le sujet dérivé. Vous avez probablement une mise à niveau de Discourse disponible sous Admin | Mise à niveau qui résoudra ce problème.
Récemment, mon lien personnalisé a été remplacé par les trois liens par défaut. En aperçu, cela fonctionne.
Il s’agit d’un site hébergé. Il vient de me venir à l’esprit que quelque chose a peut-être changé dans le thème, de sorte qu’il n’est pas reconnu par les liens d’en-tête personnalisés. Je vais vérifier cela et je vous tiendrai au courant.
Coin ! J’ai prévisualisé le plugin dans différents thèmes et ils ont tous fonctionné. Je me suis déconnecté et cela a fonctionné. J’ai changé de navigateur et cela a fonctionné. Il y a une forte odeur de chat de Schrödinger ici.
