Como alguém novo no Discourse, estou tentando entender o que pode ser personalizado e como. Sei que existem diferentes temas e componentes de tema disponíveis, e também entendo que, em teoria, posso editar HTML, CSS e JavaScript se for em admin -> personalizar -> Temas -> [clique no tema selecionado] -> editar CSS/HTML.
Estou tentando entender como usar o painel que aparece ao tentar “editar CSS/HTML”. Ele mostra <head> Cabeçalho Após o Cabeçalho <body> Rodapé CSS Incorporado.
Existe algum guia com exemplos sobre como editar o HTML na prática? Entendo que no Meta há sugestões, mas, pelo que posso ver, elas estão espalhadas em vários tópicos ao longo do fórum.
Como exemplo de algo que me confunde: esta publicação pergunta se é possível reordenar as colunas da lista de tópicos na página inicial, o que seria uma mudança de HTML bastante básica. Mas a resposta é, basicamente, não, você não pode sem entrar em algumas substituições profundas.
Então, estou tentando descobrir o que posso fazer com essa opção “editar CSS/HTML” para personalizar meu fórum.
Obrigado. Eu já tinha visto isso, mas evitei porque parecia que o foco era criar um tema, e não apenas editar meu único fórum.
Vejo que há algumas orientações sobre como usar o painel “editar CSS/HTML”. Mas, para confirmar: posso alterar o HTML, CSS e JS sem precisar criar um novo tema, certo?
Também não está claro onde ou como posso mover componentes, e não apenas adicioná-los ou removê-los (por exemplo, mudar a ordem das colunas para que o grupo de usuários apareça como a primeira coluna à esquerda na página).
Definitivamente, recomendo que você também leia esse guia. Não deixe o aspecto de “Tema” te desencorajar, pois ele aborda vários aspectos de personalização que você achará úteis.
O link fornecido por Simon explica tudo, mas é bastante longo para ler.
Basicamente, se você quiser editar o HTML do Discourse, isso pode ser feito de várias maneiras:
Através de algumas abas HTML predefinidas no seu tema ou componente: Header, After Header, </body>, Footer.
Ao direcionar um espaço HTML “livre” (outlet) que você pode preencher com seu próprio HTML. Isso pode ser feito por meio de uma tag <script> que você pode adicionar na aba <head>.
Aqui está um exemplo dos outlets disponíveis em uma visualização de tópico:
Ao substituir um modelo HTML existente. Os modelos às vezes contêm muito código HTML, e você precisará copiar e colar tudo para fazer suas modificações. Isso também pode ser feito em uma tag <script> adicionada ao seu <head>.
Criar um tema, um componente de tema ou “apenas editar meu único fórum” é, na verdade, bastante semelhante aqui. Os três são feitos mais ou menos da mesma maneira.
Sim, depende exatamente do que você quer fazer, mas geralmente o caminho correto é criar um novo componente de tema e escrever o HTML/CSS nele.
Obrigado por essas boas informações. Consigo entender como adicionar HTML a um espaço aberto e também como ocultar HTML existente com CSS (ou seja, display: none na classe div relevante, que presumo ser encontrada usando o inspetor).
Mas como faria para substituir HTML, como mover um componente de lugar? Você teria um exemplo breve?
Estou citando parcialmente o link colado pelo simon:
Exemplo rápido de preencher um outlet com um quadrado vermelho grande; Aqui, o outlet está localizado acima da lista de posts em uma visualização de tópico:
Exemplo rápido de substituir o modelo da barra de navegação:
<script type="text/x-handlebars" data-template-name="components/navigation-bar">
{{#each navItems as |navItem|}}
{{navigation-item content=navItem filterMode=filterMode category=category}}
{{/each}}
<div style="background: red; padding: 10px; float: left;">Adicionei este bloco no modelo da barra de navegação</div>
{{custom-html name="extraNavItem" tagName="li"}}
{{!- isso é feito para evitar DIV dentro de UL, originalmente {{plugin-outlet name="extra-nav-item"}}
{{#each connectors as |c|}}
{{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
{{/each}}
</script>
Ok. Agora estou começando a entender. Isso é realmente útil.
1. De onde vem o: type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name? (Ou seja, como sei o que preencher ali?)
E com o exemplo de código que você deu para sobrescrever um template, começo a ver como é possível, pois posso pegar o código do template e movê-lo, excluí-lo, adicioná-lo, etc.
2. Então, obtenho o código do template no link do GitHub que você forneceu? Se for assim, faz sentido, mas parece difícil encontrar o código certo. Por exemplo, qual é o template da página inicial?
3. Em seguida, colar esse código relevante no painel de “editar CSS/HTML”. Mas onde, na primeira opção (</head>)? Acredito que sim, com base na sua resposta anterior, mas seria útil confirmar.
Espero que tudo isso também seja útil para outras pessoas.
Para encontrar o nome e a localização de um componente (outlet), acho que a melhor maneira é o plugin que linkei acima.
Para encontrar o template correspondente à parte da página que você deseja editar… Isso é um pouco mais complicado.
Não conheço uma maneira fácil. Um plugin semelhante seria ótimo.
Às vezes, eu examino o HTML da página para ver algum código (uma classe CSS, por exemplo) que acredito ser exclusivo e, em seguida, procuro em todos os arquivos de template. Clonei o repositório do Discourse no meu computador pessoal e procuro em todos esses arquivos usando o Sublime Text, mas tenho certeza de que existem outras maneiras melhores de fazer isso.
Às vezes, eu examino o código de componentes de tema existentes que modificam as localizações da página que também quero personalizar.
Sim, é difícil, mas não sou especialista e imagino que existam maneiras mais eficientes de fazer isso!
Sim.
Quando você vem do Wordpress ou phpBB e está acostumado a editar diretamente os arquivos de template naquele ou naquele diretório, o Discourse pode parecer criptico…
Obrigado. No entanto, ao comparar com o WordPress, pelo menos na minha opinião, uma grande vantagem é que o Discourse usa Ruby e JavaScript, em vez de PHP.
