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.