Existe um "mapa" de temas? (Uma maneira fácil de encontrar plugin-outlets etc)

[AstonJ]

Já li os excelentes guias de componentes de plugins e temas, mas ainda estou um pouco perdido sobre onde encontrar rapidamente os templates, componentes, widgets ou plugin-outlets de que preciso.

Pensei em começar com 3 edições simples — se alguém puder me dar uma direção, seria de grande ajuda

Qual template, componente ou plugin-outlet preciso modificar para alterar o seguinte?

1. As tags no do HTML da página de visualização de um Tópico (ou seja, ao visualizar um Tópico). A alteração precisa ser visível tanto para bots quanto para humanos.
2. O markup das caixas de categoria sempre que forem exibidas. (Estas: AdminCP > configurações > estilo de categoria.)
3. Página Sobre (onde alterar o conteúdo nos blocos de Administrador e Moderador)

---

Ao criar temas em outros softwares de fórum, geralmente existe um template “pai” que contém referências a tudo que compõe aquela página, facilitando a localização rápida dos templates necessários para edição. Por exemplo, haveria um arquivo/template chamado forumdisplay (visualizar Categoria no Discourse) que conteria o HTML principal e referenciaria todos os outros templates. Outro para a página showthread (ou seja, a página de visualização de Tópico no Discourse), outro para a página de perfil do membro, etc. Eles funcionariam como uma lista ou mapa de onde encontrar o que você precisa. Assim, se você quisesse editar, digamos, o markup subjacente das postagens, iria ao arquivo ou template showthread (ou seja, visualização de Tópico), examinaria e perceberia que precisa editar ou procurar no template postbit.

Temos algo semelhante? Se não, a equipe poderia considerar adicionar algo parecido? Seria de grande ajuda

[merefield (Robert)]

(deprecated) Plugin outlet locations theme component

the ability to debug plugin outlets is now included in core. Check out this topic for more details Original theme component info

[AstonJ]

Já vi isso (desculpe, deveria ter mencionado!) e é muito útil para identificar plugins visíveis, mas e quanto a templates, componentes, widgets, etc.? Como você os encontra de forma rápida e fácil, Robert? Tem alguma ideia de onde estão os mencionados na primeira mensagem?

[merefield (Robert)]

Meu conselho é sempre começar de forma simples. Trabalhe primeiro em um requisito básico e descubra como realizá-lo. Em seguida, avance para o próximo.

No que diz respeito à personalização de temas, diria que a maior parte disso envolve modificações no CSS. Utilize os recursos habituais. Quando isso não for suficiente, você precisará considerar a modificação de templates com jQuery ou, em último caso, sobrescrever os templates. Crie seus próprios componentes ou widgets para casos de uso inovadores e integre-os.

O código-fonte é sempre seu aliado: explore a estrutura de diretórios no GitHub do repositório discourse/discourse e você encontrará os diferentes componentes do aplicativo organizados. Acredito que os templates sejam a parte mais fácil de compreender. Se você ainda não está familiarizado com a estrutura de diretórios do Ember, agora é o momento de se familiarizar.

[awesomerobot (Kris)]

@merefield

O código-fonte é sempre seu aliado. Navegue pela estrutura de diretórios do GitHub em discourse/discourse e você encontrará as diferentes partes do aplicativo organizadas.

Sim, com certeza. Tenho criado temas quase desde que o Discourse existe e estou constantemente consultando o código-fonte em uma janela separada.

Geralmente, para templates, você deve procurar aqui: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates

E para widgets, aqui: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets.

Às vezes, não fica imediatamente claro onde está um template, talvez porque seja um componente aninhado dentro de outro template… Se eu não me lembrar, o que costumo fazer é pesquisar no código-fonte por um trecho específico de marcação…

Por exemplo, se eu quiser adicionar algo à página “Sobre”, posso ver que o corpo da página “Sobre” possui uma classe exclusiva about-page, então começarei a pesquisar por about e body-page (que é outra classe na página).

Para responder a algumas das suas perguntas:

@AstonJ

As tags no do HTML da página de visualização de Tópico (ou seja, ao visualizar um Tópico). Preciso que a alteração seja visível tanto para bots quanto para humanos.

