È possibile stilizzare separatamente la pagina "Ultimi" e la pagina "Top"?

Supporto
1

Ho riscontrato un problema durante lo styling degli elementi nelle pagine “Latest” e “Top”. Condividono la stessa classe del corpo (class=“staff docked navigation-topics”), il che significa che non posso stilizzarli individualmente. La pagina “Categories” ha una classe diversa (class=“staff docked navigation-categories categories-list”), quindi posso stilizzarla senza problemi. Qualcuno ha una soluzione?

2

Puoi aggiungere una classe personalizzata o fare qualsiasi cosa in base al percorso (discovery.top, discovery.latest). Il blocco centrale sarebbe qualcosa come

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

Ma mi piacerebbe sapere se esiste una soluzione che non richieda uno script personalizzato.

2 Mi Piace
3

Grazie per la risposta. Ho continuato a cercare e ho trovato un’altra soluzione che ha funzionato per me e potrebbe potenzialmente aiutare anche qualcun altro:

//Javascript - Nasconde l’elemento di destinazione in base al testo presente nell’URL. In questo caso, il testo nell’URL era “top” e l’ID che volevo nascondere era “main-title”.


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

Modifica: Questo non funziona come previsto. Il problema è che è necessario aggiornare la pagina per attivare la funzione javascript.

1 Mi Piace
4

Sì, la soluzione di @manuel è un buon approccio per ottenere le cose in modo abbastanza semplice. Usando window.location.href potresti riscontrare problemi nell’ottenere l’URL corretto a causa del runloop di Ember.

Per adattare ciò che stai facendo all’approccio più “Ember” dovresti fare qualcosa di simile a questo:

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

Tuttavia, è probabilmente meglio se aggiungi semplicemente una classe al body e stilizzi quella classe, il che ti permetterà anche di apportare modifiche stilistiche più complesse.

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