Existe uma maneira de estilizar a página "Mais recentes" e a página "Mais populares" separadamente?

Suporte
1

Encontrei um problema ao tentar estilizar elementos nas páginas “Mais recentes” e “Principais”. Elas compartilham exatamente a mesma classe de corpo (class=“staff docked navigation-topics”), o que significa que não consigo estilizá-las individualmente. A página “Categorias” tem uma classe diferente (class=“staff docked navigation-categories categories-list”), então consigo estilizá-la sem problemas. Alguém tem uma solução?

2

Você pode adicionar uma classe personalizada ou fazer o que quiser com base na rota (discovery.top, discovery.latest). O bloco central seria algo como

@discourseComputed("router.currentRouteName")
  canDisplay(currentRouteName) {
    if (currentRouteName === `discovery.top`) {
       ...
    }

Mas adoraria saber se há uma solução que não envolva um script personalizado.

2 curtidas
3

Obrigado pela resposta. Continuei pesquisando e encontrei outra solução que funcionou para mim e pode potencialmente ajudar outra pessoa também:

// Javascript - Oculta o elemento de destino com base no texto dentro da URL. Neste caso, o texto dentro da URL era “top” e o ID que eu queria ocultar era “main-title”.


<script>
    window.onload = function() {
      if (window.location.href.indexOf('/top')) {
        document.querySelectorAll('#main-title')[0].style.display = 'none';
      }
    };
</script>

Edição: Isso não funciona como pretendido. O problema é que você precisa atualizar a página para acionar a função javascript.

1 curtida
4

Sim, a solução de @manuel é uma boa abordagem para conseguir as coisas de forma bastante simples. Usar window.location.href pode levar a problemas para obter a URL correta devido ao runloop do Ember de qualquer maneira.

Para ajustar o que você está fazendo para uma abordagem mais “Ember”, seria fazer algo como isto:

<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.querySelectorAll('#main-title')[0].style.display = 'none';
    }
  });
</script>

No entanto, provavelmente é melhor se você simplesmente adicionar uma classe ao corpo e estilizar essa classe, o que também permitirá que você faça alterações de estilo mais complexas.

<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.body.classList.add('route-discovery-top');
    } else {
      document.body.classList.remove('route-discovery-top');
    }
  });
</script>

.route-discovery-top #main-title {
    display: none;
}
3 curtidas