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.