Branding

Branding steuert die visuellen Elemente, die Leser zuerst sehen: Logos, Favicons und Navigationslinks. Alles unterstützt Varianten für den hellen und dunklen Modus.

Logo

Fügen Sie Ihr Logo zum Navigationsheader hinzu:

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

Abmessungen des Logos

Logos werden mit einer maximalen Breite von 120 px angezeigt. Für optimale Ergebnisse:

• Breite: 120–240 px
• Höhe: 30–40 px
• Format: SVG bevorzugt

Favicon

Ein Bild für beide Modi:

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

Oder eine separate Variante für jeden Modus:

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

Das Favicon light wird im hellen Modus angezeigt, dark im dunklen Modus. dark ist optional. Wenn es nicht angegeben wird, wird light in beiden Modi verwendet. Jamdesk erzeugt ein <link rel="icon"> für das primäre Favicon sowie einen zweiten Link mit media="(prefers-color-scheme: dark)" für die dunkle Variante.

Unterstützte Formate: SVG, PNG, ICO.

Name der Website

Das Feld name wird in Browser-Tabs und Suchergebnissen angezeigt:

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

Kombinieren Sie es mit einer description, damit Suchergebnisse und Link-Vorschauen echten Text statt eines generischen Fallbacks anzeigen.

Beschreibung

Das Feld description ist die standardmäßige SEO-Zusammenfassung Ihrer Website. Suchmaschinen zeigen sie unter dem Titel Ihrer Website an, und soziale Plattformen verwenden sie für Link-Vorschauen:

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

Streben Sie 50–160 Zeichen an, die für Leser formuliert sind, die entscheiden, ob sie klicken. Seiten mit eigenem description-Frontmatter verwenden diesen Wert; die Website-Beschreibung gilt für alle anderen Seiten.

Navigationslinks

Fügen Sie Links zu Ihrer Navbar hinzu:

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

Linkoptionen

Primärer Button

Das Feld primary erstellt einen hervorgehobenen Call-to-Action-Button:

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

Footer

Fügen Sie Social-Links und benutzerdefinierte Linkspalten zum Footer Ihrer Dokumentation hinzu.

Social-Links

Zeigen Sie unten auf jeder Seite Symbole für soziale Medien an:

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

Unterstützte Plattformen

Linkspalten

Fügen Sie über Ihren Social-Symbolen organisierte Linkgruppen hinzu:

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

Footer auf bestimmten Seiten ausblenden

Verwenden Sie Frontmatter, um den Footer auf einzelnen Seiten auszublenden:

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

Dies ist für benutzerdefinierte Landingpages oder Seiten nützlich, auf denen der Footer ablenken würde.

Jamdesk-Branding

Standardmäßig wird in der Fußzeile Ihrer Dokumentationsseiten ein Link „Powered by Jamdesk“ angezeigt. Dieser Link hilft anderen Teams, Jamdesk zu entdecken. Sie können ihn entfernen, wenn Sie möchten.

Branding ausblenden

So entfernen Sie das Jamdesk-Branding:

1. Gehen Sie in Ihrem Jamdesk-Dashboard zu Settings
2. Suchen Sie den Abschnitt Build Settings
3. Deaktivieren Sie Show Jamdesk Branding
4. Starten Sie einen neuen Build

Vollständiges Branding-Beispiel

Hier sehen Sie eine vollständige Branding-Konfiguration:

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

Benutzerdefinierte Domain

Fügen Sie Ihre Domain im Jamdesk-Dashboard hinzu:

1. Gehen Sie zu Settings → Domains
2. Fügen Sie Ihre Domain hinzu (z. B. docs.yourcompany.com)
3. Konfigurieren Sie DNS wie angegeben
4. Warten Sie auf die Verifizierung

Ihre Dokumentation ist unter Ihrer benutzerdefinierten Domain mit automatischem SSL verfügbar.

Wie geht es weiter?