¿Hay alguna forma de estilizar la página "Más reciente" y la página "Superior" por separado?

Soporte
1

He encontrado un problema al intentar aplicar estilos a elementos en la página “Latest” y en la página “Top”. Ambas comparten la misma clase de cuerpo (class=“staff docked navigation-topics”), lo que significa que no puedo aplicarles estilos individualmente. La página “Categories” tiene una clase diferente (class=“staff docked navigation-categories categories-list”), por lo que puedo aplicarle estilos sin problemas. ¿Alguien tiene alguna solución?

2

Puedes añadir una clase personalizada o hacer lo que quieras basándote en la ruta (discovery.top, discovery.latest). El bloque central sería algo como

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

Pero me encantaría saber si hay alguna solución que no implique un script personalizado.

2 Me gusta
3

Gracias por la respuesta. Continué buscando y encontré otra solución que me funcionó y que podría ayudar a alguien más también:

// Javascript - Oculta el elemento objetivo basándose en el texto dentro de la URL. En este caso, el texto dentro de la URL era “top” y el ID que quería ocultar era “main-title”.


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

Editar: Esto no funciona como se esperaba. El problema es que necesitas actualizar la página para activar la función de javascript.

1 me gusta
4

Sí, la solución de @manuel es un buen enfoque para lograr las cosas de manera bastante sencilla. Usando window.location.href podrías tener problemas para obtener la URL correcta debido al runloop de Ember de todos modos.

Para ajustar lo que estás haciendo al enfoque más “Ember”, sería hacer algo como esto:

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

Sin embargo, probablemente sea mejor si simplemente agregas una clase al body y aplicas estilos a esa clase, lo que también te permitirá realizar cambios de estilo más complejos.

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