Ecrire un thème #

Pour commencer, nous vous recommandons d'utiliser notre générateur pour créer votre premier thème

$ npm init slidev-theme

Ensuite, vous pouvez le modifier et jouer avec. Vous pouvez également vous référer aux thèmes officiels comme exemples.

Aptitude #

Un thème peut contribuer aux points suivants :

• Styles globaux
• Fournir des configurations par défaut (police, schéma de couleurs, surligneurs, etc.)
• Fournir des mises en page personnalisées ou remplacer celle existante
• Fournir des composants personnalisés ou remplacer l'existant
• Étendre les configurations de WindiCSS
• Configurer des outils comme Monaco et Prism

Conventions #

Les thèmes sont publiés dans le registre npm et doivent respecter les conventions ci-dessous :

• Le nom du package doit commencer par slidev-theme-, par exemple : slidev-theme-awesome
• Ajoutez slidev-theme et slidev dans le champ keywords de votre package.json

Installer #

Pour configurer le terrain de jeu de test pour votre thème, vous pouvez créer example.md avec le frontmatter suivant, pour dire à Slidev que vous utilisez le répertoire actuel comme thème.

---
theme: ./
---

En option, vous pouvez également ajouter des scripts à votre package.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"
  }
}

Pour publier votre thème, lancez simplement npm publish et vous êtes prêt à partir. Il n'y a pas de processus de construction requis (ce qui signifie que vous pouvez publier directement les fichiers .vue et .ts, Slidev est assez intelligent pour les comprendre).

Les points de contribution de thème suivent les mêmes conventions que la personnalisation locale, veuillez vous référer à la documentation pour les conventions.

Configurations par défaut #

Disponible depuis v0.19

Un thème peut fournir des configurations par défaut via package.json

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

Les polices seront importées automatiquement depuis Google Fonts.

En savoir plus sur les polices et sur les configurations frontmatter.

Métadonnées du thème #

Color Schema #

Par défaut, Slidev suppose que les thèmes prennent en charge à la fois le mode clair et le mode sombre. Si vous voulez seulement que votre thème soit présenté dans un schéma de couleurs conçu, vous devrez le spécifier explicitement dans package.json

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

Pour accéder au mode sombre lors de la création de vos styles de thème, vous pouvez envelopper le css spécifique au mode sombre dans une classe dark:

/* css general ici */

html:not(.dark) {
  /* css mode clair ici */
}

html.dark {
  /* css mode sombre ici */
}

Slidev bascule une classe dark sur l'élément html de la page pour changer de schéma de couleur.

Surligneur #

Les couleurs de mise en évidence de la syntaxe sont également fournies dans le thème. Nous prenons en charge à la fois Prism et Shiki. Pour plus d'informations, veuillez consulter la documentation sur la coloration syntaxique.

Vous pouvez prendre en charge l'un d'entre eux, ou les deux. Reportez-vous au thème par défaut pour des exemples de configurations ./styles/code.css / ./setup/shiki.ts.

N'oubliez pas non plus de spécifier les surligneurs pris en charge dans votre package.json

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

Version de Slidev #

Si le thème repose sur une fonctionnalité spécifique de Slidev récemment introduite, vous pouvez définir la version minimale de Slidev requise pour que votre thème fonctionne correctement :

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

Si les utilisateurs utilisent des versions plus anciennes de Slidev, une erreur sera générée.