Erstellen und teilen Sie ein Schriftart-Themen-Komponente

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

Push die Änderungen zu GitHub

Ü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, um deine Farben zu diskutieren

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

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

• Gehe 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 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"
  }
}

Überprüfe die Änderung und pushe zu GitHub

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

Teste deine Schriftarten-Komponente

• Importiere dein Theme von GitHub im Bildschirm admin/customize/theme

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.