Links de Navegação Personalizados no Topo

:discourse2: Summary Custom Top Navigation Links allows you to add links to Discourse top navigation.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/Discourse-nav-links-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

Desktop

Mobile

Settings:

Name Descriptions
Nav links Semicolon delimited in this order: display name;description;URL
Hide dropdowns Hide category and tag dropdowns
Hide default links Hide the default links on both mobile and desktop.
  • Nav links — these need 3 parts:

    • Name
    • Description
    • Path or URL

    Name is the text for the link that shows up on the menu. Description shows up when you hover the name like this:

    Path/URL is where you want the link to go.

    You can add links as semicolon delimited values in theme settings following this order

    name;description;URL

    URL can also be relative like

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

  • Hide dropdowns

    Hides the default category and tag dropdowns

    Screenshot 2023-05-11 at 3.10.55 PM

  • Hide default links

    Hides the default links in this section

    Screenshot 2023-05-11 at 3.11.29 PM


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

64 curtidas
Categories in "top menu"?
Add /groups to top nav
How to add breadcrumb?
What about adding tags in the top menu?
How to make some categories like Bugs and Features here visible in top menu?
What is the proper way to extend categories route and filter topics?
Link to find all deleted posts by all users in a particular period
Adding link to blog on main page
Create a Tag filter like 'Make & Model' on community.cartalk.com
How can I add a menu item
A playful approach to category moderation
Simple Unread List
Displaying all non-solved topics
Volunteer Activities - a simple setup for non-hierarchical collaboration
Discourse Docs
How to make the recommanded topics collection
Reply reminder - Remind users to reply to new users topics with zero replies
How to add a topic in top nav in a specific category?
Following tags and top feed for followed tags
Show latest list sorted by creation date
Following tags and top feed for followed tags
Change Topic List home router - from Latest to Following
Missing category and tags breadcrumbs
A "Votes" option for the top menu in main page
Adding a chat link in the top navigation links?
Add a specific class for wikis (when first post) at the topic list level
How to add an icon in a navigation link?
Customizing your site with existing theme components
Show Latest topics, not by comment on home page
Custom Button For Discourse
Add Follow feed to top navigation
Improvements i want for my discourse for making it less overwhelming/noisy for newcomers
Sidebar link / top button to PM admin
Adding 'Upcoming Events' to top navigation
Strange repetition in menu items
Disclaimer section on the "about" page
FKB Pro - Social theme
2023: The Year in Review
Is it possible to have the Board view as the only view?
How to add Button in Section
Brave default Theme
Air Theme
Provide a way to access tracked/watched topics (outside search)
Discourse Solved
The first Custom Top Nav link inappropriately appears selected
Add another tab to menu bar
Can we add "Groups" to top menu?
How to Disable ALL User-to-User DMs/Chat without breaking Other Features?
Disable personal message between members
Add category in Top Menu?
How can I remove the Category and tag filter?
How can I add a link to the top menu area?
Why we can't add groups to top menu
How to add links on home page menu to other site?
Traditional multi level hierarchy vs flat discourse hierarchy
Ordering topics - how do the links work?
Force Mobile Homepage
Knowledge Base
Automatically fill category with topics? "Best of" category?
How to add new button in different color
Adding "Category" as a topic list option within categories
Docs: Add link to top menu
New Theme: Tag-Pages Navigation
Custom nav bar options
Topic list sidebar navigation
Where can I see posts created by me?
Discourse Docs
Showing categories statically above most recent posts
Custom nav items no longer showing after recent update
Add /groups to top nav
Add topics-sorted-by-create-time to `top menu`
Categories Customization

Hi

I use this theme component. One of the items in the menú points to a category and I would like to inform the unread topics for this category.

image

Instead of Agora I would like Agora (3) for an user who has three unread topics in this category (same behaviour as standard link “Unread”).

Any idea?

Thanks in advance.

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.

2 curtidas

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.

Screenshot from 2022-05-10 18-29-05

  • 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).

Screenshot from 2022-05-10 18-25-39

  • 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:

Screenshot from 2022-05-10 18-39-15

2 curtidas

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.

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

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);
        }
      }
1 curtida

Uau, parabéns :clap:

Onde você colocou este trecho de código?

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

1 curtida

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

4 curtidas

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!

1 curtida

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.

5 curtidas

Você conseguiu resolver isso? Estou tendo um problema semelhante

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.

4 curtidas

4 posts foram divididos em um novo tópico: Filtro de tag relativo personalizado na barra de navegação

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

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

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?

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

Sim, desculpe, o principal que encontrei foi este:

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

1 curtida