Escribir un tema #

Para empezar, te recomendamos que utilices nuestro generador para armar tu primer tema

$ npm init slidev-theme

Luego puedes modificar y jugar con él. También puede consultar los temas oficiales como ejemplos.

Capacidad #

Un tema puede contribuir a los siguientes puntos:

• Estilos globales
• Proporcionar configuraciones por defecto (fuentes, esquema de colores, resaltadores, etc.)
• Proporcionar diseños personalizados o anular los existentes
• Proporcionar componentes personalizados o anular los existentes
• Extender las configuraciones de Windi CSS
• Configurar herramientas como Monaco y Prism

Convenciones #

Los temas se publican en el registro npm, y deben seguir las siguientes convenciones:

• El nombre del paquete debe empezar por slidev-theme-, por ejemplo: slidev-theme-awesome.
• Añade slidev-theme y slidev en el campo keywords de tu package.json.

Configuración #

Para configurar el campo de pruebas para su tema, puede crear example.md con el siguiente frontmatter, para decirle a Slidev que estás usando el directorio actual como un tema.

---
theme: ./
---

Opcionalmente, también puedes añadir algunos scripts a tu 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"
  }
}

Para publicar tu tema, simplemente ejecuta npm publish y estarás listo. No se requiere ningún proceso de transpilación (lo que significa que puedes publicar directamente los archivos .vue y .ts, Slidev es lo suficientemente inteligente como para entenderlos).

Los puntos de contribución del tema siguen las mismas convenciones que la personalización local, por favor consulta los documentos para las convenciones de nomenclatura.

Configuraciones por defecto #

Disponible desde v0.19

Un tema puede proporcionar por defecto configuraciones vía package.json.

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

Las fuentes se importarán automáticamente desde Google Fonts.

Aprende más sobre las fuentes y configuraciones de front matter.

Metadatos del tema #

Esquema de colores #

Por defecto, Slidev asume que los temas soportan tanto el modo claro como el modo oscuro. Si sólo quieres que tu tema se presente en un esquema de color diseñado, tendrás que especificarlo explícitamente en package.json.

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

Para acceder al modo oscuro al crear tus estilos de tema, puedes envolver el css específico del modo oscuro dentro de una clase dark:

/* css general aquí */

html:not(.dark) {
  /* css del modo claro aquí */
}

html.dark {
  /* css del modo oscuro aquí */
}

Slidev alterna una clase dark en el elemento html de la página para cambiar el esquema de color.

Resaltador #

Los colores de resaltado de sintaxis también se proporcionan en el tema. Soportamos tanto Prism como Shiki. Para más información, consulte los documentos de resaltado de sintaxis.

Puedes soportar uno de ellos, o ambos. Consulta el tema por defecto para los ejemplos de configuración ./styles/prism.css / ./setup/shiki.ts.

Además, recuerda especificar los resaltadores compatibles en su package.json.

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

Versión de Slidev #

Si el tema depende de una característica específica de Slidev que se ha introducido recientemente, puedes establecer la versión mínima de Slidev necesaria para que tu tema funcione correctamente:

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

Si los usuarios utilizan versiones anteriores de Slidev, se producirá un error.