Ah, sim. Esse era o meu problema. Obrigado por apontar.
No subconjunto de ícones SVG, você adiciona o nome do ícone do Font Awesome que está procurando e, em seguida, no menu onde adiciona os botões no cabeçalho, usa a mesma sintaxe. Para o ícone de usuário, basta escrever “user”, por exemplo.
Consegui fazer com que os links abrissem em uma nova aba com este script. Basta adicionar o seguinte script à seção “Head”.
<script>
document.addEventListener("DOMContentLoaded", function() {
const links = document.querySelectorAll(".custom-header-link.with-url");
links.forEach(link => {
link.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
const titles = {
"Documentation": "Enter URL Here",
"Downloads": "Enter URL Here",
"Source Code": "Enter URL Here",
"Dev Portal": "Enter URL Here",
"Slack Channel": "Enter URL Here"
};
const url = titles[this.getAttribute("title")];
if (url) {
window.open(url, '_blank');
}
});
link.setAttribute("href", "#");
});
});
</script>
Espero que isso ajude!
É possível ter uma visualização diferente quando o título do site é minimizado e o título do tópico atual é exibido (ao rolar para baixo em um tópico)?
Notei que o cabeçalho suspenso ainda fica ótimo e faz muito sentido em telas largas, mas não em telas pequenas. Portanto, fazer um display: none seria útil e isso já é feito em desktops quando max-width: 712px.
Obrigado e muitas saudações. ![]()
Existe uma maneira de mostrar apenas o cabeçalho suspenso no celular?
Eu tentei o seguinte:
/* Estilos padrão - ocultar os botões do cabeçalho */
.header-buttons {
display: none;
visibility: hidden;
}
/* Media query para dispositivos móveis */
@media screen and (max-width: 767px) {
.header-buttons {
display: inline; /* ou display: inline-block; dependendo do seu layout */
visibility: visible;
}
}
O que funciona, mas qualquer outra coisa que esteja no cabeçalho (por exemplo, GitHub - discourse/discourse-header-search) ainda fica encolhida como se o cabeçalho suspenso ainda estivesse lá…
O que estou perdendo?
Obrigado
Provavelmente, sua personalização foi substituída.
Você não precisa de visibility – você pode fazer:
.header-buttons {
display: none !important;
}
Consulta sobre o uso das funções de segurança:
Se você estiver usando esta função, é possível ter mais de um grupo de segurança com acesso a um menu?
Nosso exemplo: executamos vários programas educacionais (com vários anos/turmas para cada programa), cada turma tem seu próprio grupo de segurança para que possamos dar acesso aos recursos educacionais corretos (sem que eles acessem recursos destinados a outro programa/ano letivo), com cada grupo de ano tendo uma Categoria exclusiva para sua turma.
Preciso criar menus para permitir que cada turma acesse sua categoria, mas também preciso permitir que nossa equipe de educação (que não está no grupo de segurança dos alunos) acesse esses espaços.
No momento, as únicas duas soluções que vejo:
- criar um grupo de segurança combinando a equipe e cada turma (irritante porque eu gostaria de menos complicações sobre grupos de segurança, não mais)
- duplicar menus, para que haja um para o grupo de alunos e outro para o grupo de funcionários
Nenhuma dessas opções parece boa.
Próxima pergunta: E quanto à adição de recursos de segurança aos itens do submenu?
(para o meu exemplo: isso significaria que eu poderia ter um menu para todos os vários grupos de cursos/turmas e, em seguida, mostrar aos alunos apenas os itens de submenu aplicáveis. Enquanto no momento tenho cerca de 5-6 menus principais para gerenciar)
Eu o encorajaria a procurar alternativas para este Componente de Tema, pois ele não se encaixa no seu caso de uso.
Posso sugerir, em vez disso, que você simplesmente coloque as categorias de classe na configuração do site default_navigation_menu_categories?
Como administrador, você as verá todas (embora possa personalizar essa visualização), mas os membros da sua classe e a equipe verão apenas aquelas às quais têm acesso na barra lateral.
Se eu entendi seu problema corretamente, isso funcionaria muito bem para você.
Olá Nathan,
Configuramos nossas categorias. Mas também gostaríamos de um menu no topo da página. Os usuários estão familiarizados com menus superiores - e comunidades já são uma curva de aprendizado difícil (não estamos aqui para criar um universo tecnológico totalmente novo para nossos alunos).
Também não funciona porque precisamos ser capazes de vincular a sites externos a partir do menu (especialmente nossos sites do SharePoint, em uso porque o Discourse não inclui uma biblioteca estruturada), e as categorias simplesmente não fazem isso.
Honestamente, poder permitir que vários grupos de segurança visualizem um menu (da mesma forma que permitimos que vários grupos de segurança acessem uma categoria) seria mais fácil. Mas se não for possível, teremos que encontrar outra solução.
@merefield A altura dos botões de login é afetada pelo cabeçalho suspenso
Este é um problema apenas se right for usado para links position.
Não estou mais mantendo isso, então marquei como unmaintained
No entanto, sinta-se à vontade para enviar um PR e eu o revisarei. Se você não tiver tempo ou habilidades, mas desejar que alguém o corrija e tiver orçamento, considere postar em Marketplace.
Isso também está me causando um problema. Dei uma olhada, mas é muito complexo para meus hacks básicos de CSS, infelizmente.
Fiz um PR para modernizar o componente. (patrocinado por @davidkingham) ![]()
Ao longo do caminho, ele corrige alguns problemas de UX que notei.
O componente poderia ter mais melhorias. Talvez eu faça outro PR mais tarde. Aqui estão alguns que notei:
- Substituir o tipo de configuração
json_schemapelo tipoobjects - Adicionar uma opção para abrir um link em uma nova aba
- Melhor acessibilidade
Obrigado @Arkshine - trabalho brilhante!
Estou vendo este erro fatal em um site que usa este tema componente ![]()
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'trim')
at get source (custom-icon.gjs:20:24)
...
Oh. Eu fiz um PR para corrigir o problema; obrigado por relatar!
Mesclado! ![]()
Ótimo componente e excelente trabalho — obrigado por seus esforços e expertise! Notei que o dropdown atualmente suporta um item de cabeçalho principal com um nível de subitens (por exemplo, Item de Cabeçalho → Links). É possível adicionar outro nível, para que funcione como: Item de Cabeçalho → Subitem → Links?
@angus Abri um PR para atualizar um nome de ícone desatualizado do Font Awesome que notei:
Obrigado @kelv ![]()
Deve funcionar no Horizon ou algo precisa ser alterado?
Este plugin é essencial para comunidades que possuem um blog e/ou mais aplicativos relacionados.
