Sur mobile :
« déréférencer »
↓
Sur ordinateur :
Je voudrais changer cela car cela pourrait montrer de manière plus évidente qu’il y a des options en attente de clic, et il y a de larges espaces vides à droite du menu déroulant.
Bonjour,
C’est possible avec Overriding Discourse template. Mais je vous suggère de lire toute la documentation.
Dans ce cas, nous devons trouver le modèle de barre de navigation. Vous pouvez trouver tous les modèles ici : https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates
La barre de navigation est un composant, nous pouvons donc la trouver dans le dossier des composants. navigation-bar.hbs, c’est le modèle que nous voulons utiliser.
Voici le modèle de barre de navigation en vue de bureau.
{{#each this.navItems as |navItem|}}
<NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />
Mais attendez… nous savons que la barre de navigation a une version mobile, que nous voulons changer pour la version de bureau. Si nous regardons les modèles de près, nous pouvons voir un dossier mobile. Dans ce dossier, nous pouvons trouver les modèles qui ont une version mobile. Par exemple, la barre de navigation. Nous devons donc d’abord aller dans le dossier mobile, puis aller dans les composants et rechercher navigation-bar.hbs. Nous allons remplacer ce modèle par la version de bureau, que j’ai collée ci-dessus.
D’après la documentation que j’ai liée ci-dessus, nous savons que nous devons commencer comme ceci :
Avec data-template-name, nous devons cibler le modèle que nous voulons remplacer.
Nous savons maintenant que la route est : mobile → composants → navigation-bar
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
</script>
Après cela, nous collons simplement le code de bureau à l’intérieur :
Vous pouvez maintenant coller ce modèle dans un composant de la section header mobile. 
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
{{#each this.navItems as |navItem|}}
<NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />
</script>
Assurez-vous que votre modèle personnalisé est toujours à jour. S’il y a un changement dans le modèle de barre de navigation principal, vous devriez également mettre à jour votre modèle personnalisé pour que tout fonctionne correctement.
Sur le thème par défaut, cela ressemble à ceci 
Peut-être qu’un style CSS est nécessaire pour l’adapter au mobile. Mais cela dépend du thème que vous utilisez.
Par exemple, le thème par défaut a une bordure que je voudrais masquer.
Mobile / Section CSS
.list-controls .nav-pills > li {
border: none;
}
3 « J'aime »
Salut Don.
J’apprécie sincèrement votre guide détaillé et bien expliqué, qui est extrêmement utile pour quelqu’un comme moi qui n’est pas très familier avec le code. 
Grâce à votre texte, j’ai non seulement réussi à faire le changement, mais j’ai aussi appris une compétence utile et acquis une compréhension plus approfondie de Discourse.
Les mots ne peuvent exprimer pleinement ma gratitude. Passez une bonne journée !
1 « J'aime »
Au fait, je pense que vous faisiez référence à la section head.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.