Enlaces de navegación superior personalizados

[Discourse]

||||
-|-|
| Resumen | Custom Top Navigation Links te permite agregar enlaces a la navegación superior de Discourse.
| | Vista previa | Vista previa en Discourse Theme Creator |
| Enlace al repositorio | https://github.com/discourse/Discourse-nav-links-component
| ¿Nuevo en Discourse Themes? | Guía para principiantes sobre el uso de Discourse Themes

Instala este componente del tema

Dado que este es un componente de tema oficial mantenido por el equipo de Discourse, las solicitudes de #soporte, #reportar:errores, #contribuir:ux y #contribuir:funcionalidades pueden realizarse en las categorías correspondientes aquí en Meta, etiquetándolas con la etiqueta adecuada del componente de tema. Haz clic en un enlace a continuación para comenzar.

 Soporte  Error  UX  Funcionalidad

Funcionalidades

Escritorio

Móvil

Configuración:

Nombre	Descripción
Enlaces de navegación	Delimitados por punto y coma en este orden: nombre para mostrar;descripción;URL
Ocultar menús desplegables	Ocultar los menús desplegables de categorías y etiquetas
Ocultar enlaces predeterminados	Ocultar los enlaces predeterminados tanto en móvil como en escritorio.

• Enlaces de navegación: estos necesitan 3 partes:

  • Nombre
  • Descripción
  • Ruta o URL

  El nombre es el texto del enlace que aparece en el menú. La descripción aparece cuando pasas el cursor sobre el nombre, así:

  

  La ruta/URL es a donde quieres que vaya el enlace.

  Puedes agregar enlaces como valores delimitados por punto y coma en la configuración del tema siguiendo este orden

  nombre;descripción;URL

  La URL también puede ser relativa, como

  /c/staff, /t/232, /groups/plugin_authors, /about, /tags/official

• Ocultar menús desplegables

  Oculta los menús desplegables predeterminados de categorías y etiquetas

  

• Ocultar enlaces predeterminados

  Oculta los enlaces predeterminados en esta sección

  

¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Standard, Business y Enterprise.

[Cazadividendos (Luis álvarez)]

Hola

Uso este componente de tema. Uno de los elementos del menú apunta a una categoría y me gustaría mostrar los temas no leídos de esta categoría.

En lugar de “Agora”, me gustaría que mostrara “Agora (3)” para un usuario que tiene tres temas no leídos en esta categoría (el mismo comportamiento que el enlace estándar “No leídos”).

¿Alguna idea?

Gracias de antemano.

[manuel (Manuel Kostka)]

@Johani

La URL también puede ser relativa como
/tags/theme-component

¿Alguien sabe cómo podría añadir un enlace de etiqueta que sea realmente relativo a la ruta actual? Me gustaría usar una etiqueta Acerca de y ofrecerla como un enlace superior que apunte a un tema Acerca de relativo a la categoría en la que se encuentra un usuario.
Por ejemplo, el usuario está en la categoría /c/feedback/7. Al elegir Acerca de se dirigirá a /tags/c/feedback/7/about.

[manuel (Manuel Kostka)]

Me gustaría usar el componente en una instancia, pero varios comportamientos no funcionan:

• Cuando se usa “Ocultar enlaces predeterminados”, oculta los dos primeros elementos secundarios (Más recientes y Categorías). Pero cuando uno navega a una categoría, el enlace predeterminado “Categorías” ya no se muestra en el menú. Entonces, esta configuración oculta un elemento de navegación adicional, el que de otro modo sería el tercero en la línea.

• Agregué 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 predeterminado “Más recientes”, sino uno que agregué a través del componente (que solo enlaza a /latest).

• De hecho, el enlace “Más recientes” tampoco obtiene una clase activa cuando no se llama “Más recientes”. Por lo tanto, la clase activa en la ruta actual no parece funcionar en absoluto debido al componente. Esta es la vista en /latest, pero con un nombre diferente para el enlace de “Más recientes”:

[sok777 (sok)]

Pregunta rápida:
Estoy intentando crear esto y hacer que la URL sea ?order=created para que los usuarios puedan ver los temas recientes.

Esto funciona perfectamente en el escritorio, pero falla en el móvil: la barra de navegación simplemente se recarga y no muestra el menú desplegable.

[WJsirius (WJ)]

Tengo la misma pregunta… ¿Es esa una solución?

[WJsirius (WJ)]

Creo que sé por qué sucedió esto…
el componente tiene la siguiente línea:

if (window.location.pathname.match(sec2)) {
          $(navHeader).html(filter + markd);
        }

