En el móvil:
“eliminar de la lista”
↓
En el escritorio:
Me gustaría cambiarlo porque podría mostrar de una manera más obvia que hay algunas opciones esperando a ser hechas clic, y hay amplios espacios en blanco a la derecha del menú desplegable.
Hola,
Es posible con Sobrescribir plantilla de Discourse. Pero sugiero leer toda la documentación.
En este caso, tenemos que encontrar la plantilla navigation-bar. Aquí puedes encontrar todas las plantillas: https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates
La barra de navegación es un componente, por lo que podemos encontrarla en la carpeta components. navigation-bar.hbs es la plantilla que queremos usar.
Esta es la plantilla de la barra de navegación en vista de escritorio.
{{#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}} />
Pero espera… sabemos que la barra de navegación tiene una versión móvil, lo que queremos cambiar a la versión de escritorio. Si miramos las plantillas de cerca, podemos ver una carpeta mobile. En esta carpeta podemos encontrar aquellas plantillas que tienen versión móvil. Por ejemplo, la barra de navegación. Así que tenemos que ir primero a la carpeta mobile, luego a components y buscar navigation-bar.hbs. Sobrescribiremos esta plantilla con la versión de escritorio, que pegué arriba.
De la documentación que enlacé arriba, sabemos que deberíamos empezar así:
Con data-template-name tenemos que apuntar a la plantilla que queremos sobrescribir.
Ahora sabemos que la ruta es: mobile → components → navigation-bar
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
</script>
Después de esto, simplemente pegamos el código de escritorio dentro:
Ahora puedes pegar esta plantilla en un componente de la sección header móvil. 
<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>
Asegúrate de que tu plantilla personalizada esté siempre actualizada. Si hay algún cambio en la plantilla principal navigation-bar navigation-bar template, deberías actualizar también tu plantilla personalizada para que todo funcione correctamente.
En el tema predeterminado se ve así 
Quizás necesite algún estilo CSS para que encaje en el móvil. Pero depende del tema que uses.
Por ejemplo, el tema predeterminado tiene un borde que yo ocultaría.
Sección Móvil / CSS
.list-controls .nav-pills > li {
border: none;
}
Hola Don.
Agradezco sinceramente tu guía detallada y bien explicada, que es extremadamente útil para alguien como yo que no está muy familiarizado con el tema del código. 
Con tu texto, no solo logré hacer el cambio, sino que también aprendí una habilidad útil y obtuve una comprensión más profunda de Discourse.
Las palabras no pueden expresar completamente mi gratitud. ¡Que tengas un buen día!
Por cierto, creo que te referías a la sección head.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