Eu acho que isso requer um plugin, o que está fora da minha especialidade… talvez alguém mais possa ajudar melhor.

@AstonJ

A marcação das caixas de categoria sempre que forem exibidas.

Existem templates diferentes para os diferentes layouts de página, mas assumindo que você está falando de um dos layouts “Caixas com…”:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

@AstonJ

Página “Sobre” (onde alterar o conteúdo nos blocos de Administrador e Moderador).

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/about.hbs

[AstonJ]

Obrigado pelas respostas, ambos

@merefield

Meu conselho é sempre começar de forma simples. Trabalhe primeiro em um requisito básico e descubra como fazê-lo. Depois, avance para o próximo.

Foi exatamente isso que pensei que estava fazendo (acho difícil encontrar algo mais simples do que editar as tags de título). Em outros softwares de fórum, eu apenas abriria o arquivo/template da página ‘showthread’ e o editaria; levaria literalmente menos de um minuto. Eu adoraria que o tema do Discourse fosse tão fácil (embora seja possível que minha falta de familiaridade com a criação de temas no Discourse agora seja o motivo de me sentir perdido).

@merefield

No que diz respeito à criação de temas, diria que a maioria das modificações será em CSS. Use os recursos habituais. Onde não for possível, você precisará considerar modificar os templates com jQuery ou, se necessário, substituir os templates. Crie seus próprios componentes ou widgets para casos de uso inovadores e anexe-os.

É exatamente isso que acho que preciso para todos os itens no primeiro post, pois eles precisam modificar conteúdo existente (em vez de apenas adicionar ou preender em um local específico, para o qual as plugin-outlets parecem ser direcionadas).

@merefield

O código-fonte é sempre seu amigo; explore a estrutura de diretórios do GitHub em discourse/discourse e você encontrará as diferentes partes do aplicativo organizadas. Os templates são, na minha opinião, a parte mais fácil de entender. Se você não está familiarizado com a estrutura de diretórios do Ember, agora é a hora de se familiarizar.

Acho que esse é provavelmente o problema aqui. Não conheço o Ember e talvez seja isso que esteja fazendo tudo parecer um pouco estranho. Eu adoraria ter algo como (deprecated) Plugin outlet locations theme component, mas para templates e tudo o mais que pode ser personalizado — isso seria uma grande ajuda.

@awesomerobot

Sim, definitivamente. Tenho criado temas quase desde o surgimento do Discourse e estou constantemente consultando o código-fonte em uma janela separada.

Mas como você encontra o que precisa, Kris?

@awesomerobot

Às vezes não fica imediatamente claro onde está um template, porque talvez ele seja um componente aninhado dentro de outro template… Se não me lembrar, o que costumo fazer é buscar no código-fonte uma parte específica do markup…

Por exemplo, se estou procurando adicionar algo à página ‘about’… vejo que o corpo da página ‘about’ tem uma classe única about-page, então começo a buscar por about e body-page (que é outra classe na página).

Ah, obrigado, esse é realmente um ótimo conselho!

@awesomerobot

Creio que isso exija um plugin, o que está fora da minha especialidade… talvez alguém mais possa ajudar melhor.

Tem certeza, Kris? Eu achava que plugins (ou plugin-outlets) permitiam apenas adicionar algo no lugar daquela saída específica. Já para alterar o formato da tag de título, provavelmente eu precisaria abrir o template existente (ou componente ou widget) e copiá-lo/editá-lo. Pelo menos é essa a minha compreensão depois de ler os dois guias sobre plugins e temas.

@awesomerobot

Existem templates diferentes para diferentes layouts de página, mas assumindo que você está falando de um dos layouts “Caixas com…”

discourse/categories-boxes.hbs no master · discourse/discourse · GitHub

Obrigado! Parece ser exatamente o que eu preciso

@awesomerobot

discourse/about.hbs no master · discourse/discourse · GitHub

Obrigado novamente, haha! Ambos parecem relativamente fáceis de encontrar agora, dado o nome e o fato de você tê-los apontado. Acho que ter ficado travado na alteração das tags de título pode ter sido um fator

No momento, sinto que estou perdendo algo e, como @merefield apontou, pode ser minha falta de familiaridade com o Ember. Alguém conhece vídeos no YouTube que expliquem isso rapidamente? Talvez você ou @merefield pudessem fazer um?

