No celular:
“deslistar”
↓
No desktop:
Gostaria de mudar isso porque pode mostrar de forma mais óbvia que há algumas opções esperando para serem clicadas, e há amplos espaços em branco à direita do menu suspenso.
Olá,
É possível com Substituição de modelo do Discourse. Mas sugiro ler toda a documentação.
Neste caso, precisamos encontrar o modelo de barra de navegação. Aqui você pode encontrar todos os modelos. https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates
A barra de navegação é um componente, então podemos encontrá-la na pasta de componentes. navigation-bar.hbs este é o modelo que queremos usar.
Este é o modelo da barra de navegação na visualização desktop.
{{#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}} />
Mas espere… sabemos que a barra de navegação tem uma versão mobile o que queremos mudar para a versão desktop, então se olharmos os modelos atentamente, podemos ver uma pasta mobile. Nesta pasta, podemos encontrar aqueles modelos que têm versão mobile. Por exemplo, a barra de navegação. Então, precisamos ir primeiro à pasta mobile, depois ir para componentes e procurar por navigation-bar.hbs. Substituiremos este modelo pela versão desktop, que colei acima.
Da documentação que linkei acima, sabemos que devemos começar assim:
Com o data-template-name precisamos direcionar o modelo que queremos substituir.
Agora sabemos que a rota é: mobile → componentes → navigation-bar
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
</script>
Depois disso, simplesmente colamos o código desktop dentro:
Agora você pode colar este modelo em um componente na seção 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>
Certifique-se de que seu modelo personalizado esteja sempre atualizado. Se houver alguma alteração no modelo principal navigation-bar, você também deve atualizar seu modelo personalizado para que tudo funcione bem.
No tema padrão, fica assim 
Talvez precise de alguma estilização CSS para se adequar ao mobile. Mas depende do tema que você usa.
Por exemplo, o tema padrão tem uma borda que eu esconderia.
Seção Mobile / CSS
.list-controls .nav-pills > li {
border: none;
}
3 curtidas
Olá Don.
Agradeço imensamente seu guia detalhado e bem explicado, que é extremamente útil para alguém como eu, que não está muito familiarizado com o código. 
Com seu texto, não só consegui fazer a alteração, como também aprendi uma habilidade útil e aprofundei meu entendimento sobre o Discourse.
As palavras não podem expressar totalmente minha gratidão. Tenha um bom dia!
1 curtida
A propósito, acho que você estava se referindo à seção head.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.