Δημιουργήστε ένα Θέμα

Για να ξεκινήσετε, σας προτείνουμε να χρησιμοποιήσετε τη γεννήτριά μας για να δημιουργήσετε τον σκελετό του πρώτου σας θέματος

$ npm init slidev-theme

Στη συνέχεια, μπορείτε να το τροποποιήσετε και να παίξετε μαζί του. Μπορείτε επίσης να ανατρέξετε στα επίσημα θέματα για παραδείγματα.

Δυνατότητες

Ένα θέμα μπορεί να συμβάλλει στα ακόλουθα σημεία:

• Global styles
• Παροχή προεπιλεγμένων ρυθμίσεων (γραμματοσειρές, χρωματικό σχήμα, επισημαντήρες, κτλ.)
• Παροχή προσαρμοσμένων layouts ή παράκαμψη των υπαρχόντων
• Παροχή προσαρμοσμένων components ή παράκαμψη των υπαρχόντων
• Επέκταση ρυθμίσεων του UnoCSS/Windi CSS
• Ρύθμιση εργαλείων όπως Monaco και Prism

Συμβάσεις

Τα θέματα δημοσιεύονται στο μητρώο npm, και θα πρέπει να ακολουθούν τις παρακάτω συμβάσεις:

• Το όνομα του πακέτου πρέπει να αρχίζει με slidev-theme-, για παράδειγμα: slidev-theme-awesome
• Προσθέστε slidev-theme και slidev στο πεδίο keywords του package.json σας

Στήσιμο

Για να στήσετε το πεδίο δοκιμών για το θέμα σας, μπορείτε να δημιουργήσετε example.md με το ακόλουθο frontmatter, για να πείτε στο Slidev ότι χρησιμοποιείτε τον τρέχοντα φάκελο ως θέμα.

---
theme: ./
---

Προαιρετικά, μπορείτε επίσης να προσθέσετε κάποια scripts στο packages.json σας

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

Για να δημοσιεύσετε το θέμα σας, απλά εκτελέστε npm publish και είστε έτοιμοι. Δεν απαιτείται διαδικασία κατασκευής (που σημαίνει ότι μπορείτε να δημοσιεύσετε απευθείας αρχεία .vue και .ts, το Slidev είναι αρκετά έξυπνο για να τα καταλάβει).

Τα σημεία συνεισφοράς του θέματος ακολουθούν τις ίδιες συμβάσεις με την τοπική ρυθμίση, παρακαλούμε ανατρέξτε στις οδηγίες για τις συμβάσεις ονομασίας.

Προεπιλεγμένες Ρυθμίσεις

Διαθέσιμο από v0.19

Ένα θέμα μπορεί να παρέχει προεπιλεγμένες ρυθμίσεις μέσω του package.json.

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

Οι γραμματοσειρές θα εισαχθούν αυτόματα από το Google Fonts.

Μάθετε περισσότερα για τις γραμματοσειρές και τις ρυθμίσεις frontmatter.

Μεταδεδομένα θέματος

Χρωματικό Σχήμα

Εξ ορισμού, το Slidev υποθέτει ότι τα θέματα υποστηρίζουν τόσο τη φωτεινή όσο και τη σκοτεινή λειτουργία. Αν θέλετε το θέμα σας να παρουσιάζεται μόνο σε ένα σχεδιασμένο χρωματικό σχήμα, θα πρέπει να το καθορίσετε ρητά στο package.json

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

Για να αποκτήσετε πρόσβαση στη σκοτεινή λειτουργία κατά τη δημιουργία των στυλ του θέματός σας, μπορείτε να τυλίξετε το css ειδικά για τη σκοτεινή λειτουργία μέσα σε ένα dark class:

/* γενικό css εδώ */

html:not(.dark) {
  /* φωτεινή λειτουργία css εδώ */
}

html.dark {
  /* σκοτεινή λειτουργία css εδώ */
}

Το Slidev εναλλάσσει ένα dark class στο στοιχείο html της σελίδας για εναλλαγή χρωματικού σχήματος.

Επισημαντήρας

Τα χρώματα επισήμανσης σύνταξης παρέχονται επίσης στο θέμα. Υποστηρίζουμε και Prism και Shiki. Για περισσότερες πληροφορίες ανατρέξτε στις οδηγίες επισήμανσης σύνταξης.

Μπορείτε να υποστηρίξετε ένα από τα δύο ή και τα δύο. Ανατρέξτε στο προεπιλεγμένο θέμα για παραδείγματα ρυθμίσεων ./styles/code.css / ./setup/shiki.ts.

Επίσης, θυμηθείτε να καθορίσετε τους υποστηριζόμενους επισημαντήρες στο package.json σας

// package.json
{
  "slidev": {
    "highlighter": "shiki" // ή "prism" ή "both"
  }
}

Έκδοση Slidev

Εάν το θέμα βασίζεται σε ένα συγκεκριμένο χαρακτηριστικό του Slidev που εισάχθηκε πρόσφατα, μπορείτε να ορίσετε την ελάχιστη έκδοση του Slidev που απαιτείται για να λειτουργεί σωστά το θέμα σας:

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

Εάν οι χρήστες χρησιμοποιούν παλαιότερες εκδόσεις του Slidev, θα εμφανιστεί ένα σφάλμα.