⬇️ En-tête déroulante

Composant de thème
1

:mag: Aperçu

Ce composant de thème vous permet d’ajouter des liens avec du texte, des icônes et des menus déroulants à l’en-tête natif de votre site Discourse.

image
image1440×1024 123 KB

Les rapports de bugs, les demandes de fonctionnalités et les PR sont les bienvenus ; le sponsoring permet à l’équipe Pavilion de prioriser le travail sur ce composant.

:computer: Code

Voir le dépôt GitHub

:gear: Paramètres

Vous pouvez configurer une variété de paramètres pour personnaliser le composant, y compris la personnalisation des liens, la source des icônes, l’ajout de sécurité aux liens, le positionnement, etc.

Une liste de tous les paramètres et des explications détaillées à leur sujet se trouve ici.

:thinking: Quand l’utiliser

Ce composant est utile si vous souhaitez des icônes, des liens et des liens déroulants alignés avec l’en-tête existant de Discourse. C’est un excellent moyen d’avoir de nombreux liens accessibles sans encombrement inutile ni que la barre latérale ne devienne incontrôlable.

Si vous avez besoin de nombreux liens déroulants, consultez Sous-menus d’en-tête, qui crée une ligne de menu d’en-tête au-dessus de l’en-tête d’origine de Discourse.

Bien que ce composant prenne également en charge l’ajout de liens seuls sans les menus déroulants, si vous n’avez besoin que de liens sans les menus déroulants, n’hésitez pas à utiliser Liens d’en-tête personnalisés.

:clapper: Aperçu

Bureau :

Desktop

Mobile :
En raison du manque d’espace sur mobile, les liens peuvent être déclenchés en appuyant sur le bouton flèche vers le bas.

Mobile
Mobile640×1292 48.5 KB

Installer le composant de thème

49 « J'aime »
2

Je ne suis pas sûr de la raison, mais cela ne semble pas fonctionner pour moi. Dès qu’il est activé, mon en-tête disparaît, sur un thème propre sans aucun autre composant, j’ai également essayé plusieurs thèmes de base.

<div id="ember7" class="d-header-wrap ember-view"><div></div></div>

2.9.0.beta4

(c99a6b10fb)

1 « J'aime »
3

Salut @Fma965, mes excuses, j’ai publié quelques corrections pour de petits bugs, cela devrait fonctionner pour vous maintenant. Tenez-moi au courant.

3 « J'aime »
4

Ça marche très bien maintenant, merci !

5

Une chose à noter est que, comme ceux-ci n’utilisent pas de balises a, vous ne pouvez pas cliquer au milieu sur les liens comme vous le pouvez avec le plugin de liens d’en-tête. Y a-t-il une raison pour laquelle vous n’utilisez pas de balises a ?

2 « J'aime »
6

@Fma965

Hmm.. c’est un point intéressant. La raison pour laquelle je n’ai pas utilisé de balises d’ancrage est que chaque lien est un widget qui peut générer un menu déroulant si des éléments déroulants sont présents. En utilisant le widget, je profite également de la méthode click() qui appelle : DiscourseURL.routeTo(this.attrs.url);.

Cela présente certains avantages, comme le maintien de l’historique de votre position dans un sujet. Par exemple, si vous cliquez sur un lien vers un sujet avec une balise d’ancrage, vous commencez toujours en haut du sujet. Cependant, si vous avez déjà visité le sujet auparavant et que vous étiez en train de lire à mi-chemin du sujet, l’approche routeTo vous ramènera à la même position dans le sujet.

Je me demande s’il existe un moyen d’ajouter la fonctionnalité de clic du milieu aux clics de widget… je devrai me pencher sur la question, peut-être que quelqu’un de l’équipe Discourse aura une idée.

1 « J'aime »
7

Oui, je pensais que cela serait lié à cela, c’était juste quelque chose que l’un de mes modérateurs m’a mentionné, j’ai pensé soulever le point ici au cas où :slight_smile:

1 « J'aime »
8

Salut Keegan, merci d’avoir créé ce composant de thème ! C’est le pont parfait entre les composants Custom Header Links et Header Submenu que j’avais examinés auparavant.

Y a-t-il une chance d’ajouter une option ‘target’ (ouvrir dans un nouvel onglet) aux liens que nous y ajoutons, comme dans les deux autres composants de thème ?

1 « J'aime »
9

