Enlaces de navegación superior personalizados

[awesomerobot (Kris)]

¡Gracias por el detalle adicional! De hecho, era CSS un poco frágil. Ahora tenemos nombres de clase donde antes no los había, por lo que podemos ser más específicos.

He refactorizado un poco el componente aquí:

REFACTOR: fix active state, fix hiding, simplify

Así que todo lo que necesitará es una actualización.

@Johani

Y Ocultar enlaces predeterminados ocultará los enlaces predeterminados Más recientes y Categorías del menú de navegación

He actualizado esto para que ocultar enlaces predeterminados oculte todos los enlaces predeterminados, no solo los más recientes y las categorías. Creo que esto hará que el comportamiento de ocultar sea un poco más fácil de entender.

Los elementos de navegación añadidos por este componente ahora obtendrán una clase nav-item_custom_item-name, donde item-name es el nombre de visualización del elemento de navegación (los espacios se reemplazan con guiones). Por lo tanto, un elemento de navegación llamado “mis marcadores” se puede dirigir con CSS de esta manera:

#navigation-bar {
   li.nav-item_custom_my-bookmarks {
     background: skyblue;
   }
}

Los elementos predeterminados tienen un nombre de clase como nav-item_name, por lo que si desea ocultar el enlace de categorías predeterminado, puede hacer:

#navigation-bar {
   li.nav-item_categories {
     display: none;
   }
}

@manuel

Añadí un elemento de menú para un enlace de categoría directo (/c/game-talk). Cuando navego a él, no obtiene una clase activa y no se resalta. En cambio, el enlace “Más recientes” está resaltado y tiene una clase activa. Sin embargo, este no es el enlace “Más recientes” predeterminado, sino uno que añadí a través del componente (que solo enlaza a /latest)

Esto ahora debería obtener la clase activa.

[sparkplug]

Hola,

La última actualización cambia el texto de visualización del enlace de navegación a minúsculas y añade guiones adicionales.

Tenemos lo siguiente en el campo del enlace de navegación:

⮉ Home;show all categories;/forums

El enlace de navegación aparece de la siguiente manera:

Anteriormente se mostraba como: ⮉ Home

Esta línea parece ser la culpable:

javascripts/discourse/initializers/init-nav-bar-additions.js

[awesomerobot (Kris)]

Gracias por mencionarlo, ¡acabo de hacer una pequeña actualización que soluciona esto!

[carbonrich (Richard Hawkins)]

Dado que estamos en el territorio de los sueños más salvajes aquí —¡muchas gracias por estas correcciones @awesomerobot!—, una adición útil a este componente sería una opción para que la navegación personalizada aparezca antes de los menús desplegables de categorías y etiquetas, ¿es eso posible (sin mucho trabajo)?!

[awesomerobot (Kris)]

Puedes hacer esto con algo de CSS añadido a un tema:

.desktop-view {
  #navigation-bar {
    order: -1;
    margin-right: 0;
  }
  .category-breadcrumb {
    margin-right: auto;
  }
}

[pfaffman (Jay Pfaffman)]

Parece magia.

[huynhthai824 (Sora &\)]

Hola,
¿Cómo puedo configurar una URL en Nav para que se abra en una nueva pestaña?
¡Gracias!

[Canapin (Coin-coin le Canapin)]

Esto no es posible desde el plugin, necesitas añadir JavaScript personalizado para esto.

[Liseré]

Hola a todos,

¿Hay alguna forma de mostrar el enlace en el móvil, por favor?

¡Gracias!

[NateDhaliwal]

Hola, ¿te refieres a los enlaces completos en lugar del menú desplegable en el móvil?
Si es así, no hay mucho espacio en el móvil para tener los enlaces. El menú desplegable lo compacta en uno solo.

[Liseré]

Hola,

¡Gracias por tu rápida respuesta!

Lo siento, debería haber jugado más con la configuración, no aparece en el móvil porque he marcado Ocultar los enlaces predeterminados tanto en el móvil como en el escritorio.

¿Cómo puedo ocultar estos enlaces predeterminados y seguir mostrando mis enlaces en el móvil, por favor?

[nathank (Nathan Kershaw)]

He puesto un informe de error para este TC:

The first Custom Top Nav link inappropriately appears selected

This Theme Component has a significant issue at present: The Problem The first custom top nav link appears to be selected; this is of course nonsense as it isn’t usually a list. This is our homepage / Latest list: [The image captures a screenshot of the eHealth Forum website, showing a section titled 'Quick Orientation to the eHealth Forum' with instructions on how to use the site, and a list of upcoming and popular topics including 'Table summary - Scribes are Here - What AI Tools are Next…

Esto realmente arruina la funcionalidad; si no se va a abordar, ¿quizás esto debería etiquetarse como #roto?

[Johnny_McIvor]

Sugerencia: incluye iconos como una opción. Usé emojis y se ve muy elegante, pero se rompe en el móvil y obviamente no es consistente

[Moin]

Hay un componente que te permite añadir iconos a los enlaces de la navegación superior: Discourse Nav Item Icon / Emoji
y también funciona con enlaces personalizados añadidos por este componente. La única diferencia es que necesitas añadir custom_ delante del nombre del elemento de navegación.

Por ejemplo,
añadí un enlace de “Preferencias” con la ayuda de este componente: Preferences;edit your preferences;/my/preferences

Y luego configuré el componente de icono/emoji para añadir el icono de la llave inglesa: icon:custom_preferences:solid:wrench:currentColor

Resultado: