Crea e condividi un componente tema font

[Discourse]

Discourse supporta l’importazione di temi contenenti risorse da un repository remoto.

Questo permette agli autori di temi di condividere font e immagini.

Crea un nuovo repository git con il font

mkdir discourse-roboto-theme
cd discourse-roboto-theme
git init .
vim about.json

Per about.json aggiungi un file di configurazione base

{
  "name": "Componente tema Roboto",
  "about_url": "",
  "license_url": "",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

Aggiungi un file LICENSE, io uso solitamente la MIT

vim LICENSE

Scarica il font

http://localfont.com/ è un sito utile per ottenere font

mkdir assets
cp ~/Downloads/roboto.woff2 roboto.woff2

Aggiungi CSS che utilizza il tema

mkdir common
cd common

Crea un file chiamato common.scss con

@font-face {
  font-family: Roboto;
  src: url($roboto) format("woff2");
}

body {
  font-family: Roboto;
}

Invia le modifiche su GitHub

Registra tutte le tue modifiche:

git add LICENSE
git add about.json
git add assets/roboto.woff2
git add common/common.scss
git commit -am "primo commit"

Crea un account su GitHub.com e poi crea un nuovo repository.

(Opzionale) crea un argomento su Discourse come punto di riferimento per discutere dei tuoi colori

Idealmente creeresti un argomento nella categoria Customization > Theme con alcuni screenshot del tuo schema di colori. Userai questo come about_url

Compila le informazioni mancanti nel tuo file about.json

• Vai alla pagina della tua LICENSE su GitHub, inserisci quell’URL come license_url

• Usa o l’URL del progetto GitHub o l’URL dell’argomento Discourse come about_url

Alla fine del processo il tuo file about.json assomiglierà a:

{
  "name": "Componente tema Roboto",
  "about_url": "https://github.com/SamSaffron/discourse-roboto-theme",
  "license_url": "https://github.com/SamSaffron/discourse-roboto-theme/blob/master/LICENSE",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

Registra la modifica e invia su GitHub

git commit -am "aggiunti altri dettagli"
git push

Testa il tuo componente font

• Nella schermata admin/customize/theme importa il tuo tema da GitHub

Ora puoi condividere facilmente i font!

Vedi anche:

Struttura di temi e componenti di tema

Discourse supporta temi nativi che possono essere ottenuti da un archivio .tar.gz o da un repository git remoto, inclusi repository privati. [56] Un esempio di tema è disponibile qui: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub [32] Il repository git viene controllato per aggiornamenti (una volta al giorno) oppure utilizzando il pulsante Controlla aggiornamenti. Quando vengono rilevate modifiche, il pulsante Controlla aggiornamenti cambia in Aggiorna al…

---

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

[bletch (Danny Goodall)]

Great tutorial.

Worked like a charm except it looks like localfont.com is down or no more.

I used this Google webfonts helper site to download a .woff2 version of the font I was after.

[pfaffman (Jay Pfaffman)]

See also Install the Discourse Theme CLI console app to help you build themes

[Dave_Driesmans]

Quando ho seguito i passaggi ho ricevuto un Errore: Variabile non definita: “$fontname”.

Quindi:
Ho dichiarato la variabile in $variables:
fontname: "assets/fontname.woff2";

Mi sembra che tu debba inserirla, ma quale percorso usare in $variables?

Quando lasci che Discourse carichi i file con

"assets": {
        "fontname": "assets/fontname.woff2"
   }

carica il file in un percorso diverso da assets/roboto.woff2, sembra
(/uploads/db0202/original/1X/...)

Modifica:
Non c’è bisogno di $variables, la magia avviene con i caricamenti. Ma avevo assets/font.svg#regular negli assets e l’hashtag ha creato il problema.

[kcahtoor]

@Dave_Driesmans

Ho dichiarato la variabile in $variables

Sto riscontrando lo stesso errore Errore: Variabile non definita. Inoltre, non vengono visualizzati asset in caricamenti o caricamento come intestazione.

Questo how-to necessita di un aggiornamento?

Grazie in anticipo