Identidad visual

La identidad visual controla los elementos que los lectores ven primero: logos, favicons y enlaces de navegación. Todo es compatible con variantes de modo claro/oscuro.

Logo

Añade tu logo al encabezado de navegación:

{
  "logo": {
    "light": "/images/logo-light.webp",
    "dark": "/images/logo-dark.webp",
    "href": "https://yourcompany.com"
  }
}

Dimensiones del logo

Los logos se muestran con un ancho máximo de 120px. Para mejores resultados:

• Ancho: 120-240px
• Alto: 30-40px
• Formato: SVG preferido

Favicon

Una imagen para ambos modos:

{
  "favicon": "/images/favicon.svg"
}

O una variante separada para cada modo:

{
  "favicon": {
    "light": "/images/favicon.svg",
    "dark": "/images/favicon-dark.svg"
  }
}

El favicon light se muestra en modo claro; dark se muestra en modo oscuro. dark es opcional — si se omite, se usa light en ambos modos. Jamdesk emite un <link rel="icon"> para el favicon principal más un segundo enlace con media="(prefers-color-scheme: dark)" para la variante oscura.

Formatos admitidos: SVG, PNG, ICO.

Nombre del sitio

El campo name aparece en las pestañas del navegador y en los resultados de búsqueda:

{
  "name": "Acme Docs",
  "description": "Documentation for the Acme API"
}

Enlaces de navegación

Añade enlaces a tu barra de navegación:

{
  "navbar": {
    "links": [
      { "label": "Blog", "href": "https://yourcompany.com/blog" },
      { "label": "Pricing", "href": "https://yourcompany.com/pricing" }
    ],
    "primary": {
      "type": "button",
      "label": "Get Started",
      "href": "https://app.yourcompany.com/signup"
    }
  }
}

Opciones de enlace

Botón principal

El campo primary crea un botón de llamada a la acción destacado:

{
  "primary": {
    "type": "button",
    "label": "Dashboard",
    "href": "https://app.yourcompany.com"
  }
}

Pie de página

Añade enlaces a redes sociales y columnas de enlaces personalizados al pie de página de tu documentación.

Enlaces sociales

Muestra iconos de redes sociales al pie de cada página:

{
  "footer": {
    "socials": {
      "github": "https://github.com/yourcompany",
      "x": "https://x.com/yourcompany",
      "discord": "https://discord.gg/yourserver",
      "linkedin": "https://linkedin.com/company/yourcompany"
    }
  }
}

Plataformas admitidas

Columnas de enlaces

Añade grupos de enlaces organizados encima de los iconos sociales:

{
  "footer": {
    "links": [
      {
        "header": "Resources",
        "items": [
          { "label": "Blog", "href": "https://yourcompany.com/blog" },
          { "label": "Changelog", "href": "/changelog" }
        ]
      },
      {
        "header": "Company",
        "items": [
          { "label": "About", "href": "https://yourcompany.com/about" },
          { "label": "Careers", "href": "https://yourcompany.com/careers" }
        ]
      }
    ],
    "socials": {
      "github": "https://github.com/yourcompany",
      "x": "https://x.com/yourcompany"
    }
  }
}

Ocultar el pie de página en páginas específicas

Usa el frontmatter para ocultar el pie de página en páginas individuales:

---
title: Landing Page
hideFooter: true
---

Esto es útil para páginas de destino personalizadas o páginas donde el pie de página resultaría distractor.

Marca de Jamdesk

De forma predeterminada, aparece un enlace "Powered by Jamdesk" en el pie de página de tus páginas de documentación. Esto ayuda a dar a conocer Jamdesk mientras tus docs mantienen un aspecto profesional.

Ocultar la marca

Para eliminar la marca de Jamdesk:

1. Ve a Configuración en tu dashboard de Jamdesk
2. Busca la sección Configuración de build
3. Desactiva Mostrar marca de Jamdesk
4. Activa un nuevo build

Ejemplo completo de identidad visual

Esta es una configuración de identidad visual completa:

{
  "name": "Acme Documentation",
  "description": "Build amazing products with Acme",
  "theme": "jam",
  "colors": {
    "primary": "#6366F1",
    "light": "#818CF8",
    "dark": "#4F46E5"
  },
  "favicon": "/images/favicon.svg",
  "logo": {
    "light": "/images/logo-dark.webp",
    "dark": "/images/logo-light.webp",
    "href": "https://acme.com"
  },
  "navbar": {
    "links": [
      { "label": "API", "href": "/api/overview" },
      { "label": "Blog", "href": "https://acme.com/blog" }
    ],
    "primary": {
      "type": "button",
      "label": "Sign Up",
      "href": "https://app.acme.com/signup"
    }
  },
  "footer": {
    "socials": {
      "github": "https://github.com/acme",
      "x": "https://x.com/acme",
      "discord": "https://discord.gg/acme"
    },
    "links": [
      {
        "header": "Resources",
        "items": [
          { "label": "Blog", "href": "https://acme.com/blog" },
          { "label": "Status", "href": "https://status.acme.com" }
        ]
      }
    ]
  }
}

Dominio personalizado

Añade tu dominio en el dashboard de Jamdesk:

1. Ve a Configuración → Dominios
2. Añade tu dominio (p. ej., docs.yourcompany.com)
3. Configura el DNS como se indica
4. Espera la verificación

Tu documentación estará accesible en tu dominio personalizado con SSL automático.

¿Qué sigue?