Erstellen und Teilen einer Schriftart-Themenkomponente

[Discourse]

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

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

Ein neues Git-Repository mit der Schriftart erstellen

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

Fügen Sie für about.json eine Skelett-Konfigurationsdatei hinzu:

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

Fügen Sie eine LICENSE-Datei hinzu. Ich verwende üblicherweise die MIT-Lizenz.

vim LICENSE

Die Schriftart herunterladen

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

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

CSS hinzufügen, das das Theme verwendet

mkdir common
cd common

Erstellen Sie eine Datei namens common.scss mit folgendem Inhalt:

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

body {
  font-family: Roboto;
}

Änderungen an GitHub pushen

Stellen Sie alle Ihre Änderungen ein:

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

Erstellen Sie ein Konto auf GitHub.com und richten Sie dann ein neues Repository ein.

(Optional) Ein Topic auf Discourse erstellen, um über Ihre Farben zu diskutieren

Idealerweise erstellen Sie ein Topic in der Kategorie #plugin:theme mit einigen Screenshots Ihres Farbschemas. Dies verwenden Sie dann als Ihre about_url.

Die fehlenden Informationen in Ihrer about.json-Datei ergänzen

• Navigieren Sie zu Ihrer LICENSE-Seite auf GitHub und tragen Sie diese URL als license_url ein.

• Verwenden Sie entweder die GitHub-Projekt-URL oder die Discourse-Topic-URL als about_url.

Am Ende des Vorgangs sieht Ihre about.json-Datei ungefähr so aus:

{
  "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"
  }
}

Stellen Sie die Änderung ein und pushen Sie sie zu GitHub:

git commit -am "added more details"
git push

Ihre Schriftart-Komponente testen

• Importieren Sie Ihr Theme auf dem Bildschirm admin/customize/theme von GitHub.

Sie können jetzt ganz einfach Schriftarten teilen!

Siehe auch:

Structure of themes and theme components

Discourse supports native themes that can be sourced from a .tar.gz archive or from a remote git repository including private repositories. [56] An example theme is at: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub [32] The git repository will be checked for updates (once a day), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme you need to foll…

---

Dieses Dokument ist versionskontrolliert – schlagen Sie Ä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.