Je peuple manuellement les éléments du sous-menu à partir d’une source externe et j’envoie plusieurs requêtes ajax dans une boucle pour les récupérer. Naturellement, s’il y a beaucoup d’éléments. Le composant se charge avant que toutes les requêtes ne soient terminées et certains éléments sont manquants. Est-il possible de modifier la source pour y parvenir ?

1 « J'aime »
11

Composant incroyable. Merci de partager :heart:.

12

Bonjour ! Merci pour ce composant fantastique :slight_smile:

Il semble qu’il manque une marge à droite lorsqu’on n’est pas connecté sur le forum. Voici à quoi cela ressemble :
Capture d’écran 2022-12-05 à 16.22.20

Alors que si je suis connecté, c’est bon.

J’espère que cela aidera à l’améliorer.

13

Y a-t-il une possibilité de :

  1. liens vers des URL éternelles ?
  2. liens cibles pour s’ouvrir dans de nouveaux onglets comme mentionné précédemment ?

Nous mettons en place une nouvelle instance sur les serveurs Discourse et essayons de faire correspondre notre menu Discourse à notre site WP aussi étroitement que possible.

Merci

1 « J'aime »
14

J’ai juste installé ce composant pour remplacer les composants « Custom Header Links » et « Easy Footer ».

Et j’adore vraiment ce composant, il est génial !

Ça marche pour moi. Voulez-vous dire une cible _blank ou quelque chose comme ça, ou des URL externes en général (qui fonctionnent pour moi) ?

J’ai remarqué une chose : sur les appareils mobiles, je ne peux pas faire défiler vers le bas. Il semble que j’aie trop de menus. :wink: Est-ce que cela peut être ajusté ?

2 « J'aime »
15

Je viens de faire une PR pour ce problème :

Lorsque vous consultez le lien ci-dessus, vous pouvez voir que le CSS ajusté fonctionne comme il se doit. :slight_smile:

3 « J'aime »
16

Bonjour, merci pour ce super composant !
Cependant, j’ai remarqué qu’en cliquant sur un lien, tous les textes et icônes sont remplacés par ceux du dernier élément.

J’ai aussi remarqué qu’en cliquant sur le logo, les textes et icônes des liens changent

Je joins un court exemple vidéo :

Le lien de la page est : https://oii.francescomancuso.it/forum/

Comment puis-je corriger cela ? Merci d’avance !

17

Super composant de thème ! :chefs_kiss:

Il serait encore meilleur si nous pouvions également définir que les liens s’ouvrent dans un nouvel onglet, au lieu du même onglet qu’actuellement. :+1:

18

Salut Francesco :wave:

Je jetterais volontiers un œil, mais tu as changé la mise en page et n’utilises apparemment plus le composant pour afficher les liens.

Je ne peux pas reproduire le problème sur mon forum de test.

Si, par hasard, tu peux y jeter un autre coup d’œil et nous dire si tu as toujours le problème, n’hésite pas à le faire. :slight_smile:

Si une telle fonctionnalité était implémentée, pensez-vous qu’elle devrait outrepasser les préférences des utilisateurs concernant les liens externes (Ouvrir tous les liens externes dans un nouvel onglet paramètre) ?

image

2 « J'aime »
22

Bonjour, merci beaucoup pour votre réponse.

J’ai décidé de changer de mise en page pour créer un graphique uniforme sur toutes les zones de ma plateforme.
Après avoir effectué une migration de domaine, je vérifierai si l’erreur est résolue.

Passez une bonne journée :smiley:

2 « J'aime »
23

Je pense qu’il devrait suivre les préférences des utilisateurs. Sauf si cela a été remplacé par un administrateur ou un modérateur :+1:

24

Alors… je viens d’implémenter ce composant de thème et nous avons déjà reçu des retours assez pertinents de la part de certains de nos membres de longue date.

Donc, en gros, si je devais :

  • (1) cliquer d’abord sur le bouton de recherche dans l’en-tête, puis
  • (2) survoler l’en-tête déroulant ensuite.
    → L’en-tête déroulant apparaîtrait sous la barre de recherche, ce qui n’est pas ce que nous recherchons. Idéalement, la barre de recherche devrait disparaître avant que le menu déroulant n’apparaisse.

Alors que si je survolais d’abord l’en-tête déroulant, puis cliquais sur le bouton de recherche, cela se comporterait comme prévu, c’est-à-dire (1) le menu déroulant disparaît et (2) la barre de recherche apparaît.

Un autre membre s’est également plaint de son apparence sur mobile. Y a-t-il un moyen de n’activer ce composant de thème que sur ordinateur ?

Merci :+1:

1 « J'aime »