Componente tema menzione emoji

Personalizzazione Componente del tema
7

Volevo anche la possibilità di utilizzare SVG personalizzati come icona accanto a una menzione, qualcosa che ho visto su Guilded per lo staff e che volevo avere lì ma non potevo avere—un altro motivo per cui mi piace così tanto Discourse è che posso effettivamente creare qualcosa che potrebbe funzionare invece di sperare e aspettare che gli sviluppatori lo aggiungano.

Così ho creato la seguente soluzione. Non è infallibile in alcun modo, probabilmente richiede che l’SVG che carichi abbia una variabile SCSS che inizi con svg e tuttavia sembra funzionare abbastanza per me ora :slight_smile:

Se qualcuno vuole prendere questo codice e svilupparlo, incorporarlo per renderlo più elegante, gli sarei grato!

Possibili miglioramenti

  1. Far funzionare tutte le icone SVG, il che significa tutte quelle di Discourse e tutte quelle caricate che non iniziano con svg.
  2. Pulire il codice.
  3. Migliorare lo stile, dato che ho un po’ improvvisato il CSS per farlo funzionare e potrebbe non funzionare in tutte le situazioni.

Indipendentemente da ciò, ecco un esempio di menzione con me che uso l’icona personalizzata che ho per Emotional Self-Defense come icona di menzione dello staff:

image

Ecco il codice che ho aggiunto:

header.html

  // Aggiunge icone SVG come opzione, purché siano incluse negli asset e caricate
  // Crea un oggetto di tutti gli asset e itera per trovare quali link hanno l'attributo data-emoji
  // uguale al nome della variabile dell'asset e quindi aggiunge l'URL per esso

  // converte l'oggetto in un array di chiavi
  const keys = Object.keys(settings.theme_uploads);

  // stampa tutte le chiavi
  console.log(keys);

  // itera sull'oggetto
  keys.forEach((key, index) => {
      console.log(`${key}: ${settings.theme_uploads[key]}`);
      api.decorateCooked($elem => {
        var url = settings.theme_uploads[key];
        console.log("key: " + key);
        console.log("index: " + index);
        console.log("url: " + url);
        console.log(JSON.stringify(settings.theme_uploads));
        $elem
          .find("a[data-emoji^='" + key + "']")
          .css("--svg-icon", "url('" + url + "')");
        }
      );    
  });

common.scss

@if $show-after-mention == "true" {
  [data-emoji^="svg"]:after {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
} @else {
  [data-emoji^="svg"]:before {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
}

Questo richiede anche di:

  1. Creare una cartella /assets
  2. Aggiungere file svg nella cartella /assets, come /assets/esd-heart.svg
  3. Aggiornare il file about.json per collegare tali asset con qualcosa come:
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
1 Mi Piace