Ziel des Logo-Links ändern

Unterstützung
1

Ich habe eine Seite, auf der verschiedene Gruppen eigene Kategorien haben, und es besteht der Wunsch, diese Kategorien mit dem Logo des Gruppeninhabers zu branden.

Für jede Kategorie gibt es Code wie diesen:

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

Das Problem ist, dass man beim Klicken auf das Logo zur Startseite der Seite und nicht zur Kategorie weitergeleitet wird. Dies ist (weitgehend) durch Folgendes gelöst:

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

    // Nicht zur Basis-URL navigieren
    event.preventDefault();
    
    // Kategorie-Aktivität aus der Div-ID ermitteln
    div = $("body[class*='category-']")[0];

    // Slug aus der Klasse extrahieren, die mit 'category-' beginnt
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // href auf die Slug-URL setzen
    document.location = "/c/" + slug + "/";
  })
});
</script>

Wenn man auf der Kategorie- oder Themen-Seite auf das Logo klickt, landet man auf der Kategorie-Seite. Hurra!

ABER: Wenn man in den winzigen Zwischenraum zwischen dem Logo und dem unteren Rand des Headers klickt, gelangt man zur Startseite und nicht zur Kategorie-Seite. Es ist praktisch unmöglich vorherzusagen, welche Aktion ausgelöst wird. Wenn man mit der Maus über die URL im unteren Bereich von Chrome fährt, wird stets die Startseite der Seite angezeigt, nicht die Kategorie-URL – unabhängig davon, wohin man tatsächlich weitergeleitet wird.

(Ich habe Custom Header Links verwendet, um einen Link zur Startseite hinzuzufügen. Ich glaube nicht, dass dies mit dem oben beschriebenen Verhalten zusammenhängt.)

Und ich kann die Seite nicht teilen, da die pro-Einheit-Kategorien nur für Gruppenmitglieder sichtbar sind.

2

Ich vermute, dass du auf einen kleinen Teil des Links klickst, der #site-text-logo enthält?

Die Struktur ist: div.title a #site-text-logo, und du fängst Klicks speziell auf #site-text-logo ab, aber nicht auf das a, in das es eingebettet ist.

Du kannst wahrscheinlich event.preventDefault(); für den Link .title a in deinem JS aufrufen oder alternativ versuchen, .title a {pointer-events: none;} im CSS zu setzen?

3

Du bist großartig. Ich schätze das wirklich sehr. Hilf mir bitte, ein Duplikat-Problem bei Schlüsseln in PostgreSQL zu lösen, sicher, aber nur das einfachste CSS ergibt für mich Sinn, und ich verstehe die Syntax von JavaScript gerade so eben.

Aber Moment.

Ganz nebenbei: Ich habe gerade auf der Kanban-Seite meiner Frau so eingestellt, dass ein Klick auf das Site-Logo zur Kategorie TODO führt. Ich habe eine Theme-Komponente erstellt, die es erlaubt, die Startseite auf eine beliebige URL festzulegen. Ich habe das so umgesetzt:

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

Vielleicht sollte ich einfach so etwas Ähnliches machen? Allerdings bin ich mir nicht sicher, wie ich herausfinden kann, welche Kategorien ihre Startseite neu zuordnen wollen. Vielleicht eine Site-Einstellung mit einem Array von Kategorien-IDs? Ich denke, ich kann es googeln, um die aktuelle Kategorie zu ermitteln und zu prüfen, ob diese ID in einem Array einer Site-Einstellung enthalten ist.

EDIT: Hmm, aber ich weiß nicht, wie ich in einem <script type="text/javascript"> feststellen soll, welche Kategorie die aktuelle . . . Seite . . . ist, um setDefaultHomepage selektiv zu ändern.

Klingt das einfacher?

Aber zurück zur ursprünglichen Lösung

Das klingt für mich richtig, aber das sagt noch nicht viel aus.

Ich glaube, es ist so, dass das <h1> irgendwie das Richtige tut, aber der <a> zur Startseite der Site führt?

Ich bin nur ein Höhlenmensch. Ich weiß nicht genau, was das bedeutet. Es gibt im JavaScript bereits einige Dinge, die dem ähnlich scheinen. Soll ich ein komplett neues $(document).ready(function() {-Konstrukt erstellen oder einfach noch ein $(".title #site-text-logo").click(function(event){ dort irgendwie hinzufügen?

Das, was ich versucht habe, schien nichts zu bewirken.

Das habe ich etwas besser verstanden und so umgesetzt:

/* Verhindert, dass der winzige Bereich nahe dem Logo zur Startseite verlinkt */
.title a {pointer-events: none;}

Das hat etwas verändert! Und ich sehe, dass es funktioniert hat, denn jetzt macht der gesamte Logo-Bereich nichts mehr.