Erstelle ein Thema #

Wir empfehlen unseren Generator zu nutzten, um ein Gerüst für das Thema zu erstellen:

$ npm init slidev-theme

Jetzt kann man alles verändern und mit dem code spielen. Man kann sich auch auf Beispiele von den Offiziellen Themen beziehen.

Möglichkeiten #

Ein Thema kann folgende Punkte anpassen:

• Globale Styles
• Standardkonfigurationen bereitstellen (Schriften, Farbschema, Highlighters, etc.)
• benutzerdefinierte Layouts bereitstellen oder vorhandene überschreiben
• benutzerdefinierte Komponenten bereitstellen oder vorhandene überschreiben
• Windi CSS-Konfigurationen erweitern
• Tools wie Monaco und Prism konfigurieren

Konventionen #

Themen werden im npm Registry veröffentlicht und sollten folgenden Konventionen folgen:

• Der Paketname sollte mit slidev-theme- beginnen, zum Beispiel: slidev-theme-awesome.
• slidev-theme und slidev sollte in den keywords der package.json Datei enthalten sein.

Einrichtung #

Um den Testspielplatz für das Thema einzurichten, kann man eine example.md Datei mit folgendem Inhalt erstellen, damit Slidev weiß, dass dieser Ordner als Thema genutzt werden soll:

---
theme: ./
---

Optional, kann man Skripte zur packages.json Datei hinzufügen.

// package.json
{
  "scripts": {
    "dev": "slidev example.md",
    "build": "slidev build example.md",
    "export": "slidev export example.md",
    "screenshot": "slidev export example.md --format png"
  }
}

Um das Thema zu veröffentlichen, muss nur der npm publish Befehl ausgeführt werden. Es wird kein Build-Prozess benötigt (man kann die .vue und .ts Datei direkt veröffentlichen, Slidev ist clever genug, um das Thema zu verstehen).

Thema Kontribution folgt den selben Punkten, wie die Konventionen bei lokalen Anpassungen, in der Dokumentation steht mehr über Namenskonventionen.

Standardkonfigurationen #

Verfügabr seit v0.19

Ein Thema kann Standardkonfigurationen in der package.json Datei bereitstellen.

// package.json
{
  "slidev": {
    "default": {
      "aspectRatio": "16/9",
      "canvasWidth": 980,
      "fonts": {
        "sans": "Robot",
        "mono": "Fira Code"
      }
    }
  }
}

Schriftarten werden automatisch von Google Fonts importiert.

Erfahre mehr über Schriftarten und Frontmatter konfigurationen.

Thema-Metadaten #

Farbschema #

Standartmäßig geht Slidev davon aus, dass das Thema Dark- und Lightmode unterstützt. Wenn man möchte, dass das Thema in einem bestimmten Farbschema präsentiert wird, kann dies in der package.jsonDatei angegeben werden.

// package.json
{
  "name": "slidev-theme-my-cool-theme",
  "keywords": [
    "slidev-theme",
    "slidev"
  ],
  "slidev": {
    "colorSchema": "light" // oder "dark" oder "both"
  }
}

Alle Styles, die Darkmode spezifisch sind, können in einer dark CSS Klasse untergebracht werden:

/* Allgemeines css hier */

html:not(.dark) {
  /* Lightmode CSS hier */
}

html.dark {
  /* Darkmode CSS hier */
}

Slidev schaltet die dark CSS Klasse am html Element der Seite um, um das Farbschema zu wechseln.

Highlighter #

Syntaxhervorhebungs-Farben können auch im Thema bereit gestellt werden. Wir unterstützen sowohl Prism als auch Shiki. Weitere Informationen sind in den Syntax-Highlighting Dokumentationen.

Dein Thema kann entweder einen der beide oder beide unterstützen. Konfigurationsbeispiele sind im Standard-Thema ./styles/code.css / ./setup/shiki.ts zu finden.

Denke auch daran, unterstützte Highlighters in der package.json Datei anzugeben.

// package.json
{
  "slidev": {
    "highlighter": "shiki" // oder "prism" oder "all"
  }
}

Slidev Version #

Falls das Thema auf einer bestimmten Slidev Funktion basiert, kann die minimale Slidev Version angegeben werden:

// package.json
{
  "engines": {
    "slidev": ">=0.19.3"
  }
}

Falls Benutzer eine ältere Version von Slidev nutzen, wird ein Fehler ausgeworfen.