Olá a todos,
Estou projetando uma comunidade onde cada usuário precisa pedir permissão para entrar em um grupo e cada grupo controla o acesso a uma categoria.
Gostaria de adicionar um HTML de boas-vindas/explicação na página dos grupos ( https://community.horbitercafe.com/g ).
Qual é a maneira mais fácil de fazer isso?
Obrigado,
F.
Não tenho certeza se este é o local correto para plugins, mas você pode tentar isso:
Em Personalizar > <head>
Adicione o seguinte:
<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">
seu HTML aqui
</script>
Como posso limitar isso apenas à página /g?
Sim, isso realmente permite que o HTML seja “injetado” acima do Nome do Grupo e outras informações em páginas como, por exemplo, https://discourse.example.org/g/foo. Obrigado por compartilhar.
@Fausto_Dassenno, você está procurando algo para a página principal de listagem de grupos, mas não para a página de detalhes do grupo individual?
Correto, eu quero adicionar HTML apenas na página de listagem do grupo principal.
Adicione uma classe ao seu código HTML, como gr-horbiter
<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">
<div class="gr-horbiter">
seu código HTML
</div>
</script>
E adicione este CSS no common
.gr-horbiter {
display: none;
}
body.groups-page .gr-horbiter {
display: block;
}
Não testei o código, mas deve funcionar
Obrigado, @Steven. A parte do script vai na seção HTML de um componente? Ou preciso editar o HTML diretamente?
Desculpe, não tenho certeza se entendi a pergunta. O inglês não é meu primeiro idioma, então posso ter interpretado mal algumas coisas.
Você copia o script e o HTML na seção <head> e adiciona sua mensagem de boas-vindas, com algum div ou span se quiser personalizá-la, e tudo deve funcionar corretamente.
Obrigado, @Steven, consegui fazer funcionar.
O único problema é que preciso que isso seja adicionado na página de índice do grupo e não na página de detalhes do grupo.
Pelo menos agora entendi a lógica por trás disso. Vou pesquisar mais.
Não consigo encontrar nenhum conector na página de índice do grupo.
Eu deveria ter testado, agora vejo qual é o problema 
O plugin outlet não funciona para a página principal do grupo
Ainda tenho uma maneira de adicionar um banner, mas provavelmente não é a maneira mais limpa possível. A equipe do Discourse pode ter uma forma melhor de fazer isso.
Este código CSS permitirá que você adicione algum texto e estilização, mas você só terá essa classe e não acho que haja uma maneira de adicionar um link no banner de texto
body.groups-page .groups-header::before {
content: "Seu texto";
width: 100%;
margin: 0 0 15px 0;
}
Você pode adicionar fundo, borda, etc. para personalizar o banner nesta classe e criar o banner
Obrigado,
Não consigo atingir meu objetivo com isso. O que eu estava tentando fazer era criar uma página de destino para grupos, para que novos usuários pudessem solicitar acesso aos grupos que desejavam. Para isso, eu queria incluir algumas explicações usando HTML.
Quão difícil é solicitar um novo nome de local na página de índice dos grupos?
Se tudo o que você quer é algo assim, é fácil
.welcome-message {
display:none;
}
.groups-page .welcome-message {
display:block;
margin: 20px;
}
Em seguida, adicione isso à seção Após o Cabeçalho
<div class="welcome-message">Coloque aqui suas informações e instruções de boas-vindas</div>
É, essa é sem dúvida a melhor solução
Às vezes eu complico as coisas
Ótimo, isso funciona!
E se eu quiser fazer o mesmo, mas mostrar apenas na página inicial? O que devo substituir em vez de .groups-page?
Observe a classe usada no body na sua página inicial em HTML.
Por exemplo, aqui no meta.discourse.org:
<body class="navigation-topics" data-gr-c-s-loaded="true" style="" cz-shortcut-listen="true">
A classe utilizada é navigation-topics.
Ou, se quiser algo mais sofisticado, tente
Interessante, na minha página inicial eu tenho isso
Qual página é a sua página inicial?
É isso que você está perguntando?
Vejo qual é o problema com sua classe de corpo vazia.
Em vez de examinar o código-fonte da página, pressione F12 para abrir as ferramentas de desenvolvimento do Chrome/Firefox/Edge e vá para a aba “Elementos”.
Examine o código HTML a partir daqui e sua tag <body> mostrará as classes corretas.