Erstellen und teilen eines Schriftart-Themenkomponente

[Discourse]

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

Dies ermöglicht es Themenautoren, 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-Themenkomponente",
  "about_url": "",
  "license_url": "",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

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

vim LICENSE

Schriftart herunterladen

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

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

CSS hinzufügen, 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;
}

Änderungen auf GitHub pushen

Überprüfe alle deine Änderungen:

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

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

(Optional) Erstelle ein Thema auf Discourse als Zuhause für die Diskussion deiner Farben

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 und 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 in etwa so aussehen:

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

Überprüfe die Änderung und pushe auf GitHub

git commit -am "Weitere Details hinzugefügt"
git push

Teste deine Schriftartenkomponente

• Importiere dein Thema auf der Seite admin/customize/theme 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 versioniert - 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.