Erstelle und teile eine Font-Theme-Komponente

[Discourse]

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

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

Erstellen eines neuen Git-Repositorys mit der Schriftart

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 component",
  "about_url": "",
  "license_url": "",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

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

vim LICENSE

Herunterladen der Schriftart

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

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

Hinzufügen von CSS, das das Theme verwendet

mkdir common
cd common

Erstellen Sie eine Datei namens common.scss mit

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

body {
  font-family: Roboto;
}

Änderungen auf GitHub pushen

Übernehmen Sie alle Ihre Änderungen:

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 erstellen Sie dann ein neues Repository.

(Optional) Erstellen eines Themas auf Discourse als Heimat für die Diskussion Ihrer Farben

Idealerweise würden Sie ein Thema in der Kategorie #plugin:theme mit einigen Screenshots Ihres Farbschemas erstellen. Dies werden Sie als Ihre about_url verwenden.

Fehlende Informationen in Ihrer about.json-Datei ausfüllen

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

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

Am Ende des Prozesses wird Ihre about.json-Datei etwa so aussehen:

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

Änderungen übernehmen und auf GitHub pushen

git commit -am "added more details"
git push

Testen Ihrer Schriftartkomponente

• Im Bildschirm admin/customize/theme importieren Sie Ihr 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 [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 follow a spec…

---

Dieses Dokument wird versioniert – 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 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.