Nome da categoria após a imagem da categoria

Suporte
1

Olá pessoal,

Antes de vir aqui pedir ajuda, já tentei de tudo, mas sem sucesso até agora :sweat_smile:

Estou tentando colocar o nome da categoria depois da imagem da categoria, igual ao FiveM Forum (https://forum.fivem.net).

shit
shit1202×423 48.5 KB

Já tentei:

  • Editar category-title-link.hbs através da imagem do Docker (docker -it imagename sh - \var\www\discourse\app\assets\javascripts\discourse\templates\components\category-title-link.hbs) :x:

  • Usar JQuery $( “category-text-title” ).insertBefore( “category-logo.aspect-image” ) no editor de temas, mas descobri que não funciona :x:

  • Alguns truques de CSS (flex, order, table) :x:

Vi no fórum do FiveM que eles mudaram a ordem das divs, mas não há nada no CSS ou, se houver, não sou bom o suficiente para encontrar onde.

Sou o cara do WordPress, espero que alguém mais experiente possa ajudar, agradeço desde já :heart:

2

De acordo com minha pesquisa primária, o nome do modelo parece ser categories-only.hbs. Tente alterar isso. Eu não testei, mas acho que deve ser o modelo que você pretende modificar.

Em segundo lugar, eu não recomendaria alterá-lo no Discourse. Uma maneira melhor é sobrescrever o modelo.

3

O category-title-link.hbs contém exatamente o que estou tentando alterar, mas ao editar, não há mudanças. Você sabe se é necessário reconstruir o aplicativo ou algo assim ao editar arquivos .hbs?

{{category-title-before category=category}}
<a class="category-title-link" href={{category.url}}>
  **<div class="category-text-title">**
    {{#if category.read_restricted}}
      {{d-icon 'lock'}}
    {{/if}}

    <span class="category-name">{{dir-span category.name}}</span>
  </div>
  {{#if category.uploaded_logo.url}}
    {{cdn-img
      src=category.uploaded_logo.url
      **class="category-logo"**
      width=category.uploaded_logo.width
      height=category.uploaded_logo.height}}
  {{/if}}
</a>
4

Se você editar o código do Ember, não precisa reiniciar o aplicativo inteiro, mas certifique-se de recarregar a janela do navegador para garantir que você não esteja vendo algo que foi armazenado em cache pelo navegador.

5

Depois das mudanças, reiniciei o container do Docker e reiniciei o servidor web haha :sweat_smile:

Recarreguei a página milhares de vezes e tentei também pelo modo anônimo

Nenhuma mudança :rofl:

6

Por favor, confirme para mim: estou editando no diretório correto?

\var\www\discourse\app\assets\javascripts\discourse\templates\components

A pasta “templates” parece ser apenas para modelos e não o que está em produção, mas eu não entendo esse tipo de programação, então estou apenas chutando.

7

Tente excluir a pasta tmp no diretório raio do Discourse e, em seguida, reinicie o servidor.

8

Anota%C3%A7%C3%A3o%202019-07-28%20071003
Anota%C3%A7%C3%A3o%202019-07-28%20071003906×289 22 KB

̶I̶s̶s̶o̶ ̶é̶ ̶o̶ ̶q̶u̶e̶ ̶e̶u̶ ̶e̶s̶t̶o̶u̶ ̶f̶a̶z̶e̶n̶d̶o̶

9

Por que você faria isso? Isso é uma alteração de CSS, feita pelo admin, através do personalizar.

11

Você pode me ajudar com isso? Como eu disse, tentei de tudo :rofl:

Alguns truques de CSS (flex, order, table) :x

12

Veja Developing Discourse Themes & Theme Components.

13

Obrigado, Jay, mas não sou desenvolvedor. Sei algumas coisas, mas, como podemos ver, não o suficiente para resolver isso. Eu realmente tentei de tudo, inclusive pesquisar tópicos semelhantes aqui, sem sucesso :sleepy:

14

Ei Jay, muito obrigado, fiz isso :heart_eyes:

Se alguém estiver procurando por essa solução, basta fazer o seguinte:

Vá para Configurações > Admin > Personalizar > Selecionar tema ativo > Editar CSS/HTML

No campo </body>, insira este código:

<script type="text/x-handlebars" data-template-name="components/category-title-link">
{{category-title-before category=category}}
<a class="category-title-link" href={{category.url}}>
    {{#if category.uploaded_logo.url}}
    {{cdn-img
      src=category.uploaded_logo.url
      class="category-logo"
      width=category.uploaded_logo.width
      height=category.uploaded_logo.height}}
  {{/if}}
  <div class="category-text-title">
    {{#if category.read_restricted}}
      {{d-icon 'lock'}}
    {{/if}}

    <span class="category-name">{{dir-span category.name}}</span>
  </div>
</a>
</script>

E pronto, está feito :partying_face::tada::tada:

15

Então você era um desenvolvedor afinal!