11 KiB

Raw Permalink Blame History

Configuración del Tema Predeterminado

La configuración del tema te permite personalizar tu tema. puedes definir la configuración del tema a través de la opción themeConfig en el archivo de configuración:

export default {
  lang: 'pt-BR',
  title: 'VitePress',
  description: 'Generador de site estático Vite & Vue.',

  // Configuraciones relacionadas con el tema.
  themeConfig: {
    logo: '/logo.svg',
    nav: [...],
    sidebar: { ... }
  }
}

Las opciones documentadas de esta página se aplican unicamente al tema por defecto. Diferentes temas esperan configuraciones diferentes de tema. Cuando se utiliza un tema personalizado, el objeto de configuración del tema se pasará al tema para que se puedan definir comportamientos condicionales.

i18nRouting

Tipo: boolean

Cambie la configuración a, por ejemplo, zh será alterado para URL /foo (ou /en/foo/) para /zh/foo. Puedes desactivar este comportamiento configurado themeConfig.i18nRouting como false.

logo

Tipo: ThemeableImage

Archivo de logotipo que se mostrará en la barra de navegación, justo antes del título del sitio. Acepta una ruta de cadena o un objeto para definir un logotipo diferente para los modos claro/oscuro.

export default {
  themeConfig: {
    logo: '/logo.svg'
  }
}

type ThemeableImage =
  | string
  | { src: string; alt?: string }
  | { light: string; dark: string; alt?: string }

siteTitle

Tipo: string | false

Puedes personalizar este elemento para reemplazar el título del sitio predeterminado (title en configuración de la aplicación) en navegación. Cuando se establece como false, el título en la navegación quedará deshabilitado. Útil cuando tienes un logo que ya contiene el título del sitio.

export default {
  themeConfig: {
    siteTitle: 'Hola mundo'
  }
}

nav

Tipo: NavItem

La configuración del elemento del menú de navegación. Más detalles en Tema Predeterminado: Navegación.

export default {
  themeConfig: {
    nav: [
      { text: 'Guia', link: '/guide' },
      {
        text: 'Menú Dropdown',
        items: [
          { text: 'Item A', link: '/item-1' },
          { text: 'Item B', link: '/item-2' },
          { text: 'Item C', link: '/item-3' }
        ]
      }
    ]
  }
}

type NavItem = NavItemWithLink | NavItemWithChildren

interface NavItemWithLink {
  text: string
  link: string
  activeMatch?: string
  target?: string
  rel?: string
  noIcon?: boolean
}

interface NavItemChildren {
  text?: string
  items: NavItemWithLink[]
}

interface NavItemWithChildren {
  text?: string
  items: (NavItemChildren | NavItemWithLink)[]
  activeMatch?: string
}

sidebar

Tipo: Sidebar

La configuración del elemento del menú de la barra lateral. Más detalles en Tema Predeterminado: Barra Lateral.

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Guia',
        items: [
          { text: 'Introducción', link: '/introduction' },
          { text: 'A partir de', link: '/getting-started' },
          ...
        ]
      }
    ]
  }
}

export type Sidebar = SidebarItem[] | SidebarMulti

export interface SidebarMulti {
  [path: string]: SidebarItem[]
}

export type SidebarItem = {
  /**
   * El rotulo del item.
   */
  text?: string

  /**
   * El link del item.
   */
  link?: string

  /**
   * Los hijos del item.
   */
  items?: SidebarItem[]

  /**
   * Si no se especifica, el grupo no es retráctil.
   *
   * Si es 'true', el grupo se puede contraer y está contraído de forma predeterminada.
   *
   * Si es 'false', el grupo se puede contraer pero se expande de forma predeterminada.
   */
  collapsed?: boolean
}

aside

Tipo: boolean | 'left'
Estandar: true
Puede ser anulado por la página a través de frontmatter

Definir este valor como false evita que se muestre el elemento lateral.
Definir este valor como true presenta el lado de la derecha.
Definir este valor como left presenta el lado de la izquierda.

Si desea deshabilitarlo para todas las vistas, debe usar outline: false en vez de eso.

outline

Tipo: Outline | Outline['level'] | false
El nivel se puede superponer por página mediante frontmatter

Definir este valor como false evita que el elemento se muestre outline. Consulte la interfaz para más detalles:

interface Outline {
  /**
   * Los niveles de título que se mostrarán en el esquema.
   * Un solo número significa que solo se mostrarán los títulos de ese nivel.
   * Si se pasa una tupla, el primer número es el nivel mínimo y el segundo número es el nivel máximo.
   * `'deep'` es lo mismo que `[2, 6]`, lo que significa que todos los titulos `<h2>` a `<h6>` serán mostrados.
   *
   * @default 2
   */
  level?: number | [number, number] | 'deep'

  /**
   * El titulo que se mostrará en el equema.
   *
   * @default 'On this page'
   */
  label?: string
}

socialLinks

Tipo: SocialLink[]

Puedes configurar esta opción para mostrar enlaces de redes sociales con íconos en la navegación.

