Einzigartiges benutzerdefiniertes Symbol nur für die Bewertungsseite

[Joart]

Hallo,
Ich möchte die Häkchen-Symbole nur auf der Bewertungsseite ersetzen. Dort finden wir sie:

<span class="approved">
        <svg class="fa d-icon d-icon-check svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
            <use href="#check"></use>
        </svg>
        Approved
</span>

Wenn ich das verwende:
api.replaceIcon('check', 'full-circle-icon');
werden alle Häkchen im Forum durch den vollen Kreis ersetzt…
Aber ich möchte das Symbol nicht auf den anderen Seiten ersetzen.

Wie kann ich das ändern? Vielen Dank für Ihre Antwort

[Canapin (Coin-coin le Canapin)]

Ich bin mir nicht zu 100 % sicher, ob es funktionieren würde, da ich es nicht ausprobiert habe, aber Sie könnten versuchen, die aktuelle Seite mit JavaScript abzurufen, zu prüfen, ob es sich um eine Bewertungsseite handelt, und dann das Symbol mit Ihrer Codezeile zu ändern.

Ich glaube, es gab irgendwo auf Meta ein JS-Beispiel, das die API verwendet, um die aktuelle Seite abzurufen, auf der wir uns befinden, aber ich konnte es nicht wiederfinden.

Oder vielleicht können Sie einfach die aktuelle URL zurückgeben, um zu prüfen, ob Sie sich auf /review befinden.

[Joart]

Ich habe das versucht:

    api.onPageChange((url) => {
       if (window.location.href.indexOf("review") > -1) {
             api.replaceIcon('check', 'full-circle-icon');
       }
    }

Aber es funktioniert nicht…
Ich habe diesen Fehler:

SyntaxError: /discourse/theme-35/initializers/theme-field-379-common-html-script-1: Unerwartetes Token, erwartet “,” (97:5)

Habe ich etwas falsch gemacht?

[Canapin (Coin-coin le Canapin)]

Sie haben ); am Ende Ihres Codes vergessen, daher der Fehler.

Etwas wie dies könnte funktionieren (achten Sie nicht auf die URI-Analyse, es gibt viele Möglichkeiten, dies zu tun):

    api.onPageChange((url) => {
       if (location.pathname.split('/')[1] == "review") {
            api.replaceIcon('check', 'full-circle-icon');
       }
    });

Aber seien Sie sich bewusst, dass onPageChange beim ersten Laden der Seite nicht ausgelöst wird. Wenn Sie IhrForum/reviews direkt in Ihrem Browser öffnen, wird onPageChange nicht ausgelöst und das Symbol wird nicht ersetzt.

Ich weiß nicht, wie man die Symboländerung sowohl beim ersten Laden der Seite als auch bei einer Seitenänderung auslöst. Vielleicht gibt es eine API-Methode dafür, aber ich habe sie nicht gefunden.

Außerdem bleibt das Symbol, sobald es geändert wurde, auf anderen Seiten während der Navigation geändert, daher sollten Sie die Symboländerung rückgängig machen, wenn die URL nicht /review ist.

Kurz gesagt… ich denke, es erfordert etwas mehr Arbeit, um voll funktionsfähig zu sein. Beachten Sie, dass ich kein Experte für Discourse-Code oder Javascript bin. Vielleicht kann jemand mit mehr Wissen weiterhelfen.

---

Bearbeiten: Der Code funktioniert nicht, wenn Sie zum ersten Mal zu /review gehen. Ich nehme an, das liegt daran, dass die Seite geladen wird und das Symbol nicht dynamisch geändert wird. Wir sollten also einen anderen Weg finden, das zu tun. Entschuldigung, dass ich nicht mehr helfen kann.

[Joart]

@Canapin

Du solltest das Symbol zurücksetzen

Weißt du, wie das geht?

[Don]

Hallo,

Ich schreibe auch eine CSS-Lösung.

Sie wird das Standard-Häkchen-Symbol ausblenden und das benutzerdefinierte Symbol über eine ::before-Pseudoklasse hinzufügen.

1. Erstellen Sie eine neue Theme-Komponente.

2. Laden Sie das Symbol in den Abschnitt Uploads hoch und fügen Sie den SCSS-Variablennamen hinzu: review-approved-icon
   

   

3. Klicken Sie auf die Schaltfläche CSS/HTML bearbeiten und fügen Sie den folgenden Code in den Abschnitt Common / CSS ein.

Verwenden Sie dies, wenn Sie var(--success) verwenden möchten, um dem benutzerdefinierten Symbol Farbe zu verleihen

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) light scheme color #090 (custom icon color)
      // you can calculate new light color filter here: https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%);
      @media (prefers-color-scheme: dark) {
        // var(--success) dark scheme color #1ca551 (custom icon color)
        // you can calculate new dark color filter here: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Verwenden Sie dies, wenn Ihr Symbol bereits die gewünschte Farbe hat

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Verwenden Sie dies, wenn Sie ein anderes Symbol für helle und dunkle Farbschemata verwenden möchten

Wenn Sie diese Option wählen, müssen Sie zwei verschiedene Symbole mit unterschiedlichen Farben hochladen.

SCSS-Variablenname: review-approved-icon-light und review-approved-icon-dark

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon-light);
      @media (prefers-color-scheme: dark) {
        content: url($review-approved-icon-dark);
      }
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---