Estructura de directorios
Slidev emplea algunas convenciones de estructura de directorios para minimizar la superficie de configuración y hacer que las extensiones de funcionalidad sean flexibles e intuitivas.
La estructura básica es la siguiente:
tu-slidev/
├── components/ # componentes personalizados
├── layouts/ # plantillas personalizadas
├── public/ # archivos estáticos
├── setup/ # configuración personalizada y hooks de Vue
├── styles/ # estilos personalizados
├── index.html # inyecciones a index.html
├── slides.md # la entrada principal de las diapositivas
├── vite.config.ts # extensiones de la configuración de vite```
Todas ellas son opcionales.
## Componentes
Convenciones: `./components/*.{vue,js,ts,jsx,tsx,md}`
Los componentes dentro de este directorio pueden ser utilizados directamente en las diapositivas Markdown con el mismo nombre de componente que el nombre del archivo.
Por ejemplo:
```bash
tu-slidev/
├── ...
└── components/
├── MyComponent.vue
└── HelloWorld.ts
<!-- slides.md -->
# Mi presentación
<MyComponent :count="4"/>
<!-- ambas formas funcionan -->
<hello-world foo="bar">
Slot
</hello-world>
Esta función usa unplugin-vue-components, aprende más ahí.
Slidev también provee componentes por defecto para tu uso.
Plantillas
Convenciones: ./layouts/*.{vue,js,ts,jsx,tsx}
tu-slidev/
├── ...
└── layouts/
├── cover.vue
└── my-cool-theme.vue
Puedes usar cualquier nombre de archivo para tu diseño. A continuación, haz referencia a tu diseño en tu cabecera YAML utilizando el nombre del archivo.
---
layout: my-cool-theme
---
Si el diseño que proporcionas tiene el mismo nombre que una plantilla por defecto o una plantilla de un tema, tu diseño personalizado tendrá prioridad sobre ellos. El orden de prioridad es local > tema > integrado.
En la plantilla, utilice <slot/> para el contenido de la diapositiva. Por ejemplo:
<!-- default.vue -->
<template>
<div class="slidev-layout default">
<slot />
</div>
</template>
Público
Convenciones: ./public/*
Los activos de este directorio se servirán en la ruta raíz / durante el desarrollo, y se copiarán en la raíz del directorio dist tal cual. Más información sobre el directorio public de Vite.
Estilo
Convenciones: ./style.css | ./styles/index.{css,js,ts}
Los archivos que sigan esta convención se inyectarán en la raíz de la aplicación. Si necesitas importar varias entradas css, puedes crear la siguiente estructura y gestionar tú mismo el orden de importación.
tu-slidev/
├── ...
└── styles/
├── index.ts
├── base.css
├── code.css
└── layouts.css
// styles/index.ts
import './base.css'
import './code.css'
import './layouts.css'
Los estilos serán procesados por Windi CSS y PostCSS, así que puedes usar CSS anidado y directivas @ por defecto. Por ejemplo:
.slidev-layout {
@apply px-14 py-10 text-[1.1rem];
h1, h2, h3, h4, p, div {
@apply select-none;
}
pre, code {
@apply select-text;
}
a {
color: theme('colors.primary');
}
}
index.html
Convenciones: index.html
El index.html ofrece la posibilidad de inyectar etiquetas meta y/o scripts al index.html principal
Por ejemplo, para el siguiente index.html personalizado:
<!-- ./index.html -->
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito+Sans:wght@200;400;600&display=swap" rel="stylesheet">
</head>
<body>
<script src="./your-scripts"></script>
</body>
El index.html final será:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png">
<!-- injected head -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito+Sans:wght@200;400;600&display=swap" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script type="module" src="__ENTRY__"></script>
<!-- injected body -->
<script src="./your-scripts"></script>
</body>
</html>
Global Layers
Conventions: global-top.vue | global-bottom.vue
Learn more: Global Layers