Links de Navegação Personalizados no Topo

[Discourse]

	Resumo	Links Personalizados de Navegação Superior permite adicionar links à navegação superior do Discourse.
	Pré-visualização	Pré-visualizar no Discourse Theme Creator
	Link do Repositório	https://github.com/discourse/Discourse-nav-links-component
	Novo em Temas do Discourse?	Guia para iniciantes sobre o uso de Temas do Discourse

Instalar este componente de tema

Como este é um #componente de tema #oficial mantido pela equipe do Discourse, solicitações de #suporte, bug, ux e #funcionalidade podem ser feitas nas respectivas categorias aqui no Meta, e devem ser marcadas com a tag apropriada do componente de tema. Clique em um dos links abaixo para iniciar uma nova discussão.

 Suporte  Bug  UX  Funcionalidade

Funcionalidades

Desktop

Mobile

Configurações:

Nome	Descrição
Links de navegação	Separados por ponto e vírgula nesta ordem: nome de exibição;descrição;URL
Ocultar menus suspensos	Oculta os menus suspensos de categorias e tags
Ocultar links padrão	Oculta os links padrão tanto no mobile quanto no desktop.

• Links de navegação — estes precisam de 3 partes:

  • Nome
  • Descrição
  • Caminho ou URL

  O nome é o texto do link que aparece no menu. A descrição aparece quando você passa o mouse sobre o nome, assim:

  

  O Caminho/URL é para onde você deseja que o link leve.

  Você pode adicionar links como valores separados por ponto e vírgula nas configurações do tema seguindo esta ordem:

  nome;descrição;URL

  A URL também pode ser relativa, como:

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

• Ocultar menus suspensos

  Oculta os menus suspensos padrão de categorias e tags

  

• Ocultar links padrão

  Oculta os links padrão nesta seção

  

Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

[Cazadividendos (Luis álvarez)]

Olá

Uso este componente de tema. Um dos itens do menu aponta para uma categoria e gostaria de exibir o número de tópicos não lidos para essa categoria.

Em vez de “Agora”, gostaria que aparecesse “Agora (3)” para um usuário que tenha três tópicos não lidos nessa categoria (mesmo comportamento do link padrão “Não lidos”).

Alguma ideia?

Obrigado antecipadamente.

[manuel (Manuel Kostka)]

@Johani

URL também pode ser relativo como
/tags/theme-component

Alguém sabe como posso adicionar um link de tag que seja realmente relativo à rota atual? Eu gostaria de usar uma tag Sobre e oferecê-la como um link superior para um tópico Sobre relativo à categoria em que um usuário está.

Por exemplo, o usuário está na categoria /c/feedback/7. Escolher Sobre direcionará para /tags/c/feedback/7/about.

[manuel (Manuel Kostka)]

Gostaria de usar o componente em uma instância, mas vários comportamentos não estão funcionando:

• Ao usar “ocultar links padrão”, ele oculta os dois primeiros itens filhos (Mais recentes e Categorias). Mas quando se navega para uma categoria, o link padrão “Categorias” já não é mostrado no menu. Então, essa configuração oculta um item de navegação adicional, o que seria o terceiro na linha.

• Adicionei um item de menu para um link de categoria direto (/c/game-talk). Quando navego para ele, ele não recebe uma classe ativa e não é destacado. Em vez disso, o link “Mais recentes” é destacado e tem uma classe ativa. No entanto, este não é o link padrão “Mais recentes”, mas um que adicionei através do componente (apenas vinculando a /latest).

• Na verdade, o link “Mais recentes” também não recebe uma classe ativa quando não se chama “Mais recentes”. Portanto, a classe ativa na rota atual parece não funcionar de todo por causa do componente. Esta é a visualização em /latest, mas com outro nome para o link Mais recentes:

[sok777 (sok)]

Pergunta rápida:
Estou tentando criar isso e fazer com que a URL seja ?order=created para que os usuários possam navegar pelos tópicos recentes.

Isso funciona perfeitamente no desktop, mas falha no mobile - a barra de navegação apenas recarrega e não mostra o menu suspenso.

[WJsirius (WJ)]

Eu tenho a mesma pergunta… Essa é uma solução?

[WJsirius (WJ)]

Acho que sei por que isso aconteceu…
o componente tem a linha abaixo:

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

