✏️ Crear Contenidos

Los contenidos son páginas Markdown dentro de src/{unidad}/contenidos/.

Crear un contenido nuevo

1. Crear el archivo:

# Ejemplo para la unidad 'general'
touch src/general/contenidos/4-tema-nuevo.md

2. Añadir front-matter:

---
layout: doc
title: Tema Nuevo
sidebar: true
outline: [2, 3]
---

# 4. Tema Nuevo

Tu contenido aquí...

3. Registrar en src/.vitepress/config/units.ts:

const baseNavbar: DefaultTheme.NavItem[] = [
  {
    text: '📚 Contenidos',
    items: [
      { text: '1. Introducción', link: '/contenidos/1-introduccion' },
      { text: '4. Tema Nuevo', link: '/contenidos/4-tema-nuevo' },  // ⭐ nuevo
    ]
  }
]

const baseSidebar: DefaultTheme.SidebarItem[] = [
  {
    text: '📚 Contenidos',
    collapsed: true,
    items: [
      { text: '1. Introducción', link: '/contenidos/1-introduccion' },
      { text: '4. Tema Nuevo', link: '/contenidos/4-tema-nuevo' },  // ⭐ nuevo
    ]
  }
]

Bloques disponibles en Markdown

Bloques de información

::: info-box Título opcional
Contenido informativo general.
:::

::: note-box
Una nota de contexto o aclaración.
:::

::: accent-box
Destacado especial, elemento clave.
:::

::: tip-box Consejo
Sugerencia práctica para el alumnado.
:::

::: warning-box Atención
Advertencia sobre un error común.
:::

::: danger-box Peligro
Error crítico o acción irreversible.
:::

Pestañas

::: tabs
== Opción A
Contenido de la primera pestaña.

== Opción B
Contenido de la segunda pestaña.
:::

Citas

> Una cita inspiradora o reflexión de contexto.

Diagramas Mermaid

Envuelve el bloque en <div v-pre> para evitar conflictos de renderizado de Vue:

<div v-pre>

```mermaid
graph TD
  A[Inicio] --> B[Proceso]
  B --> C[Fin]
` ``

</div>

Imágenes centradas

Usa el sufijo #center en el atributo alt de la imagen:

![Descripción del esquema #center](/img/contenidos/general/mi-imagen.jpg)

Bloques en diapositivas (SlidesViewer)

Todos los bloques anteriores funcionan también dentro de <SlidesViewer> y se adaptan automáticamente al tamaño de la diapositiva. → Ver Crear Diapositivas.

Componentes Vue adicionales

Disponibles fuera de slides en cualquier página layout: doc:

<Badge text="Importante" />

<Button text="Descargar" href="/archivo.pdf" />

<Quote>
Una cita inspiradora aquí
</Quote>

<TwoColumns>
  <template #left>Columna izquierda</template>
  <template #right>Columna derecha</template>
</TwoColumns>

Siguiente paso: Crear Diapositivas