Hallo,
Das ist mit Overriding Discourse template möglich. Ich empfehle jedoch, die gesamte Dokumentation zu lesen.
In diesem Fall müssen wir die Vorlage navigation-bar finden. Hier finden Sie alle Vorlagen. https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates
Die Navigationsleiste ist eine Komponente, daher finden wir sie im Ordner components. navigation-bar.hbs ist die Vorlage, die wir verwenden möchten.
Dies ist die Vorlage der Navigationsleiste in der Desktop-Ansicht.
{{#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}} />
Aber warten Sie… wir wissen, dass die Navigationsleiste eine mobile Version hat, die wir auf die Desktop-Version ändern möchten. Wenn wir uns also die Vorlagen genau ansehen, sehen wir einen Ordner mobile. In diesem Ordner finden wir die Vorlagen, die eine mobile Version haben. Zum Beispiel die Navigationsleiste. Wir müssen also zuerst in den Ordner mobile gehen, dann in den Ordner components und nach navigation-bar.hbs suchen. Wir werden diese Vorlage mit der Desktop-Version überschreiben, die ich oben eingefügt habe.
Aus der oben verlinkten Dokumentation wissen wir, dass wir so beginnen sollten:
Mit dem data-template-name müssen wir die Vorlage ansprechen, die wir überschreiben möchten.
Jetzt kennen wir den Pfad: mobile → components → navigation-bar
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
</script>
Danach fügen wir einfach den Desktop-Code ein:
Jetzt können Sie diese Vorlage in eine Komponente im mobilen Header-Bereich einfügen. ![]()
<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>
Stellen Sie sicher, dass Ihre benutzerdefinierte Vorlage immer auf dem neuesten Stand ist. Wenn es Änderungen an der Kernvorlage navigation-bar template gibt, sollten Sie auch Ihre benutzerdefinierte Vorlage aktualisieren, damit alles einwandfrei funktioniert. ![]()
Auf dem Standardthema sieht es so aus ![]()
Vielleicht benötigen Sie etwas CSS-Styling, um es an das Mobiltelefon anzupassen. Aber das hängt vom verwendeten Thema ab.
Zum Beispiel hat das Standardthema einen Rand, den ich ausblenden würde.
Mobile / CSS-Bereich
.list-controls .nav-pills > li {
border: none;
}

