Barra de ferramentas sob o cabeçalho do site por categoria

[Heliosurge (Dan DeMontmorency)]

https://meta.discourse.org/t/welcome-link-banner/218743/28

Olá, será que você já viu meu pedido de funcionalidade?

https://meta.discourse.org/t/welcome-link-banner/218743/73?u=heliosurge

Ou, alternativamente, um componente de tema que permitiria “ancorar” uma barra de ferramentas sob a barra principal do site ao visualizar uma categoria específica? Pois é isso que estou procurando mais especificamente. Isso poderia ser algo como os links de cabeçalho personalizados do Joe, por exemplo.

Qualquer orientação, mesmo que seja ajustar o comportamento de um componente de tema existente para conseguir isso, seria incrível.

Peço desculpas, pois ainda sou um novato aprendendo conforme avanço.

[Canapin (Coin-coin le Canapin)]

@Heliosurge

Ou, alternativamente, um componente de tema que permitiria “ancorar” uma barra de ferramentas sob a barra principal do site ao visualizar uma categoria específica? É isso que estou procurando mais especificamente. Isso poderia ser algo como os links de cabeçalho personalizados do Joe, por exemplo.

Olá!

Você poderia ser um pouco mais específico sobre suas necessidades? O que exatamente você quer colocar abaixo do cabeçalho do Discourse?

A maneira padrão de colocar “qualquer coisa” abaixo do cabeçalho é dentro da aba After Header ao editar um tema ou um componente:

Mas parece que você está pensando em algo mais dinâmico e/ou mais complexo.

Quanto mais informações você fornecer, mais úteis serão as respostas

[Heliosurge (Dan DeMontmorency)]

Obrigado pela rápida resposta.

Para ser muito claro e específico, algo como os Links de Cabeçalho Personalizados de Johani (Ícone) seria quase perfeito.

Dito isso, o objetivo é ter, idealmente, uma barra de ferramentas com um logotipo clicável e, em seguida, alguns menus suspensos.

Por exemplo, o fórum tem um patrocinador que possui a Categoria A com 2 subcategorias. Quando os usuários estão visualizando a Categoria A ou suas subcategorias, uma barra de ferramentas é ancorada sob o cabeçalho do site. Com links para essa empresa.

ou seja, link da loja, suporte, links da comunidade.

[Canapin (Coin-coin le Canapin)]

Os links de cabeçalho personalizados são um componente de tema bem simples e acho que seria um bom começo usar a mesma base de código, mas colocar a lista de links em outro lugar.
Dito isso, ele não suporta submenus, o que seria mais complicado de adicionar.

Outra abordagem seria fazer um componente sem nenhuma configuração, apenas usando HTML, CSS (e talvez um pouco de JS). Assim, seria uma personalização bem “estática” e se você precisar fazer alguma alteração, terá que editar o código HTML e CSS apropriado.

Aqui está um exemplo que fiz para o meu próprio fórum:

E como fica nas personalizações do site:

Tal maneira seria suficiente para suas necessidades, ou você prefere algo mais fácil de editar do lado do administrador, como o componente links de cabeçalho personalizados com várias entradas, como esta?

[Heliosurge (Dan DeMontmorency)]

Algo como os links de cabeçalho personalizados pode ser mais fácil até que eu tenha mais experiência. Ou talvez orientação para criar um componente separado que, por exemplo, tenha como alvo e substitua algo como o componente de links de cabeçalho personalizados de Johani para alterar o comportamento para baixo do cabeçalho (pode já haver uma opção para isso) com substituições para usar a categoria pai atual.

No entanto, se eu tiver 2 patrocinadores, precisarei saber se posso instalar o componente duas vezes, renomeando o componente e direcionando o componente por nome.

ou seja

1. (A) Links de cabeçalho personalizados
2. (B) Links de cabeçalho personalizados

Se não me engano, existe um componente de tema que adiciona uma barra lateral com base na categoria? Mas uma barra lateral não funcionaria, pois é apenas para desktop. Então, preciso de uma barra superior.

[Heliosurge (Dan DeMontmorency)]

Eu sei que posso exportar e depois importar de um zip para modificar o código. Mas precisaria de orientação sobre o que mudar se seguir por esse caminho. Estou disposto a tentar.

[Heliosurge (Dan DeMontmorency)]

Agora pode ser mais fácil, pois estou a trabalhar num componente de tema personalizado
conforme mencionou, para simplificar isto com alguns elementos simples após o código do cabeçalho que direciona a categoria com a exibição de links simples usando uma imagem aqui e ali para links principais com um link da comunidade que leva a uma publicação ou página publicada?

Agradeço novamente o seu tempo e partilha de conhecimento.

[Canapin (Coin-coin le Canapin)]

Aqui está um exemplo prático que criei para você:

Aqui está o HTML que coloquei na aba After Header

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Aqui está algum conteúdo exibido apenas na categoria <strong>Geral</strong></h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Aqui está algum conteúdo exibido apenas na categoria <strong>Feedback do Site</strong></h2>
</div>

Aqui está o SCSS que coloquei na aba CSS (Discourse usa SCSS, que estende os recursos do CSS):

$category_classes: "general", "site-feedback";

.below-header-banner {
    display: none;
}

@each $cat in $category_classes {
    body.category-#{$cat} {
        #category-#{$cat}-banner.below-header-banner {
            display: block;
        }
    }
}

Aqui está o resultado. Cada banner aparece apenas em sua respectiva categoria.

