Y a-t-il un moyen de styliser séparément la page "Dernières" et la page "Top" ?

Soutien
1

J’ai rencontré un problème en essayant de styliser des éléments sur la page « Latest » et la page « Top ». Elles partagent exactement la même classe de corps (class=“staff docked navigation-topics”), ce qui signifie que je ne peux pas les styliser individuellement. La page « Categories » a une classe différente (class=“staff docked navigation-categories categories-list”), je peux donc la styliser sans problème. Quelqu’un a-t-il une solution ?

2

Vous pouvez ajouter une classe personnalisée ou faire ce que vous voulez en fonction de la route (discovery.top, discovery.latest). Le bloc central serait quelque chose comme

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

Mais j’aimerais savoir s’il existe une solution qui n’implique pas de script personnalisé.

2 « J'aime »
3

Merci pour votre réponse. J’ai continué à chercher et j’ai trouvé une autre solution qui a fonctionné pour moi et qui pourrait potentiellement aider quelqu’un d’autre :

// Javascript - Masquer l’élément ciblé en fonction du texte dans l’URL. Dans ce cas, le texte dans l’URL était “top” et l’ID que je voulais masquer était “main-title”.


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

Modification : Cela ne fonctionne pas comme prévu. Le problème est que vous devez actualiser la page pour déclencher la fonction javascript.

1 « J'aime »
4

Oui, la solution de @manuel est une bonne approche pour réaliser les choses assez simplement. En utilisant window.location.href, vous pourriez rencontrer des problèmes pour obtenir la bonne URL en raison de la boucle d’événements d’Ember de toute façon.

Pour adapter ce que vous faites à une approche plus « Ember », il faudrait faire quelque chose comme ceci :

<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>

Cependant, il est probablement préférable d’ajouter simplement une classe au corps et de styliser cette classe, ce qui vous permettra également d’apporter des modifications de style plus complexes.

<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 « J'aime »