Cambiar destino del enlace del logotipo

Soporte
1

Tengo un sitio donde varios grupos tienen sus propias categorías, y existe el deseo de que estas categorías lleven la marca del logotipo del propietario del grupo.

Para cada categoría hay un código similar a este:

.category-org .d-header {
    color: white !important;
    background-color: white !important;
    background-image: none !important;
    background:white !important;
}

.category-org #site-text-logo {
  content: url("/uploads/default/original/1X/a9d7d4f215f2013907002ffe13456d3f90a7f108.png") !important;
  display: inline-block;
  height: 50px;
  font-size: 0;
  margin-top: 5px;
  margin-bottom: 0px;
}

El truco es que al hacer clic en el logotipo, te llevan a la página de inicio del sitio en lugar de a la categoría. Esto se resuelve (en su mayoría) con lo siguiente:

<script type="text/javascript">
$(document).ready(function() {
  $(".title #site-text-logo").click(function(event){

    // no navegar a la URL base
    event.preventDefault();
    
    // obtener la categoría activa desde el id del div
    div = $("body[class*='category-']")[0];

    // extraer el slug de la clase que comienza con category-
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // establecer el href como la URL del slug
    document.location = "/c/" + slug + "/";
  })
});
</script>

Si haces clic en el logotipo ya sea en una página de categoría o de tema, vas a la página de la categoría. ¡Genial!

PERO si haces clic en el pequeño espacio entre el logotipo y la parte inferior de esa cabecera, te llevan a la página de inicio en lugar de a la página de la categoría. Es prácticamente imposible distinguir cuándo obtendrás una acción u otra. Cuando pasas el ratón por encima de la URL en la parte inferior de Chrome, muestra la página de inicio del sitio en lugar de la URL de la categoría, independientemente de a dónde vayas a ir.

(He utilizado Custom Header Links para agregar un enlace a la página de inicio. No creo que tenga nada que ver con el comportamiento anterior.)

Y no puedo compartir el sitio porque las categorías por unidad son visibles solo para los miembros del grupo.

2

Creo que lo que está sucediendo es que haces clic en una pequeña parte del enlace que contiene #site-text-logo.

La estructura es: div.title a #site-text-logo y estás capturando los clics específicamente en #site-text-logo, pero no en el a que lo envuelve.

Probablemente puedas usar event.preventDefault(); en el enlace .title a dentro de tu JS, o tal vez probar .title a {pointer-events: none;} en el CSS.

3

¡Eres genial! Lo agradezco mucho. Ayúdame a resolver un problema de clave duplicada en PostgreSQL, seguro, pero solo el CSS más sencillo tiene sentido para mí y apenas entiendo la sintaxis de JavaScript.

PERO ESPERA.

Por otro tema totalmente unrelated, acabo de hacer que, en el sitio Kanban de mi esposa, al hacer clic en el logotipo del sitio se vaya a la categoría TODO. Creé un componente de tema que permite establecer la página de inicio en una URL arbitraria. Lo hice así:

<script type="text/discourse-plugin" version="0.8">
    const { setDefaultHomepage } = require('discourse/lib/utilities');
    if (settings.home_url_override) {
      setDefaultHomepage(settings.home_url_override);
    }
</script>

¿Quizás debería hacer algo así en su lugar? Aunque no estoy seguro de cómo saber qué categorías quieren que se reasigne su página de inicio. ¿Quizás una configuración del sitio con un array de IDs de categorías? Creo que puedo buscar en Google cómo obtener la categoría actual y verificar si ese ID está en un array dentro de una configuración del sitio.

EDIT: Hmm, pero no sé cómo, dentro de un <script type="text/javascript">, determinar cuál es la categoría de la . . . página actual? . . . para cambiar selectivamente el setDefaultHomepage.

¿Eso parece más fácil?

Pero volvamos a la solución original

Creo que eso suena correcto para mí, pero eso no significa mucho.

Creo que es que de alguna manera el <h1> hace lo correcto, pero que el <a> va a la página de inicio del sitio.

Soy un cavernícola. No sé muy bien qué significa eso. Ya hay algunas cosas en el JavaScript que parecen bastante similares. ¿Debería crear otro $(document).ready(function() { completo? ¿O añadir simplemente otro $(".title #site-text-logo").click(function(event){ de alguna manera ahí?

Lo que intenté no pareció hacer nada diferente.

Entendí un poco mejor este último y hice lo siguiente:

/* mantener la pequeña porción cerca del logotipo sin que enlace a la página de inicio */
.title a {pointer-events: none;}

¡Esto sí cambió algo! Y veo que funcionó porque ahora ninguna parte del logotipo hace nada.