Cambia la destinazione del link del logo

Supporto
1

Ho un sito in cui diversi gruppi hanno le proprie categorie, e c’è la volontà di personalizzare queste categorie con il logo del proprietario del gruppo.

Per ogni categoria c’è un codice simile a questo:

.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;
}

Il problema è che quando si clicca sul logo, si viene reindirizzati alla home del sito invece che alla categoria. Questo è (quasi) risolto dal seguente codice:

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

    // non navigare verso l'URL base
    event.preventDefault();
    
    // ottieni la categoria attiva dall'ID del div
    div = $("body[class*='category-']")[0];

    // estrai lo slug dalla classe che inizia con category-
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // imposta l'href come URL dello slug
    document.location = "/c/" + slug + "/";
  })
});
</script>

Se clicchi sul logo sia nella pagina di una categoria che in quella di un argomento, vieni portato alla pagina della categoria. Evviva!

MA se clicchi nel piccolo spazio tra il logo e la parte inferiore dell’intestazione, vieni reindirizzato alla home del sito invece che alla pagina della categoria. È praticamente impossibile capire quale azione otterrai. Quando passi il mouse sull’URL nella barra di stato di Chrome, viene mostrata la home del sito invece dell’URL della categoria, indipendentemente dalla destinazione effettiva.

(Ho usato Custom Header Links per aggiungere un link alla home page. Non credo che abbia a che fare con il comportamento descritto sopra.)

E non posso condividere il sito perché le categorie per unità sono visibili solo ai membri del gruppo.

2

Penso che quello che stia succedendo sia che stai cliccando su una minuscola parte del link che contiene #site-text-logo?

La struttura è: div.title a #site-text-logo e stai intercettando i clic su #site-text-logo specificamente, ma non sulla che lo avvolge.

Probabilmente puoi event.preventDefault(); il link .title a all’interno del tuo JS, oppure provare .title a {pointer-events: none;} nel CSS?

3

Sei un grande. Te lo apprezzo davvero. Risolvere un problema di chiave duplicata in PostgreSQL, certo, ma solo il CSS più semplice ha senso per me e capisco a stento la sintassi di JavaScript.

Ma aspetta.

Su una nota completamente non correlata, ho appena fatto in modo che sul sito Kanban di mia moglie, cliccando sul logo del sito si vada alla categoria TODO. Ho creato un componente tema che permette di impostare la home page su un URL arbitrario. L’ho fatto così:

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

Forse dovrei fare qualcosa del genere invece? Anche se non sono sicuro di come capire quali categorie vogliono che la loro home page venga rimappata. Forse una configurazione del sito con un array di ID delle categorie? Penso di poter cercare su Google come ottenere la categoria corrente e verificare se quell’ID è presente in un array nelle impostazioni del sito.

EDIT: Hmm, ma non riesco a capire come, in uno <script type="text/javascript">, stabilire qual è la categoria della pagina corrente… per cambiare selettivamente la setDefaultHomepage.

Sembra più facile?

Ma torniamo alla soluzione originale

Penso che abbia senso per me, ma questo non significa molto.

Credo che il problema sia che in qualche modo l’<h1> fa la cosa giusta, ma che il <a> vada alla home del sito?

Sono solo una cavernicola. Non capisco esattamente cosa significhi. C’è già qualche cosa nel JavaScript che sembra molto simile a questo. Dovrei crearne un altro da zero del tipo $(document).ready(function() {? O aggiungere semplicemente un altro $(".title #site-text-logo").click(function(event){ in qualche modo lì dentro?

Quello che ho provato non sembra aver prodotto alcun cambiamento.

Ho capito un po’ meglio questo e ho fatto così:

/* mantieni la piccola area vicino al logo senza che linki alla home page */
.title a {pointer-events: none;}

Questa ha cambiato qualcosa! E vedo che ha funzionato perché ora nessuna parte del logo fa nulla.