Gibt es eine Möglichkeit, die "Neueste" und "Top" Seite separat zu gestalten?

Unterstützung
1

Ich bin auf ein Problem gestoßen, als ich versucht habe, Elemente auf der „Neueste“-Seite und der „Top“-Seite zu stylen. Sie haben genau die gleiche Body-Klasse (class=“staff docked navigation-topics”), was bedeutet, dass ich sie nicht einzeln stylen kann. Die „Kategorien“-Seite hat eine andere Klasse (class=“staff docked navigation-categories categories-list”), sodass ich sie problemlos stylen kann. Hat jemand eine Lösung?

2

Sie können eine benutzerdefinierte Klasse hinzufügen oder je nach Route (discovery.top, discovery.latest) alles Mögliche tun. Der zentrale Block wäre so etwas wie

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

Aber ich würde mich freuen zu hören, ob es eine Lösung gibt, die kein benutzerdefiniertes Skript erfordert.

2 „Gefällt mir“
3

Vielen Dank für die Antwort. Ich habe weiter gesucht und eine andere Lösung gefunden, die für mich funktioniert hat und möglicherweise auch jemand anderem helfen könnte:

// Javascript - Blendet das Ziel-Element basierend auf Text in der URL aus. In diesem Fall war der Text in der URL „top“ und die ID, die ich ausblenden wollte, war „main-title“.


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

Bearbeitung: Dies funktioniert nicht wie beabsichtigt. Das Problem ist, dass Sie die Seite neu laden müssen, um die Javascript-Funktion auszulösen.

1 „Gefällt mir“
4

Ja, @manuel’s Lösung ist ein guter Ansatz, um Dinge recht einfach zu erreichen. Wenn Sie window.location.href verwenden, können Sie aufgrund des Runloop von Ember sowieso Probleme bekommen, die richtige URL abzurufen.

Um das, was Sie tun, an den eher “Ember”-Ansatz anzupassen, müssten Sie etwas Ähnliches tun:

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

Es ist jedoch wahrscheinlich am besten, wenn Sie einfach eine Body-Klasse hinzufügen und diese Klasse stylen, was Ihnen auch ermöglicht, komplexere Stiländerungen vorzunehmen.

<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 „Gefällt mir“