Includere asset (es. immagini, font) in temi e componenti

[Discourse]

I temi e i componenti tema consentono di gestire gli asset caricati come immagini e caratteri tipografici. È possibile controllare quali asset il sito accetta utilizzando l’impostazione del sito: theme authorized extensions

Inclusione di asset in temi e componenti

Per temi remoti

I temi remoti includono:

• Temi e componenti installati dall’elenco Popolari dei temi
• Temi e componenti installati utilizzando il metodo Da un repository git

Per caricare asset in un tema o componente remoto, vedere Create and share a font theme component per un esempio dettagliato.

Caricamento di asset in temi e componenti locali

I temi locali includono:

• I temi predefiniti Chiaro e Scuro forniti con ogni istanza di Discourse
• Temi e componenti creati utilizzando il metodo di installazione + Crea nuovo
• Temi e componenti caricati dal computer locale utilizzando il metodo di installazione Dal tuo dispositivo.

Per caricare asset in un tema o componente locale, navigare al tema o componente e selezionare + Aggiungi nella sezione Caricamenti:

Nel modale Aggiungi caricamento, scegliere un file e inserire un nome di variabile SCSS da utilizzare con le personalizzazioni CSS, javascript e/o handlebars:

Una volta caricato, l’asset apparirà nell’elenco Caricamenti:

Nota importante: Non aggiungere caricamenti a temi e componenti tramite l’interfaccia di amministrazione se il componente è stato installato in remoto da un repository git. Gli aggiornamenti al componente elimineranno tutti i caricamenti che non erano inclusi nel repository git.

Come utilizzare gli asset

SCSS

@font-face {
  font-family: Amazing;
  src: url($Comic-Sans) format("woff2");
}

body {
  font-family: Amazing;
  font-size: 15px;
}

.d-header {
  background-image: url($texture);
}

:information*source: _Quando si utilizzano caratteri tipografici ttf o otf, assicurarsi di utilizzare un formato di opentype._

Javascript

// {theme}/javascripts/discourse/api-initializers/init-theme.gjs

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  console.log(settings.theme_uploads.balloons);
});

HTML

Non è possibile aggiungere direttamente un asset del tema al codice HTML semplice (come nelle sezioni header o after header del pannello di amministrazione personalizza). È necessario utilizzare un template handlebars o l’API del plugin (maggiori informazioni su Developing Discourse Themes & Theme Components).

Una soluzione alternativa consiste nel caricare l’asset come immagine di sfondo utilizzando SCSS (come nell’esempio precedente). Quindi, nella sezione header del tema, è possibile aggiungere:

<div class="my-custom-div">
  <a href="/"></a>
</div>

e quindi nel CSS:

.my-custom-div a {
  height: 50px;
  width: 100px;
  background-image: url($asset-name);
}

Accesso ai caricamenti del tema come impostazioni

È anche possibile trattare theme_uploads come impostazioni in JavaScript (commit correlato).

Ciò consente ai temi e ai componenti di accedere agli asset del tema.

All’interno del js del tema è ora possibile ottenere l’URL di un asset con:

settings.theme_uploads.name

Informazioni aggiuntive

• Create and share a font theme component

---

Questo documento è controllato in versione - suggerisci modifiche su github.

[bitmage (Brandon Mason)]

Ho creato una directory di risorse con 5 file svg per le icone dei social media. Li ho aggiunti tutti a about.json come indicato da Crea e condividi un componente tema font. Li uso nel mio CSS in body_tag.html.

Previsto: Le icone dovrebbero caricarsi.

Reale: Le icone non vengono visualizzate. La barra degli strumenti per sviluppatori mostra che il browser ha una qualche nozione della loro esistenza come immagini registrate… ma non ci sono dati in esse.

Cosa mi manca? C’è un passaggio di build o qualcos’altro?