 |
Résumé | Custom Header Links vous permet d’ajouter facilement des liens textuels personnalisés à l’en-tête. |
 |
Aperçu | Aperçu sur Discourse Theme Creator |
 |
Lien du dépôt | GitHub - discourse/discourse-custom-header-links · GitHub |
 |
Nouveau dans les thèmes Discourse ? | Guide du débutant pour l’utilisation des thèmes Discourse |
Installer ce composant de thème
Fonctionnalités
Bureau
Mobile
(en raison de l’espace très limité, il n’est pas recommandé d’ajouter plus d’un lien sur mobile)
Paramètres
| Paramètre | Description |
|---|---|
custom_header_links |
La liste structurée des liens à afficher dans l’en-tête. Chaque lien est configuré via un formulaire avec des champs individuels (voir ci-dessous). |
links_position |
Contrôle si les liens apparaissent sur le côté droit (par défaut) ou gauche de l’en-tête près du logo. Lorsqu’il est défini sur left, tous les liens sont automatiquement masqués sur les pages de sujets pour faire de la place pour le titre du sujet — indépendamment des paramètres individuels de hide_on_scroll des liens. |
Ajout de liens
Les liens sont configurés via un formulaire structuré dans les paramètres du composant de thème. Cliquez sur Ajouter pour ajouter un nouveau lien. Chaque lien possède les champs suivants :
| Champ | Requis | Description |
|---|---|---|
| Texte |  Oui |
L’étiquette visible du lien. Max 100 caractères. Détermine également la classe CSS appliquée au lien (voir CSS Customisation ci-dessous). |
| Titre |  Non |
Le texte de la bulle d’aide affiché lorsque vous survolez le lien. Max 1000 caractères. |
| URL | Oui |
L’URL vers laquelle le lien pointe. Peut être un chemin relatif (ex. /faq) ou une URL complète. Max 2048 caractères. |
| Affichage | Non |
Contrôle sur quel appareil le lien apparaît. S’il est laissé vide, le lien s’affiche sur tous les appareils (identique à vdm). Voir les valeurs ci-dessous. |
| Cible | Non |
Contrôle comment le lien s’ouvre. S’il est laissé vide, il est défini par défaut pour s’ouvrir dans un nouvel onglet (identique à blank). Voir les valeurs ci-dessous. |
| Masquer au défilement | Non |
Contrôle si le lien se masque lorsque le titre du sujet devient visible dans l’en-tête sur les pages de sujets. Défaut à keep. S’applique uniquement lorsque links_position est défini sur right — voir la note ci-dessous. Voir les valeurs ci-dessous. |
| Locale | Non |
S’il est défini, le lien n’est affiché que lorsque la langue de la page du site correspond à cette valeur. Laisser vide pour afficher le lien sur toutes les locales. Voir les détails ci-dessous. |
\u003cbr\u003e
Valeurs d’affichage :
| Valeur | Comportement |
|---|---|
vdm |
Visible sur bureau et mobile |
vdo |
Visible sur bureau uniquement |
vmo |
Visible sur mobile uniquement |
| (non défini) | Identique à vdm — visible sur tous les appareils |
Valeurs de cible :
| Valeur | Comportement |
|---|---|
blank |
Ouvre dans un nouvel onglet |
self |
Ouvre dans le même onglet |
| (non défini) | Défaut pour ouvrir dans un nouvel onglet (identique à blank) |
Valeurs de masquer au défilement :
| Valeur | Comportement |
|---|---|
keep |
Le lien reste visible même lorsque le titre du sujet est affiché dans l’en-tête (par défaut) |
remove |
Le lien se masque lorsque le titre du sujet devient visible sur les pages de sujets |
\u003e 
hide_on_scroll ne s’applique que lorsque links_position est right. Lorsque links_position est left, tous les liens sont masqués ensemble sur les pages de sujets, quel que soit leur paramètre individuel hide_on_scroll.
Voici un exemple de hide_on_scroll en action (avec links_position défini sur right) :
Most Liked et Privacy sont définis sur keep, ils restent donc visibles lorsque le titre se déploie. Les autres liens sont définis sur remove, ils se masquent donc lorsque le titre devient visible. Ce comportement n’affecte que les pages de sujets.
Filtrage par locale
Le champ Locale vous permet d’afficher un lien uniquement lorsque le site est défini sur une langue spécifique. Ceci est utile pour les communautés multilingues qui souhaitent des liens d’en-tête différents par langue.
- Définissez le champ sur un code de locale tel que
en,de,fr,zh_CN, etc. - La correspondance est insensible à la casse, et les séparateurs
-et_sont traités de manière identique — doncen-US,en_USeten_uscorrespondent de manière égale. - Si le champ de locale est laissé vide, le lien s’affiche sur toutes les locales. C’est le paramètre recommandé pour la plupart des sites en langue unique.
- Une classe CSS
headerLink--{locale}est également ajoutée à l’élément de lien, ce qui peut être utilisé pour un ciblage CSS supplémentaire.
\u003e 
Problème courant : Si vos liens n’apparaissent pas, vérifiez si vous avez accidentellement défini une valeur de locale qui ne correspond pas à la langue configurée de votre site. Laisser le champ de locale vide est sûr et affichera toujours le lien.
CSS Customisation
Chaque lien reçoit automatiquement une classe CSS dérivée de sa valeur Texte : les espaces sont remplacés par des tirets, le texte est mis en minuscule, et -custom-header-links est ajouté.
Par exemple :
- Un lien avec le texte
Privacyreçoit la classeprivacy-custom-header-links - Un lien avec le texte
Visit Shopreçoit la classevisit-shop-custom-header-links
Styliser tous les liens d’en-tête :
.custom-header-links .headerLink a {
font-size: var(--font-up-1);
color: var(--header_primary);
}
Styliser un lien spécifique (par exemple, un lien avec le texte « Privacy ») :
.custom-header-links .headerLink.privacy-custom-header-links a {
color: var(--tertiary);
}
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: var(--tertiary-high);
}
Afficher ou masquer un lien en fonction de l’état de connexion :
Discourse ajoute une classe anon à la balise \u003chtml\u003e pour les utilisateurs déconnectés. Vous pouvez utiliser ceci pour afficher ou masquer conditionnellement des liens :
/* Masquer "Dashboard" des utilisateurs déconnectés */
html.anon .dashboard-custom-header-links {
display: none;
}
/* Masquer "Sign Up" des utilisateurs connectés */
html:not(.anon) .sign-up-custom-header-links {
display: none;
}
\u003e Le display: none CSS est un mécanisme de masquage visuel uniquement. Le HTML du lien est toujours présent dans le code source de la page. N’utilisez pas ceci pour protéger des URL sensibles ou dont l’accès est contrôlé.
Réorganiser les liens avec CSS (en utilisant l’ordre order de flexbox) :
.custom-header-links li {
\u0026:nth-child(1) { order: 3; }
\u0026:nth-child(2) { order: 1; }
\u0026:nth-child(3) { order: 2; }
}
Utilisez le chemin /my pour les liens spécifiques à l’utilisateur, afin d’éviter de coder en dur un nom d’utilisateur :
/my/messages → la boîte de réception de l'utilisateur actuel
/my/activity → l'activité de l'utilisateur actuel
\u003e Hébergé par nous ? Les composants de thème sont disponibles à l’utilisation sur nos plans Pro, Business et Entreprise.
\u003e Faits marquants du journal des modifications :
\u003e
\u003e * Le paramètre custom_header_links a été migré d’un format de liste délimité par des virgules vers une interface utilisateur de formulaire structurée type: objects. Si vous configuriez précédemment des liens en utilisant la saisie de texte à virgules de l’ancienne méthode, la migration aurait dû préserver vos données automatiquement.