Por causa da expressão regular… o ? em si é usado como marca especial de expressão regular, e o parâmetro deveria ser comparado com window.location.search.
Eu fiz um fork do componente, mudei para o seguinte código e funcionou.

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)]

Uau, parabéns

Onde você colocou este trecho de código?

[WJsirius (WJ)]

Discourse-nav-links-component/mobile/head_tag.html , substitua o código correspondente.

[nathank (Nathan Kershaw)]

@WJsirius

Eu fiz um fork do componente, alterei para o seguinte código e funcionou.

Por que não fazer um PR para que todos possam se beneficiar?

[WJsirius (WJ)]

Posso fazer isso? Sempre acho que meu nível de código é muito ruim… e fico um pouco envergonhado de fazer isso. Obrigado pelo conselho!!! Vou revisar e fazer um PR!

[nathank (Nathan Kershaw)]

@WJsirius

Eu sempre acho que meu nível de código é muito ruim

Eu também penso isso sobre minhas tentativas de contribuição!!

No entanto, a @equipe (e suas ferramentas automatizadas) parecem ser muito boas em organizar o código.

Depois que você o transformar em um PR, poderá postar o link do PR aqui no Meta e ele exibirá uma atualização ao vivo incrível e incorporada do status do PR.

[piffy]

@manuel

Adicionei um item de menu para um link de categoria direta (/c/game-talk). Quando navego para ele, ele não recebe uma classe ativa e não é destacado. Em vez disso, o link “Latest” é destacado e tem uma classe ativa. No entanto, este não é o link padrão “Latest”, mas um que adicionei através do componente (apenas vinculando a /latest)

Você conseguiu resolver isso? Estou tendo um problema semelhante

[piffy]

Não posso dizer que encontrei uma solução ideal, mas descobri qual era o problema para mim.

O problema pode ser encontrado aqui
https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head_tag.html

Especificamente, 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 isso define o “ativo” em cada link de navegação. Francamente, a lógica de como ele decide e o que todas essas variáveis são é bastante opaca para mim. Mas o problema está aqui:

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

Para mim, isso verifica se a URL da página é a mesma que a localização da URL da barra de navegação e, se for, retorna o resultado de contentFilterMode === filter, sendo ambas as variáveis um pouco obscuras para mim. Se a condição falhar, parece que ele apenas executa a lógica regular de se algo deve ser marcado como ativo (que é por que meus links não personalizados parecem funcionar bem). O problema é que, embora este código seja executado corretamente uma vez por link de navegação, a variável location parece ser sempre “categories”, então a instrução if é sempre falsa para links personalizados. Além disso, mesmo que eu corrija a variável “location” substituindo-a por this.get("content").href, o valor de retorno também é sempre falso porque a variável filter também é sempre definida como “categories”.

Normalmente, eu faria um PR para corrigir isso, mas o problema raiz real ainda me escapa. Eu criei uma solução alternativa que funciona para mim, mas altera ligeiramente a funcionalidade documentada deste componente, então prefiro não fazer um PR. Acho que haverá casos extremos em que não funcionará também, como se sua página inicial estivesse definida como /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);
      })
    });

Basicamente, ele apenas verifica se a URL atual inclui a URL da barra de navegação como uma substring. Se sim, ele a destaca.

[mononym]

Olá. Eu itero neste post. Existe alguma forma de indicar tópicos não lidos por favor? Obrigado.

[thaidb]

Olá,
Como configuramos para abrir URL em nova aba?
Obrigado!

[carbonrich (Richard Hawkins)]

Este é potencialmente um componente muito útil, mas parece que alguns bugs básicos (mas além da minha capacidade de corrigir) estão impedindo seu uso mais amplo. Algum deles será corrigido?

[awesomerobot (Kris)]

Você pode ser mais específico sobre quais bugs estão impedindo você de usar o componente?

[carbonrich (Richard Hawkins)]

Sim, desculpe, o principal que encontrei foi este:

@manuel

• Ao usar “ocultar links padrão”, ele está ocultando os dois primeiros itens filhos (Mais recentes e Categorias). Mas quando se navega para uma categoria, o link padrão “Categorias” já não é mostrado no menu. Então, essa configuração oculta um item de navegação adicional, o que seria o terceiro da fila.

Presumo que precise apenas de um CSS mais direcionado, mas posso estar enganado!