Erstellen und Freigeben eines Schriftart-Themenkomponente

[Discourse]

Discourse unterstützt das Importieren von Themes, die Assets aus einem entfernten Repository enthalten.

Dies ermöglicht es Theme-Autoren, Schriftarten und Bilder zu teilen.

Erstelle ein neues Git-Repository mit der Schriftart

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

Für about.json füge eine Grundgerüst-Konfigurationsdatei hinzu

{
  "name": "Roboto-Theme-Komponente",
  "about_url": "",
  "license_url": "",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

Füge eine LICENSE-Datei hinzu, ich verwende normalerweise MIT

vim LICENSE

Lade die Schriftart herunter

http://localfont.com/ ist eine praktische Seite, um Schriftarten zu erhalten

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

Füge CSS hinzu, das das Theme verwendet

mkdir common
cd common

Erstelle eine Datei namens common.scss mit

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

body {
  font-family: Roboto;
}

Pushe Änderungen zu GitHub

Checke alle deine Änderungen ein:

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

Erstelle ein Konto auf GitHub.com und erstelle dann ein neues Repository.

(Optional) Erstelle ein Thema auf Discourse als Zuhause, um deine Farben zu diskutieren

Idealerweise würdest du ein Thema in der Kategorie Customization > Theme mit einigen Screenshots deines Farbschemas erstellen. Du wirst dies als deine about_url verwenden.

Fülle die fehlenden Informationen in deiner about.json-Datei aus

• Navigiere zu deiner LICENSE-Seite auf GitHub, fülle diese URL als deine license_url aus

• Verwende entweder die GitHub-Projekt-URL oder die Discourse-Thema-URL als deine about_url

Am Ende des Prozesses wird deine about.json-Datei ungefähr so aussehen:

{
  "name": "Roboto-Theme-Komponente",
  "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"
  }
}

Checke die Änderung ein und pushe zu GitHub

git commit -am "added more details"
git push

Teste deine Schriftarten-Komponente

• Importiere dein Theme auf dem admin/customize/theme-Bildschirm von GitHub

Du kannst jetzt leicht Schriftarten teilen!

Siehe auch:

Struktur von Themes und Theme-Komponenten

Discourse unterstützt native Themes, die aus einem .tar.gz-Archiv oder aus einem entfernten Git-Repository bezogen werden können, einschließlich privater Repositories. [56] Ein Beispiel-Theme finden Sie unter: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub [32] Das Git-Repository wird auf Updates überprüft (einmal täglich) oder durch Klicken auf die Taste Auf Updates prüfen. Wenn Änderungen erkannt werden, ändert sich die Taste Auf Updates prüfen in Auf ne…

---

Dieses Dokument ist versionskontrolliert - schlage Änderungen auf GitHub vor.

[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]

Als ich den Schritten folgte, erhielt ich einen Fehler: Undefinierte Variable: „$fontname“.

Also:
Ich habe die Variable in $variables deklariert:
fontname: „assets/fontname.woff2“;

Es scheint mir, dass Sie sie eingeben müssen, aber welchen Pfad sollen Sie in den $variables verwenden?

Wenn Sie Discourse die Dateien hochladen lassen mit

„assets“: {
        „fontname“: „assets/fontname.woff2“
   }

lädt es die Datei in einen anderen Pfad als assets/roboto.woff2 hoch, scheint es
(„/uploads/db0202/original/1X/…“)

Bearbeiten:
$variables werden nicht benötigt, die Magie geschieht mit den Uploads. Aber ich hatte assets/font.svg#regular in den Assets und das Hashtag hat das Problem verursacht.

[kcahtoor]

@Dave_Driesmans

Ich habe die Variable in $variables deklariert.

Ich erhalte denselben Fehler Error: Undefined variable. Und es werden auch keine Assets in Uploads angezeigt oder als Überschrift hochgeladen.

Muss diese Anleitung aktualisiert werden?

Vielen Dank im Voraus.