Debido a que la expresión regular… ? en sí misma se usa como marca especial de expresión regular, y el parámetro se supone que se compara con window.location.search.
Hice un fork del componente, lo cambié al siguiente código y funciona.

if (sec[2].indexOf("?") === -1) {
        if (window.location.pathname.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      } else {
        // reg ?->/?
        sec[2] = sec[2].replace(/\?/g, "/?");
        const pathWithSearch = window.location.pathname + window.location.search;
        if (pathWithSearch.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      }

[sok777 (sok)]

Vaya, bien hecho

¿Dónde pusiste este fragmento de código?

[WJsirius (WJ)]

Discourse-nav-links-component/mobile/head_tag.html, reemplaza el código coincidente.

[nathank (Nathan Kershaw)]

@WJsirius

Hice un fork del componente, lo cambié al siguiente código y funciona.

¿Por qué no hacer un PR para que todos se beneficien?

[WJsirius (WJ)]

¿Puedo hacer eso? Siempre pienso que mi nivel de código es demasiado pobre… y me da un poco de vergüenza hacerlo. ¡¡¡Gracias por el consejo!!! ¡Lo revisaré y haré un PR!

[nathank (Nathan Kershaw)]

@WJsirius

Siempre pienso que mi nivel de código es demasiado pobre

¡Yo también pienso eso sobre mis intentos de contribución!

Sin embargo, el @team (y sus herramientas automatizadas) parecen ser bastante buenos para organizar el código.

Una vez que lo hayas convertido en un PR, puedes publicar el enlace del PR aquí en Meta y se mostrará una impresionante actualización en vivo incrustada del estado del PR.

[piffy]

@manuel

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

¿Alguna vez pudiste resolver esto? Estoy teniendo un problema similar.

[piffy]

No puedo decir que haya encontrado una solución ideal, pero sí descubrí cuál era el problema para mí.

El problema se puede encontrar aquí
https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head_tag.html

Específicamente, esta parte:

    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        let contentFilterMode = this.get("content").get("filterMode");

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }
      })
    });

Parece que esto establece el estado “activo” en cada enlace de navegación. Francamente, la lógica de cómo decide y qué son todas estas variables es bastante opaca para mí. Pero el problema está aquí:

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }

Para mí, esto comprueba si la URL de la página es la misma que la ubicación de la URL de la barra de navegación y, si es así, devuelve el resultado de contentFilterMode === filter, siendo ambas variables un poco confusas para mí. Si la condición falla, parece que simplemente ejecuta la lógica normal de si algo debe marcarse como activo (que es por lo que mis enlaces no personalizados parecen funcionar bien). El problema es que, si bien este código se ejecuta correctamente una vez por cada enlace de navegación, la variable location siempre parece ser “categories”, por lo que la declaración if siempre es falsa para los enlaces personalizados. Además, incluso si corrijo la variable “location” reemplazándola con this.get("content").href, el valor de retorno también es siempre falso porque la variable filter también siempre se establece en “categories”.

Normalmente, haría una PR para solucionar esto, pero el problema raíz real todavía se me escapa. He ideado una solución alternativa que funciona para mí, pero altera ligeramente la funcionalidad documentada de este componente, por lo que preferiría no hacer una PR. Creo que habrá casos extremos en los que tampoco funcionará, como si tu página de inicio estuviera configurada en /latest

    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        return window.location.pathname.includes(this.get("content").href);
      })
    });

Básicamente, solo comprueba si la URL actual incluye la URL de la barra de navegación como una subcadena. Si es así, la resalta.

[mononym]

Hola. I iterate on this post. Is there a way to indicate unread topics please? Thx

[thaidb]

Hola,
¿Cómo configuramos abrir URL en una nueva pestaña?
¡Gracias!

[carbonrich (Richard Hawkins)]

Este podría ser un componente realmente útil, pero parece que algunos errores básicos (pero más allá de mi capacidad para corregirlos) están impidiendo su uso generalizado. ¿Se corregirá alguno de estos?

[awesomerobot (Kris)]

¿Puedes ser más específico sobre qué errores te impiden usar el componente?

[carbonrich (Richard Hawkins)]

Sí, lo siento, el principal que he encontrado es este:

@manuel

• Al usar “ocultar enlaces predeterminados” se ocultan los dos primeros elementos secundarios (Últimos y Categorías). Pero cuando se navega a una categoría, el enlace predeterminado “Categorías” ya no se muestra en el menú. Entonces, esta configuración oculta un elemento de navegación adicional, el que de otro modo sería el tercero en la fila.

¡Supongo que solo necesita un CSS mejor dirigido, pero podría estar equivocado!