Espero que isso ajude ainda mais!

[Heliosurge (Dan DeMontmorency)]

Isso é absolutamente perfeito! Muito obrigado!

Com este código base, ele ainda será exibido se estiver em uma subcategoria do pai? Ou preciso adicionar as subcategorias à condição?

Eu realmente deveria copiar e colar e voltar para você. Como você tem sido muito gentil com todo o tempo que compartilhou me ajudando.

[Canapin (Coin-coin le Canapin)]

@Heliosurge

Com este código base, ele ainda será exibido se estiver em uma subcategoria do pai? ou preciso adicionar as Subcategorias à condição?

As subcategorias têm sua própria classe na tag body.

Por exemplo, em WordPress - Discourse Meta, Support > WordPress é uma subcategoria de Support.

A classe de categoria em <body> é: category-support-wordpress.

Se você quiser que o banner seja exibido nas subcategorias, bem como em seus pais, o código SCSS deve ser diferente. Posso dar uma olhada amanhã.

[Heliosurge (Dan DeMontmorency)]

Incrível! Obrigado novamente por compartilhar a riqueza do seu conhecimento e por me dar um ótimo começo.

Você é definitivamente um trunfo para sua equipe!

[Heliosurge (Dan DeMontmorency)]

Minhas desculpas pela minha inexperiência. Mas posso contar com você mais uma vez?

<div id="pimax-navbar">
 <span id="pimax-top-links">
 <ul class="pimax-nav-link-container">
   <li><b><a href="//pimax.com/pages/pitool/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=pitool_button" class="pimax-link">Pitool</a></b></li>
   <li><b><a href="//www.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=brandsite_button" class="pimax-link">Store</a></b></li>
   <li><b><a href="//support.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=support_button" class="pimax-link">Support</a></b></li>
</ul>
</span>
</div>

Como combino isso com seu exemplo? E também consigo os links para se estenderem da esquerda para a direita? Em vez de empilhados um em cima do outro?

[Canapin (Coin-coin le Canapin)]

Basicamente, você pegaria este código e o colocaria no meu código como substituto para a tag <h2> e seu conteúdo. Mas eu sugiro que você refine e adapte este código às suas necessidades, não apenas copie e cole.

Quanto a ter a lista de elementos em linha em vez de um em cima do outro, existem muitas maneiras de fazer isso com CSS… Muitas delas são bem diretas, mas aí saímos um pouco do escopo da ajuda que fornecemos aqui. Veja esta explicação:

About the Dev category

The category for all things Discourse Development. Building a customization for yourself or the community? Then this is the category for you! Questions and discussions about creating themes, theme components, plugins, help with submitting pull requests, configuring development environments, coding conventions, and so on and so forth are all welcome here. However, basic HTML and CSS questions are not in scope for support.

Neste tipo de caso sobre HTML e CSS em geral, não diretamente relacionado ao Discourse, você pode encontrar informações aqui: Making custom CSS changes on your site
E praticamente em qualquer lugar na internet. Por exemplo:

Google Search

Dito isso, quais são suas habilidades atuais com HTML e CSS?
Saber um pouco mais sobre isso ajudaria a escrever respostas mais personalizadas.

[Heliosurge (Dan DeMontmorency)]

@Canapin

Dito isso, quais são suas habilidades atuais com HTML e CSS?
Saber um pouco mais sobre isso ajudaria a escrever respostas mais personalizadas.

Se eu for honesto comigo mesmo e com as pessoas ao meu redor. Sou um entusiasta novato. Tive alguma programação no ensino médio envolvendo gwbasic e turbo pascal. Tomei a iniciativa de usar um aplicativo para ajudar a aprender html e CSS e tive alguns sucessos. No entanto, nada em um alto nível.

Por exemplo, alguém compartilhou um exemplo de código para ocultar uma categoria do menu hambúrguer. Funcionou bem, mas foi muito código para ocultar todas as que eu queria. Isso foi antes do componente de tema “Category Hider”, embora eu tenha contribuído com uma ideia para ter uma opção para ocultar todas as subcategorias para a qual um membro da comunidade compartilhou um código de 1 ou 2 linhas que ocultou todas as subcategorias. lol

Isso foi muito mais eficiente do que eu visando cada um para ocultar individualmente.

No entanto, agora tive sucesso moderado modificando o banner Welcome Link comparando o settings.yml com Modern Category boxes, se bem me lembro, settings.yml trocando a primeira configuração com uma que visa listar categorias em vez de descoberta. No entanto, parece que ainda preciso comparar alguns arquivos para ver onde a configuração tem efeito. Como posso adicionar categorias à primeira configuração, mas ainda não parece estar funcionando.

Sei que preciso ler mais e usar um IDE melhor do que meu celular para realmente evoluir meu entendimento e consciência. Chegarei lá, só preciso ter a humildade e o foco para fazer isso.

Para isso, sou verdadeiramente grato por termos esta comunidade grande e compreensiva, que muitas vezes, quando perguntada, me deu a orientação que preciso com um alto nível de paciência que muitos não dariam.

Sei que estudando código e dedicando tempo, chegarei lá. Sou teimoso demais para não chegar.

Eu uso Linux e agora configurei meu desktop para facilitar as coisas. Além disso, preciso ver como o lado do desktop do design e o lado do celular criam um design bem equilibrado. Estou aprendendo coisas novas o tempo todo. Estou baseando o núcleo no Air Theme, pois é um ótimo ponto de partida.