Modifier la destination du lien du logo

Soutien
1

J’ai un site où plusieurs groupes ont leurs propres catégories, et l’idée est d’habiller ces catégories avec le logo du propriétaire du groupe.

Pour chaque catégorie, il y a un code comme celui-ci :

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

Le problème est que lorsque vous cliquez sur le logo, vous êtes redirigé vers l’accueil du site plutôt que vers la catégorie. Cela est (pour la plupart) résolu par le code suivant :

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

    // Ne pas naviguer vers l'URL de base
    event.preventDefault();
    
    // Récupérer la catégorie active depuis l'ID du div
    div = $("body[class*='category-']")[0];

    // Extraire le slug depuis la classe commençant par category-
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // Définir le href comme étant l'URL du slug
    document.location = "/c/" + slug + "/";
  })
});
</script>

Si vous cliquez sur le logo depuis une page de catégorie ou une page de sujet, vous allez bien vers la page de catégorie. Hourra !

MAIS si vous cliquez dans le tout petit espace entre le logo et le bas de l’en-tête, vous êtes redirigé vers l’accueil du site au lieu de la page de catégorie. Il est presque impossible de distinguer à l’avance quelle action sera déclenchée. Lorsque vous survolez l’URL en bas de Chrome, l’URL affichée est celle de l’accueil du site et non celle de la catégorie, peu importe l’action attendue.

(J’ai utilisé Custom Header Links pour ajouter un lien vers l’accueil. Je ne pense pas que cela soit lié au comportement décrit ci-dessus.)

Et je ne peux pas partager le site car les catégories par unité sont visibles uniquement par les membres du groupe.

1 « J'aime »
2

Je pense que ce qui se passe, c’est que vous cliquez sur une petite partie du lien contenant #site-text-logo ?

La structure est : div.title a #site-text-logo et vous capturez les clics spécifiquement sur #site-text-logo, mais pas sur le a dans lequel il est enveloppé.

Vous pouvez probablement utiliser event.preventDefault(); sur le lien .title a dans votre JS, ou peut-être essayer .title a {pointer-events: none;} dans le CSS ?

2 « J'aime »
3

Tu es génial. Je t’en suis vraiment reconnaissant. Résoudre un problème de clé dupliquée dans PostgreSQL, d’accord, mais seule la CSS la plus simple a du sens pour moi et je comprends à peine la syntaxe de JavaScript.

Mais attendez.

Sur une note complètement indépendante, je viens de configurer le site Kanban de ma femme pour que le clic sur le logo du site redirige vers la catégorie TODO. J’ai créé un composant de thème permettant de définir la page d’accueil sur une URL arbitraire. Voici comment je l’ai fait :

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

Peut-être devrais-je simplement faire quelque chose comme ça à la place ? Bien que je ne sache pas trop comment déterminer quelles catégories veulent que leur page d’accueil soit redirigée. Peut-être une configuration du site avec un tableau d’identifiants de catégories ? Je pense pouvoir trouver sur Google comment obtenir la catégorie actuelle et vérifier si cet identifiant se trouve dans un tableau défini dans une configuration du site.

MODIFICATION : Hmm, mais je ne sais pas comment, dans un <script type="text/javascript">, déterminer quelle est la catégorie de la page actuelle… pour modifier sélectivement setDefaultHomepage.

Cela semble-t-il plus simple ?

Mais revenons à la solution initiale

Je pense que cela me semble correct, mais cela ne veut pas dire grand-chose.

Je pense que c’est parce que d’une manière ou d’une autre, le <h1> fait la bonne chose, mais que le <a> redirige vers l’accueil du site ?

Je suis un vrai primitif. Je ne sais pas trop ce que cela signifie. Il y a déjà des éléments dans le JavaScript qui ressemblent beaucoup à cela. Devrais-je en créer un tout nouveau du type $(document).ready(function() { ou ajouter simplement un autre $(".title #site-text-logo").click(function(event){ quelque part dedans ?

Ce que j’ai essayé n’a semblé produire aucun changement.

J’ai mieux compris celui-ci et j’ai fait ceci :

/* garder la petite partie près du logo sans lien vers la page d'accueil */
.title a {pointer-events: none;}

Celui-ci a changé quelque chose ! Et je vois que cela a fonctionné car maintenant aucune partie du logo ne fait quoi que ce soit.

1 « J'aime »