 |
Resumo | Custom Header Links (Links de Cabeçalho Personalizados) permite que você adicione facilmente links de texto personalizados ao cabeçalho. |
 |
Prévia | Prévia no Discourse Theme Creator |
 |
Link do Repositório | GitHub - discourse/discourse-custom-header-links · GitHub |
 |
Novo em Temas do Discourse? | Guia para iniciantes sobre como usar Temas do Discourse |
Instalar este componente de tema
Recursos
Desktop
Celular
(devido ao espaço muito limitado, adicionar mais de um link no celular não é recomendado)
Configurações
| Configuração | Descrição |
|---|---|
custom_header_links |
A lista estruturada de links para exibir no cabeçalho. Cada link é configurado através de um formulário com campos individuais (veja abaixo). |
links_position |
Controla se os links aparecem no lado direito (padrão) ou esquerdo do cabeçalho, perto do logotipo. Quando definido como left, todos os links são automaticamente ocultados nas páginas de tópico para abrir espaço para o título do tópico — independentemente das configurações individuais de hide_on_scroll do link. |
Adicionando Links
Os links são configurados através de um formulário estruturado nas configurações do componente de tema. Clique em Adicionar para adicionar um novo link. Cada link possui os seguintes campos:
| Campo | Obrigatório | Descrição |
|---|---|---|
| Text |  Sim |
O rótulo visível para o link. Máx. 100 caracteres. Também determina a classe CSS aplicada ao link (veja CSS Customisation abaixo). |
| Title |  Não |
O texto da dica de ferramenta exibido ao passar o mouse sobre o link. Máx. 1000 caracteres. |
| URL | Sim |
A URL para a qual o link aponta. Pode ser um caminho relativo (ex: /faq) ou uma URL completa. Máx. 2048 caracteres. |
| View | Não |
Controla em qual dispositivo o link aparece. Se deixado sem configuração, o link é exibido em todos os dispositivos (o mesmo que vdm). Veja os valores abaixo. |
| Target | Não |
Controla como o link abre. Se deixado sem configuração, o padrão é abrir em uma nova aba (o mesmo que blank). Veja os valores abaixo. |
| Hide on scroll | Não |
Controla se o link se oculta quando o título do tópico se torna visível no cabeçalho em páginas de tópico. O padrão é keep. Aplica-se apenas quando links_position está definido como right — veja a nota abaixo. Veja os valores abaixo. |
| Locale | Não |
Se definido, o link é mostrado apenas quando o idioma da página do site corresponde a este valor. Deixe em branco para mostrar o link em todos os locais. Veja detalhes abaixo. |
\u003cbr\u003e
Valores de View:
| Valor | Comportamento |
|---|---|
vdm |
Visível em desktop e celular |
vdo |
Visível apenas no desktop |
vmo |
Visível apenas no celular |
| (sem configuração) | O mesmo que vdm — visível em todos os dispositivos |
Valores de Target:
| Valor | Comportamento |
|---|---|
blank |
Abre em uma nova aba |
self |
Abre na mesma aba |
| (sem configuração) | Padrão para abrir em nova aba (o mesmo que blank) |
Valores de Hide on scroll:
| Valor | Comportamento |
|---|---|
keep |
O link permanece visível mesmo quando o título do tópico é exibido no cabeçalho (padrão) |
remove |
O link some quando o título do tópico se torna visível em páginas de tópico |
\u003e 
hide_on_scroll só se aplica quando links_position é right. Quando links_position é left, todos os links são ocultados juntos em páginas de tópico, independentemente de sua configuração individual de hide_on_scroll.
Aqui está um exemplo de hide_on_scroll em ação (com links_position definido como right):
Most Liked e Privacy estão definidos como keep, então permanecem visíveis quando o título se expande. Os outros links estão definidos como remove, então somem quando o título se torna visível. Este comportamento afeta apenas as páginas de tópico.
Filtragem por Localidade
O campo Locale permite que você mostre um link apenas quando o site estiver configurado para um idioma específico. Isso é útil para comunidades multilíngues que desejam links de cabeçalho diferentes por idioma.
- Defina o campo para um código de localidade como
en,de,fr,zh_CN, etc. - A correspondência é insensível a maiúsculas e minúsculas, e ambos os separadores
-e_são tratados de forma idêntica — entãoen-US,en_USeen_uscorrespondem igualmente. - Se o campo de localidade for deixado em branco, o link será exibido em todas as localidades. Esta é a configuração recomendada para a maioria dos sites de idioma único.
- Uma classe CSS
headerLink--{locale}também é adicionada ao elemento do link, que pode ser usada para direcionamento CSS adicional.
\u003e 
Problema comum: Se seus links não estiverem aparecendo, verifique se você acidentalmente definiu um valor de locale que não corresponde ao idioma configurado do seu site. Deixar o campo de localidade em branco é seguro e sempre mostrará o link.
Customização CSS
Cada link recebe automaticamente uma classe CSS derivada do seu valor Text: espaços são substituídos por hífens, o texto é convertido para minúsculas e -custom-header-links é anexado.
Por exemplo:
- Um link com o texto
Privacyrecebe a classeprivacy-custom-header-links - Um link com o texto
Visit Shoprecebe a classevisit-shop-custom-header-links
Estilizar todos os links do cabeçalho:
.custom-header-links .headerLink a {
font-size: var(--font-up-1);
color: var(--header_primary);
}
Estilizar um link específico (por exemplo, um link com o texto “Privacy”):
.custom-header-links .headerLink.privacy-custom-header-links a {
color: var(--tertiary);
}
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: var(--tertiary-high);
}
Mostrar ou ocultar um link com base no estado de login:
O Discourse adiciona uma classe anon à tag \u003chtml\u003e para usuários deslogados. Você pode usar isso para mostrar ou ocultar links condicionalmente:
/* Ocultar "Dashboard" de usuários deslogados */
html.anon .dashboard-custom-header-links {
display: none;
}
/* Ocultar "Sign Up" de usuários logados */
html:not(.anon) .sign-up-custom-header-links {
display: none;
}
\u003e O display: none do CSS é um mecanismo de ocultação apenas visual. O HTML do link ainda está presente na origem da página. Não use isso para proteger URLs sensíveis ou com acesso controlado.
Reordenar links com CSS (usando a ordem order do flexbox):
.custom-header-links li {
\u0026:nth-child(1) { order: 3; }
\u0026:nth-child(2) { order: 1; }
\u0026:nth-child(3) { order: 2; }
}
Use o caminho /my para links específicos do usuário, para evitar codificar um nome de usuário:
/my/messages → a caixa de entrada do usuário atual
/my/activity → a atividade do usuário atual
\u003e Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Pro, Business e Enterprise.
\u003e Destaques do Changelog:
\u003e
\u003e * A configuração custom_header_links foi migrada de um formato de lista delimitada por vírgulas para uma interface de formulário estruturada type: objects. Se você configurou links anteriormente usando a entrada de texto antiga separada por vírgulas, a migração deve ter preservado seus dados automaticamente