Includere risorse (es. immagini, font) nei temi e nei componenti

[Discourse]

I temi e i componenti dei temi consentono di gestire le risorse caricate, come immagini e font. È possibile controllare quali risorse il tema accetta tramite l’impostazione del sito: estensioni autorizzate per i temi

Inclusione di risorse nei temi e nei componenti

Per i 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 risorse su un tema remoto o un componente di tema, consulta Create and share a font theme component per un esempio dettagliato.

Caricamento di risorse su temi e componenti locali

I temi locali includono:

• I temi predefiniti Light e Dark forniti con ogni istanza 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 risorse su un tema locale o un componente di tema, vai al tuo tema o componente e seleziona + Aggiungi nella sezione Caricamenti:

Nella finestra modale Aggiungi caricamento, scegli un file e inserisci un nome di variabile SCSS da utilizzare con le tue personalizzazioni CSS, javascript e/o handlebars

Una volta caricato, la risorsa apparirà nell’elenco dei caricamenti:

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

Come utilizzare le risorse

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

:informationsource: _Quando si utilizzano font ttf o otf, assicurarsi di utilizzare il formato 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 una risorsa del tema a HTML vanilla (come nelle sezioni header o after header del pannello di personalizzazione). È necessario utilizzare un template handlebars o l’API dei plugin (ne parleremo in Developing Discourse Themes & Theme Components).

Una soluzione alternativa è caricare la risorsa come immagine di sfondo utilizzando SCSS (come nell’esempio sopra). Quindi, nella sezione header del tuo tema, potresti aggiungere:

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

e quindi nel tuo CSS:

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

Accesso ai caricamenti dei temi come impostazioni

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

Questo consente ai temi e ai componenti di accedere alle risorse del tema.

All’interno del js del tema, è ora possibile ottenere l’URL di una risorsa con:

settings.theme_uploads.name

Informazioni aggiuntive

• Create and share a font theme component

---

Questo documento è sottoposto a controllo di 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?