Branding

Branding steuert die Visuals, die Leser zuerst sehen: Logos, Favicons und Navigationslinks. Jedes davon unterstützt Varianten für den Light- und Dark-Mode.

Logo

Füge dein 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 maximal 120px Breite angezeigt. Für beste Ergebnisse:

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

Favicon

Ein Bild für beide Modi:

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

Oder eine eigene Variante für jeden Modus:

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

dark ist optional. Ohne es wird light in jedem Modus angezeigt. Jamdesk gibt einen <link rel="icon"> für das primäre Favicon aus, plus einen zweiten Link mit media="(prefers-color-scheme: dark)" für die Dark-Variante.

Unterstützte Formate: SVG, PNG, ICO.

Name der Website

Das Feld name erscheint in Browser-Tabs und Suchergebnissen:

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

Das Titelformat änderst du mit seo.titleTemplate, oder du lässt den Namen dort ganz weg.

Kombiniere es mit einer description. Ohne sie zeigen Suchergebnisse und Link-Vorschauen einen generischen Ersatztext.

Beschreibung

Das Feld description ist deine standardmäßige SEO-Zusammenfassung der Website. Suchmaschinen zeigen sie unter deinem Site-Titel an, und Social-Plattformen nutzen sie für Link-Vorschauen:

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

Ziele auf 50–160 Zeichen, geschrieben für einen Leser, der entscheidet, ob er klickt. Seiten mit eigenem description-Frontmatter verwenden stattdessen dieses. Alle anderen Seiten verwenden die Site-Beschreibung.

Navigationslinks

Füge Links zu deiner 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"
  }
}

Die Links und der primäre Button sitzen auf Tablets und Desktops im Header. Auf Smartphones ist dafür kein Platz im Header. Sie erscheinen im Menü, wobei der primäre Button unten fixiert wird. Pulsar zeigt keine Navbar-Links oder den primären Button an.

Footer

Der Footer sitzt am unteren Rand jeder Seite. Er kann Social-Icons, Linkspalten und eine Copyright-Zeile enthalten. Jede Sprache kann ihren eigenen Footer haben, und du kannst ihn mit eigenem CSS anpassen.

Social-Links

Zeige Social-Media-Icons am unteren Rand jeder Seite 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üge Linkgruppen über deinen Social-Icons 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"
    }
  }
}

Copyright-Zeile

Füge copyright hinzu, und es erscheint in der untersten Zeile des Footers, neben dem Link „Powered by Jamdesk“:

{
  "footer": {
    "copyright": "© 2026 Acme Inc. All rights reserved."
  }
}

Es ist reiner Text. Markdown und HTML werden wörtlich angezeigt, füge Links daher lieber in einer Linkspalte hinzu. Zeilenumbrüche werden zu Leerzeichen, und das Limit liegt bei 200 Zeichen. Tippe das ©-Zeichen selbst ein, da © wörtlich angezeigt wird.

Unterschiedlicher Footer pro Sprache

Auf einer Website mit mehreren Sprachen kann jeder Eintrag in navigation.languages seinen eigenen footer haben. Er akzeptiert dieselben Felder wie der oberste Footer:

{
  "footer": {
    "copyright": "© 2026 Acme Inc."
  },
  "navigation": {
    "languages": [
      {
        "language": "en",
        "groups": [...]
      },
      {
        "language": "fr",
        "groups": [...],
        "footer": {
          "links": [
            {
              "header": "Entreprise",
              "items": [{ "label": "À propos", "href": "https://acme.com/fr/about" }]
            }
          ],
          "copyright": "© 2026 Acme Inc. Tous droits réservés."
        }
      }
    ]
  }
}

Der Footer einer Sprache ersetzt den obersten Footer. Es wird nichts zusammengeführt, kopiere also alles, was du behalten willst. Sprachen ohne eigenen footer verwenden den obersten. Siehe Sprachen, um den Footer für eine Sprache auszublenden.

Footer gestalten

Der Footer hat Klassennamen, die zwischen Releases gleich bleiben, sodass eigenes CSS, das auf sie zielt, weiterhin funktioniert. Dieses Beispiel macht zum Beispiel die Spaltenüberschriften in Großbuchstaben und färbt das GitHub-Icon lila:

.jd-footer-column-title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.jd-footer-social[data-platform="github"] {
  color: #6e40c9;
}

Die vollständige Liste findest du unter Eigenes CSS.

Footer auf bestimmten Seiten ausblenden

Verwende Frontmatter, um den Footer auf einzelnen Seiten auszublenden:

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

Verwende das auf eigenen Landingpages oder überall dort, wo der Footer stört.

Jamdesk-Branding

Standardmäßig erscheint im Footer deiner Dokumentationsseiten ein Link „Powered by Jamdesk“. Du kannst ihn entfernen.

Branding ausblenden

So entfernst du das Jamdesk-Branding:

1. Öffne Settings in deinem Jamdesk-Dashboard
2. Suche den Bereich Build Settings
3. Schalte Show Jamdesk Branding aus
4. Löse einen neuen Build aus

Vollständiges Branding-Beispiel

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üge deine Domain im Jamdesk-Dashboard hinzu:

1. Öffne Settings → Domains
2. Füge deine Domain hinzu (z. B. docs.yourcompany.com)
3. Konfiguriere DNS wie angezeigt
4. Warte auf die Verifizierung

Deine Dokumentation lädt dann unter deiner eigenen Domain mit automatischem SSL.

Wie geht es weiter?