Mi Documentación

Appearance

Configuración ​

Esta página describe las opciones de configuración disponibles en VitePress.

Archivo de Configuración ​

La configuración se define en docs/.vitepress/config.js:

javascript
import { defineConfig } from 'vitepress'

export default defineConfig({
  // Opciones del sitio
  title: 'Mi Documentación',
  description: 'Descripción del sitio',
  
  // Opciones del tema
  themeConfig: {
    // Configuración del tema
  }
})

Opciones del Sitio ​

title ​

  • Tipo: string
  • Por defecto: 'VitePress'

El título del sitio. Se mostrará en la barra de navegación y como sufijo del título de la página.

javascript
export default defineConfig({
  title: 'Mi Documentación'
})

description ​

  • Tipo: string
  • Por defecto: ''

La descripción del sitio. Se usará como meta tag.

javascript
export default defineConfig({
  description: 'Una documentación increíble'
})

lang ​

  • Tipo: string
  • Por defecto: 'en-US'

El atributo lang del sitio.

javascript
export default defineConfig({
  lang: 'es-ES'
})

base ​

  • Tipo: string
  • Por defecto: '/'

La URL base donde se desplegará el sitio.

javascript
export default defineConfig({
  base: '/mi-proyecto/'
})
  • Tipo: HeadConfig[]

Tags adicionales para insertar en el <head>.

javascript
export default defineConfig({
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }]
  ]
})

Opciones del Tema ​

  • Tipo: NavItem[]

Configuración del menú de navegación.

javascript
themeConfig: {
  nav: [
    { text: 'Inicio', link: '/' },
    { text: 'Guía', link: '/guia/' },
    { 
      text: 'Dropdown',
      items: [
        { text: 'Item A', link: '/item-a' },
        { text: 'Item B', link: '/item-b' }
      ]
    }
  ]
}
  • Tipo: Sidebar

Configuración de la barra lateral.

javascript
themeConfig: {
  sidebar: [
    {
      text: 'Guía',
      items: [
        { text: 'Introducción', link: '/guia/introduccion' },
        { text: 'Comenzar', link: '/guia/comenzar' }
      ]
    }
  ]
}
javascript
themeConfig: {
  sidebar: {
    '/guia/': [
      {
        text: 'Guía',
        items: [
          { text: 'Introducción', link: '/guia/introduccion' }
        ]
      }
    ],
    '/api/': [
      {
        text: 'API',
        items: [
          { text: 'Referencia', link: '/api/referencia' }
        ]
      }
    ]
  }
}
javascript
themeConfig: {
  sidebar: [
    {
      text: 'Sección',
      collapsed: false,
      items: [
        { text: 'Item 1', link: '/item-1' }
      ]
    }
  ]
}
  • Tipo: SocialLink[]

Enlaces a redes sociales.

javascript
themeConfig: {
  socialLinks: [
    { icon: 'github', link: 'https://github.com/' },
    { icon: 'twitter', link: 'https://twitter.com/' },
    { icon: 'discord', link: 'https://discord.com/' }
  ]
}
  • Tipo: Footer

Configuración del pie de página.

javascript
themeConfig: {
  footer: {
    message: 'Publicado bajo Licencia MIT.',
    copyright: 'Copyright © 2025-presente'
  }
}
  • Tipo: SearchOptions

Configuración de búsqueda.

javascript
themeConfig: {
  search: {
    provider: 'local',
    options: {
      placeholder: 'Buscar...',
      translations: {
        button: {
          buttonText: 'Buscar',
          buttonAriaLabel: 'Buscar'
        },
        modal: {
          noResultsText: 'No se encontraron resultados',
          resetButtonTitle: 'Limpiar búsqueda',
          footer: {
            selectText: 'seleccionar',
            navigateText: 'navegar'
          }
        }
      }
    }
  }
}
  • Tipo: EditLink

Configuración del enlace de edición.

javascript
themeConfig: {
  editLink: {
    pattern: 'https://github.com/user/repo/edit/main/docs/:path',
    text: 'Editar esta página en GitHub'
  }
}

lastUpdated ​

  • Tipo: LastUpdated

Configuración de la última actualización.

javascript
themeConfig: {
  lastUpdated: {
    text: 'Actualizado el',
    formatOptions: {
      dateStyle: 'full',
      timeStyle: 'medium'
    }
  }
}
  • Tipo: string

Logo del sitio.

javascript
themeConfig: {
  logo: '/logo.svg'
}

siteTitle ​

  • Tipo: string | false

Texto del título del sitio en la barra de navegación. Si es false, el título estará oculto.

javascript
themeConfig: {
  siteTitle: 'Mi Sitio'
}

Markdown ​

markdown.lineNumbers ​

  • Tipo: boolean
  • Por defecto: false

Mostrar números de línea en bloques de código.

javascript
export default defineConfig({
  markdown: {
    lineNumbers: true
  }
})

markdown.theme ​

  • Tipo: string | { light: string, dark: string }
  • Por defecto: 'material-theme-palenight'

Tema de resaltado de sintaxis.

javascript
export default defineConfig({
  markdown: {
    theme: {
      light: 'github-light',
      dark: 'github-dark'
    }
  }
})

Build ​

build.outDir ​

  • Tipo: string
  • Por defecto: '.vitepress/dist'

Directorio de salida para la construcción.

javascript
export default defineConfig({
  build: {
    outDir: '../dist'
  }
})

Ejemplo Completo ​

Aquí hay un ejemplo de configuración completa:

javascript
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'Mi Documentación',
  description: 'Documentación completa del proyecto',
  lang: 'es-ES',
  base: '/',
  
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }]
  ],
  
  markdown: {
    lineNumbers: true,
    theme: {
      light: 'github-light',
      dark: 'github-dark'
    }
  },
  
  themeConfig: {
    logo: '/logo.svg',
    siteTitle: 'Mi Proyecto',
    
    nav: [
      { text: 'Inicio', link: '/' },
      { text: 'Guía', link: '/guia/' },
      { text: 'API', link: '/api/' }
    ],
    
    sidebar: {
      '/guia/': [
        {
          text: 'Introducción',
          collapsed: false,
          items: [
            { text: 'Qué es', link: '/guia/introduccion' },
            { text: 'Comenzar', link: '/guia/inicio-rapido' }
          ]
        }
      ]
    },
    
    socialLinks: [
      { icon: 'github', link: 'https://github.com/' }
    ],
    
    footer: {
      message: 'Publicado bajo Licencia MIT',
      copyright: 'Copyright © 2025-presente'
    },
    
    search: {
      provider: 'local'
    },
    
    editLink: {
      pattern: 'https://github.com/user/repo/edit/main/docs/:path',
      text: 'Editar en GitHub'
    },
    
    lastUpdated: {
      text: 'Actualizado el',
      formatOptions: {
        dateStyle: 'short',
        timeStyle: 'short'
      }
    }
  }
})

Próximos Pasos ​

Documentación del proyecto

Copyright © 2025