Identità visiva

L'identità visiva controlla gli elementi che i lettori vedono per primi: loghi, favicon e link di navigazione. Tutto supporta varianti per la modalità chiara/scura.

Logo

Aggiungi il tuo logo all'intestazione della navigazione:

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

Dimensioni del logo

I loghi vengono visualizzati con una larghezza massima di 120px. Per ottenere risultati ottimali:

• Larghezza: 120-240px
• Altezza: 30-40px
• Formato: SVG preferito

Favicon

Un'immagine per entrambe le modalità:

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

Oppure una variante separata per ogni modalità:

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

La favicon light viene mostrata nella modalità chiara, mentre dark viene mostrata nella modalità scura. dark è facoltativa. Se omessa, light viene utilizzata in entrambe le modalità. Jamdesk genera un elemento <link rel="icon"> per la favicon principale, oltre a un secondo link con media="(prefers-color-scheme: dark)" per la variante scura.

Formati supportati: SVG, PNG, ICO.

Nome del sito

Il campo name viene visualizzato nelle schede del browser e nei risultati di ricerca:

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

Abbinalo a una description, così i risultati di ricerca e le anteprime dei link mostrano un testo reale invece di un fallback generico.

Descrizione

Il campo description è il riepilogo SEO predefinito del sito. I motori di ricerca lo mostrano sotto il titolo del sito e le piattaforme social lo usano per le anteprime dei link:

{
  "description": "Build, ship, and scale documentation with the Acme platform."
}

Punta a 50-160 caratteri pensati per un lettore che sta decidendo se fare clic. Le pagine che impostano una propria description nel frontmatter usano quella; la descrizione del sito si applica a tutto il resto.

Link di navigazione

Aggiungi link alla barra di navigazione:

{
  "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"
    }
  }
}

Opzioni dei link

Pulsante principale

Il campo primary crea un pulsante di invito all'azione in evidenza:

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

Piè di pagina

Aggiungi link social e colonne di link personalizzate al piè di pagina della documentazione.

Link social

Visualizza le icone dei social media in fondo a ogni pagina:

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

Piattaforme supportate

Colonne di link

Aggiungi gruppi di link organizzati sopra le icone social:

{
  "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"
    }
  }
}

Nascondere il piè di pagina in pagine specifiche

Usa il frontmatter per nascondere il piè di pagina nelle singole pagine:

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

È utile per pagine di destinazione personalizzate o per pagine in cui il piè di pagina risulterebbe distraente.

Identità visiva di Jamdesk

Per impostazione predefinita, nelle pagine della documentazione viene visualizzato nel piè di pagina un link "Powered by Jamdesk". Questo link aiuta altri team a scoprire Jamdesk. Puoi rimuoverlo, se preferisci.

Nascondere l'identità visiva

Per rimuovere l'identità visiva di Jamdesk:

1. Vai a Settings nel dashboard di Jamdesk
2. Individua la sezione Build Settings
3. Disattiva Show Jamdesk Branding
4. Avvia una nuova build

Esempio completo di identità visiva

Ecco una configurazione completa dell'identità visiva:

{
  "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 personalizzato

Aggiungi il tuo dominio nel dashboard di Jamdesk:

1. Vai a Settings → Domains
2. Aggiungi il tuo dominio (ad esempio, docs.yourcompany.com)
3. Configura il DNS come mostrato
4. Attendi la verifica

La documentazione sarà accessibile dal tuo dominio personalizzato con SSL automatico.

Cosa fare ora?