export default {
  themeConfig: {
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      { icon: 'twitter', link: '...' },
      // También puedes agregar íconos personalizados pasando SVG como string:
       {
        icon: {
          svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
        },
        link: '...',
        // También puedes incluir una etiqueta personalizada de accesibilidad (opcional pero recomendada):
        ariaLabel: 'cool link'
      }
    ]
  }
}

interface SocialLink {
  icon: SocialLinkIcon
  link: string
  ariaLabel?: string
}

type SocialLinkIcon =
  | 'discord'
  | 'facebook'
  | 'github'
  | 'instagram'
  | 'linkedin'
  | 'mastodon'
  | 'npm'
  | 'slack'
  | 'twitter'
  | 'x'
  | 'youtube'
  | { svg: string }

footer

Tipo: Footer
Se puede superponer por página mediante frontmatter

Configuración de pie de página. Puede agregar un mensaje o texto de derechos de autor en el pie de página; sin embargo, solo se mostrará cuando la página no contenga una barra lateral. Esto se debe a preocupaciones de diseño.

export default {
  themeConfig: {
    footer: {
      message: 'Publicado bajo la licencia MIT.',
      copyright: 'Derechos de autor © 2019-presente Evan You'
    }
  }
}

export interface Footer {
  message?: string
  copyright?: string
}

editLink

Tipo: EditLink
Se puede superponer por página mediante frontmatter

EditLink le permite mostrar un enlace para editar la página en los servicios de administración Git, como GitHub o GitLab. Consulte Tema por defecto: Editar Link para más detalles.

export default {
  themeConfig: {
    editLink: {
      pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
      text: 'Editar esta página en GitHub'
    }
  }
}

export interface EditLink {
  pattern: string
  text?: string
}

lastUpdated

Tipo: LastUpdatedOptions

Permite la personalización del formato de fecha y texto actualizado por ultima vez.

export default {
  themeConfig: {
    lastUpdated: {
      text: 'Actualizado en',
      formatOptions: {
        dateStyle: 'full',
        timeStyle: 'medium'
      }
    }
  }
}

export interface LastUpdatedOptions {
  /**
   * @default 'Last updated'
   */
  text?: string

  /**
   * @default
   * { dateStyle: 'short',  timeStyle: 'short' }
   */
  formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean }
}

algolia

Tipo: AlgoliaSearch

Una opción para dar soporte para buscar en su sitio de documentación usando Algolia DocSearch. Obtenga más información en Tema predeterminado: Buscar.

export interface AlgoliaSearchOptions extends DocSearchProps {
  locales?: Record<string, Partial<DocSearchProps>>
}

Ver todas las opciones aquí.

carbonAds

Tipo: CarbonAdsOptions

Una opción para mostrar Carbon Ads.

export default {
  themeConfig: {
    carbonAds: {
      code: 'su-código-carbon',
      placement: 'su-colocación-carbon'
    }
  }
}

export interface CarbonAdsOptions {
  code: string
  placement: string
}

Obtenga más información en Tema Predeterminado: Carbon Ads.

docFooter

Tipo: DocFooter

Se puede utilizar para personalizar el texto que aparece encima de los enlaces anterior y siguiente. Útil si no estás escribiendo documentación en inglés. También se puede utilizar para desactivar globalmente los enlaces anteriores/siguientes. Si desea habilitar/deshabilitar selectivamente enlaces anteriores/siguientes, puede usar frontmatter.

export default {
  themeConfig: {
    docFooter: {
      prev: 'Página anterior',
      next: 'Próxima página'
    }
  }
}

export interface DocFooter {
  prev?: string | false
  next?: string | false
}

darkModeSwitchLabel

Tipo: string
Estandar: Appearance

Se puede utilizar para personalizar la etiqueta del botón del modo oscuro. Esta etiqueta solo se muestra en la vista móvil.

lightModeSwitchTitle

Tipo: string
Estandar: Switch to light theme

Se puede utilizar para personalizar el título del botón borrar que aparece al pasar el mouse.

darkModeSwitchTitle

Tipo: string
Estandar: Switch to dark theme

Se puede utilizar para personalizar el título del botón del modo oscuro que aparece al pasar el mouse.

sidebarMenuLabel

Tipo: string
Estandar: Menu

Se puede utilizar para personalizar la etiqueta del menú de la barra lateral. Esta etiqueta solo se muestra en la vista móvil.

returnToTopLabel

Tipo: string
Estandar: Return to top

Se puede utilizar para personalizar la etiqueta del botón Volver al principio. Esta etiqueta solo se muestra en la vista móvil.

langMenuLabel

Tipo: string
Estandar: Change language

Se puede utilizar para personalizar la etiqueta aria del botón de idioma en la barra de navegación. Esto sólo se usa si estás usando i18n.

externalLinkIcon

Tipo: boolean
Estandar: false

Se debe mostrar um ícono de link externo junto a los enlaces externos en markdown.

11 KiB Raw Permalink Blame History