Navegación

Refiriéndose a la barra de navegación que se muestra en la parte superior de la página. Contiene el título del sitio, enlaces del menú global, etc.

Título y logotipo del sitio

Por defecto, la navegación muestra el título del sitio que hace referencia al valor de config.title. Si desea cambiar lo que se muestra en la navegación, puede configurar un texto personalizado en el themeConfig.siteTitle.

export default {
  themeConfig: {
    siteTitle: 'Mi Título Personalizado'
  }
}

Si tiene un logotipo para su sitio web, puede mostrarlo pasando la ruta a la imagen. Debes colocar el logo directamente dentro de la carpeta. public, y establezca la ruta absoluta hacia él.

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

Cuando agrega un logotipo, se muestra junto con el título del sitio. Si su logotipo tiene todo lo que necesita y desea ocultar el texto del título, configure false en la opción siteTitle.

export default {
  themeConfig: {
    logo: '/my-logo.svg',
    siteTitle: false
  }
}

También puedes pasar un objeto como logotipo si quieres agregar un atributo. alt o personalizarlo según el modo claro/oscuro. Consultar themeConfig.logo para obtener más detalles.

Links de Navegación

Puedes configurar la opción themeConfig.nav para añadir enlaces a tu navegación.

export default {
  themeConfig: {
    nav: [
      { text: 'Guia', link: '/guide' },
      { text: 'Configuración', link: '/config' },
      { text: 'Registro de Cambios', link: 'https://github.com/...' }
    ]
  }
}

text es el texto que se muestra en la navegación, y el link es el link al que será navegando cuando se hace click en el texto. Para el enlace, establezca la ruta al archivo sin el prefijo .md y siempre comenzar por /.

Links de navegación también pueden ser menus dropdown. Para hacer eso, establezca la clave de items en la opción del link.

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' }
        ]
      }
    ]
  }
}

Tenga en cuenta que el titulo del menú dropdown (Menu Dropdown en el ejemplo anterior) no puede tener una propiedad link, ya que se convierte en un botón para abrir el cuadro del dialogo dropdown.

También puedes agregar "secciones" a los elementos del menú dropdown pasando más elementos anidados.

export default {
  themeConfig: {
    nav: [
      { text: 'Guia', link: '/guia' },
      {
        text: 'Menú Dropdown',
        items: [
          {
            // Título da seção.
            text: 'Título de la sección A',
            items: [
              { text: 'Item A de la sección A', link: '...' },
              { text: 'Item B de la sección B', link: '...' }
            ]
          }
        ]
      },
      {
        text: 'Menú Dropdown',
        items: [
          {
            // También puedes omitir el título
            items: [
              { text: 'Item A da Seção A', link: '...' },
              { text: 'Item B da Seção B', link: '...' }
            ]
          }
        ]
      }
    ]
  }
}

Personaliza el estado "activo" del link

Los elementos del menú de navegación se resaltarán cuando la página actual esté en la ruta correspondiente. Si desea personalizar la ruta que debe coincidir, establezca la propiedad activeMatch el regex como um valor en string.

export default {
  themeConfig: {
    nav: [
      // Este link esta en estado activo cuando
      // el usuario esta en el camino `/config/`.
      {
        text: 'Guia',
        link: '/guide',
        activeMatch: '/config/'
      }
    ]
  }
}

WARNING

activeMatch Debería ser un string regex, pero deberías definirla como un string. No podemos usar un objeto RegExp real aquí porque no es serializable durante el tiempo de construcción.

Personalizar los atributos "target" y "rel" de links

Por defecto, VitePress determina automáticamente lod atributos target y rel en función de si existe un enlace externo o no. Pero si quieres, también puedes personalizarlos.

export default {
  themeConfig: {
    nav: [
      {
        text: 'Merchandise',
        link: 'https://www.thegithubshop.com/',
        target: '_self',
        rel: 'sponsored'
      }
    ]
  }
}

Links Scociales

Consulte socialLinks.