Isso é geralmente verdade, CSS não é uma forma segura de esconder nada, pois uma pessoa esperta pode olhar o código-fonte da página por qualquer motivo… mas nós servimos uma visualização sem JS para os rastreadores, então, nesse caso, o conteúdo adicionado por temas geralmente não é indexado de qualquer forma.
Atualizei o link de pré-visualização, deve funcionar agora!
É possível usar este componente para chamar um javascript com
javascript:script('function');
em vez de uma URL real?
(Parece que quase funciona, mas estou recebendo violações de CSP.)
Editado para adicionar:
Consegui fazer funcionar. Se mais alguém tiver essa dúvida, usei # na interface do componente em vez de uma URL, e então usei um ouvinte de eventos para chamar a função javascript.
Outros provavelmente conhecem uma maneira melhor, e espero que compartilhem esse conhecimento se o fizerem!
Olá, gostaria de ajustar o estilo e o tamanho da fonte dos links do cabeçalho. Alguém poderia me indicar o CSS correto que me permite fazer isso? Obrigado!
Olá @brentoshiro, as propriedades variarão dependendo do que você precisa estilizar, mas a forma como você selecionaria os links seria assim:
Para estilizar todos os links do cabeçalho:
.custom-header-links .headerLink a {
font-size: 1rem; // substitua pelo tamanho da fonte de sua escolha
color: #96b67b; // também pode usar variáveis como var(--tertiary);
font-style: italic; // opções: normal, italic, oblique
}
Para estilizar um link específico
Você pode acessar o link usando o título do link (separado por hifens e em minúsculas) assim para “Privacy”:
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: red;
}
ou usando o atributo title e inserindo o título do link:
.custom-header-links .headerLink a[title='Our Privacy Policy'] {
color: purple;
}
Para adicionar estilos ao passar o mouse, basta adicionar :hover após a tag a:
.custom-header-links .headerLink a:hover {
color: var(--primary-low);
}
Olá, seria possível estilizar os links para que fiquem centralizados em vez de apenas alinhados à esquerda/direita?
Isso é muito legal. Gostaria de saber quanto trabalho adicional seria necessário para permitir diferentes listas de links de cabeçalho por grupo? Temos funcionários e alunos em nosso site e adoraríamos poder fornecer links primários diferentes no cabeçalho para cada grupo.
Você poderia conseguir isso tendo cada grupo em um Tema diferente, com cada tema usando sua própria cópia deste Componente de Tema.
Isso funcionaria bem se um de seus dois grupos fosse bastante estático (ou pelo menos menor) - seu grupo de funcionários parece ideal para isso. Ou pelo menos se você tivesse apenas um grupo dinâmico.
Você então torna os links de alunos o Tema padrão do site e faz com que seus funcionários tenham os links de funcionários manualmente (seja pela interface do usuário ou pelo Console Rails).
Eu estava vindo aqui para perguntar isso, pois finalmente notei que eles aparecem na tela de login.
No meu caso, um dos links é alterado a cada mês (enquanto o nome do cabeçalho permanece o mesmo). É possível ocultar o cabeçalho com um código sem ter que editar para ocultar o link? Por exemplo, usando seu exemplo, eu teria
Suporte ao Cliente
2022-customer-support/26903 é o meu link, então customer-support-july, etc.
Então, como você pode ver, ocultar customer-support-june funcionaria bem, mas ele precisa ser atualizado mensalmente em vez de se eu estivesse apenas ocultando “FAQ” (e eu também não posso adicionar o /26903 do tópico ao código CSS, então não posso ocultar este link específico, embora eu possa possivelmente contornar isso publicando a página?). Se não houver outra maneira de fazer isso, não é um grande problema, não é nenhum esforço, é mais que eu garanto que esquecerei.
Olá, eu estava curioso para saber se seria possível obter possíveis traduções para o texto? Talvez incluindo chaves de tradução, se o componente as incluir ![]()
**Há alguma razão pela qual, por padrão, ele não é exibido para usuários não logados? **
Ignorar, por algum motivo, quando aplico um componente ao Tema, ele não aparece. Tenho que adicionar o componente ao Tema em vez disso.
Usando ícones UTF-8
Observe que você pode usar ícones UTF-8 como âncoras de link.
Nesse caso, você pode tentar usar este CSS para corresponder a outros ícones de menu suspenso de cabeçalho:
.custom-header-links .headerLink {
margin-top: -1px;
}
.custom-header-links .headerLink a {
padding: 3px 10px;
color: var(--primary-low-mid);
font-size: var(--font-up-5);
font-weight: bold;
}
.custom-header-links .headerLink:hover {
background-color: var(--primary-low);
}
.custom-header-links .headerLink:hover a {
color: var(--primary-medium);
}
Isso faz algo como isto:


Acabei de instalar este componente e adicionei alguns links, mas eles não foram exibidos.
Descobri que inserir um idioma impede que os links sejam exibidos no meu site. Originalmente, eu havia adicionado ‘blank’ por completude, embora não fosse necessário. Eles ainda não foram exibidos quando mudei ‘blank’ para ‘en’. Remover o valor completamente corrigiu o problema no meu caso. Não faço ideia do porquê, mas pensei em mencionar isso caso alguém tenha um problema semelhante.
Eu mesmo caí nessa outro dia também:
Vou ver se talvez podemos mudar os exemplos padrão para torná-lo mais intuitivo.
Removi o locale das configurações padrão aqui: UX: remove locale from default settings by awesomerobot · Pull Request #38 · discourse/discourse-custom-header-links · GitHub
Portanto, os padrões agora devem aparecer independentemente do locale em que o site está configurado. Obrigado @packman e @JammyDodger!
Meus links desapareceram após a última atualização (PC, Ubuntu, Brave)
Você poderia verificar isso?
@cmdntd – veja o tópico derivado. Provavelmente você tem uma atualização do Discourse disponível em Admin | Upgrade que resolverá isso.
Recentemente, meu link personalizado foi substituído pelos três links padrão. Na pré-visualização, funciona.
Este é um site hospedado. Acabou de me ocorrer que algo pode ter mudado no tema, de modo que ele não é reconhecido pelos links personalizados do cabeçalho. Vou verificar isso e retornar.
Quack! Eu visualizei o plugin em diferentes temas e todos funcionaram. Saí e funcionou. Mudei de navegador e funcionou. Há um forte cheiro de gato de Schrödinger aqui.