[merefield (Robert)]

Ember realmente vale a pena aprender. É muito poderoso, extensível e rápido.

Ler isso ajudará a entender melhor o código-fonte:

Ember.js Guides - Guides and Tutorials - Ember Guides

Estude sobre Templates, Propriedades Computadas, Router e Components.

O Discourse não é exatamente como um aplicativo Ember puro, mas os guias ajudam muito de qualquer forma.

Mais uma grande dica: identifique um plugin existente (bom) que realize algo semelhante ao que você deseja. Analise o código e copie a abordagem.

[AstonJ]

Obrigado, Robert! Está dizendo que essa versão dos guias é antiga — o Discourse está usando essa versão ou devo ler os guias mais recentes, da 3.15?

[merefield (Robert)]

Leia a versão 3.10 por enquanto. É a que o Discourse usa atualmente. Se você abrir o console de JavaScript, verá a versão do Ember e do jQuery que a instância está executando.

Além disso, esteja ciente de que existem vários ‘estilos’ de decoração de código. Portanto, as coisas no código-fonte podem variar ligeiramente às vezes.

[AstonJ]

@awesomerobot

Existem diferentes modelos para os diferentes layouts de página, mas, assumindo que você esteja falando de um dos layouts “Caixas com…”

discourse/categories-boxes.hbs na master · discourse/discourse · GitHub

Infelizmente, não é isso :–(

Também tentei estes:

• categories-boxes-topic.hbs
• categories-boxes-with-topics.hbs
• categories-boxes.hbs

Criei um componente de tema e adicionei o seguinte a ele:

<script type="text/x-handlebars" data-template-name="components/categories-boxes">
 test
</script>

Mas alterar o data-template-name com todos esses nomes não teve efeito. (Quando eu altero para components/topic-list, funciona.)

Alguma ideia de onde está esse modelo?

É isso que eu quero editar (mas quando o formato box é exibido, em: AdminCP > configurações > estilo de categoria):

Qualquer ajuda será muito apreciada.

[AstonJ]

Então, parece que isso não é possível com componentes de tema, já que não há nenhum modelo/componente para isso

Parece que este módulo Ruby está injetando estilos inline: discourse/lib/category_badge.rb at 888e68a1637ca784a7bf51a6bbb524dcf7413b13 · discourse/discourse · GitHub

Isso foi pensado como uma medida temporária? Se não, você acha que seria possível permitir que especificássemos estilos personalizados, por favor, @sam?

Isso poderia ser vinculado à opção none existente, onde teríamos dois campos no painel de configurações de administração onde poderíamos colar nossos estilos para cada um (se nenhum estilo for colado, age como a opção none age atualmente):

<span class="badge-category-bg" style="background-color: #25AAE2;"></span>

e

<span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge restricted" title="Uma categoria exclusiva para membros com nível de confiança 3 ou superior."><svg class="fa d-icon d-icon-lock svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#lock"></use></svg><span class="category-name">Lounge</span></span>

A partir deste trecho:

Precisaríamos apenas de acesso às variáveis de cor de fundo e cor de texto da página usual de edição de categoria.

Ou existe alguma outra maneira de editarmos isso, Sam? Eu só quero remover a cor de fundo e dar uma borda que seja da mesma cor que o texto (como especificado na página usual de edição de categoria).

Qualquer ajuda seria muito apreciada.

Edição: parece que não é aquele arquivo Ruby afinal (eu editei na minha instalação de desenvolvimento, mas nada mudou)… investigando mais, parece que é este: discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub Existe alguma maneira de criar um plugin para modificá-lo?

[merefield (Robert)]

Provavelmente existem várias maneiras de fazer isso.

Tente o seguinte:

• sobrescreva o modelo que invoca esse helper
• substitua-o por um helper próprio

Modelo em questão: discourse/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs at c6e255f4e00400b8a6f82a799b7fa082b17adb1c · discourse/discourse · GitHub

Sobrescrever um modelo tão baixo na hierarquia é relativamente de baixo risco.

Outra maneira pode ser usar jQuery dentro de uma sobrescrita do componente topic-list-item para realizar as modificações que você precisa.