--- title: Markengestaltung description: "Konfigurieren Sie Logos, Favicons, Navbar-Links und Footer Ihrer Dokumentationswebsite mit Hell-/Dunkelvarianten, eigenen Farben und Symbolen für externe Links." --- > **For AI agents:** the complete documentation index is at [llms.txt](https://jamdesk.com/docs/llms.txt). Append `.md` to any page URL for its markdown version. {/* ANCHOR STABILITY: The "Favicon", "Site Name", "Description", and "Logo" heading anchors on this page are baked into suggestion links stored in Firestore build records (builder/build-service/lib/config-suggestions.ts and its CLI twin). Renaming these headings dead-links every previously stored suggestion — don't rename without updating both twins and accepting stale links in historical builds. */} Das Branding bestimmt den ersten visuellen Eindruck Ihrer Leser: Logos, Favicons und Navigationslinks. Für alles gibt es Varianten für den Hell- und Dunkelmodus. ## Logo Fügen Sie Ihr Logo zum Navigationskopf hinzu: ```json { "logo": { "light": "/images/logo-light.webp", "dark": "/images/logo-dark.webp", "href": "https://yourcompany.com" } } ``` | Feld | Beschreibung | |-------|-------------| | `light` | Logo für den Hellmodus (dunkles Logo auf hellem Hintergrund) | | `dark` | Logo für den Dunkelmodus (helles Logo auf dunklem Hintergrund) | | `href` | Ziel, zu dem beim Klicken auf das Logo navigiert wird | Verwenden Sie SVG-Logos, damit sie bei jeder Größe scharf dargestellt werden. Wenn Sie nur ein Logo haben, verwenden Sie es für `light` und `dark`. Linkvorschauen können keinen Text innerhalb eines SVG-Logos anzeigen. Wandeln Sie Text daher in Pfade um. Siehe [Social Card anpassen](https://jamdesk.com/docs/de/content/seo#social-card-anpassen). ### 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 empfohlen ## Favicon Ein Bild für beide Modi: ```json { "favicon": "/images/favicon.svg" } ``` Oder eine separate Variante für jeden Modus: ```json { "favicon": { "light": "/images/favicon.svg", "dark": "/images/favicon-dark.svg" } } ``` Das `light`-Favicon wird im Hellmodus angezeigt, `dark` im Dunkelmodus. `dark` ist optional. Wenn es fehlt, wird `light` in beiden Modi verwendet. Jamdesk gibt für das primäre Favicon ein `` aus sowie für die dunkle Variante einen zweiten Link mit `media="(prefers-color-scheme: dark)"`. Unterstützte Formate: SVG, PNG, ICO. Wenn Sie lieber ein einzelnes Asset verwenden, passt sich auch ein SVG mit `currentColor` für Konturen und Füllungen automatisch an: Der Browser setzt die aktive Vordergrundfarbe ein. ## Name der Website Das Feld `name` erscheint in Browser-Tabs und Suchergebnissen: ```json { "name": "Acme Docs", "description": "Documentation for the Acme API" } ``` Um das Titelformat zu ändern oder den Namen darin wegzulassen, verwenden Sie [`seo.titleTemplate`](https://jamdesk.com/docs/de/content/seo#seitentitel). Ergänzen Sie den Namen durch eine [`description`](#beschreibung), damit Suchergebnisse und Linkvorschauen aussagekräftige Texte statt eines allgemeinen Ersatztexts anzeigen. ## Beschreibung Das Feld `description` ist die standardmäßige SEO-Zusammenfassung Ihrer Website. Suchmaschinen zeigen sie unter dem Titel Ihrer Website an, soziale Plattformen verwenden sie für Linkvorschauen: ```json { "description": "Build, ship, and scale documentation with the Acme platform." } ``` Verfassen Sie einen Text mit 50 bis 160 Zeichen für Leser, die entscheiden, ob sie klicken möchten. Seiten mit einer eigenen `description` im Frontmatter verwenden diese stattdessen; die Website-Beschreibung gilt für alle übrigen Seiten. ## Navigationslinks Fügen Sie Links zu Ihrer Navbar hinzu: ```json { "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 | Feld | Typ | Beschreibung | |-------|------|-------------| | `label` | string | Angezeigter Text | | `href` | string | URL (extern oder intern) | ### Primärer Button Das Feld `primary` erstellt einen hervorgehobenen Call-to-Action-Button: ```json { "primary": { "type": "button", "label": "Dashboard", "href": "https://app.yourcompany.com" } } ``` Auf Tablets und Desktop-Geräten befinden sich die Links und der primäre Button im Kopfbereich. Auf Smartphones ist dort kein Platz für sie, daher erscheinen sie stattdessen im Menü. Der primäre Button bleibt am unteren Rand fixiert. Pulsar zeigt weder Navbar-Links noch den primären Button an. ## Footer Fügen Sie Ihrem Dokumentations-Footer Links zu sozialen Netzwerken und benutzerdefinierte Linkspalten hinzu. ### Social-Links Zeigen Sie die Symbole sozialer Netzwerke am unteren Rand jeder Seite an: ```json { "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 | Plattform | Schlüssel | Beschreibung | |----------|-----|-------------| | GitHub | `github` | Link zu Ihrer GitHub-Organisation oder Ihrem Repository | | X (Twitter) | `x` oder `twitter` | Link zu Ihrem X-/Twitter-Profil | | LinkedIn | `linkedin` | Link zur LinkedIn-Seite Ihres Unternehmens | | Discord | `discord` | Link zu Ihrem Discord-Server | | Slack | `slack` | Link zu Ihrer Slack-Community | | YouTube | `youtube` | Link zu Ihrem YouTube-Kanal | | Instagram | `instagram` | Link zu Ihrem Instagram-Profil | | Facebook | `facebook` | Link zu Ihrer Facebook-Seite | | Reddit | `reddit` | Link zu Ihrem Subreddit | | Telegram | `telegram` | Link zu Ihrem Telegram-Kanal | | Bluesky | `bluesky` | Link zu Ihrem Bluesky-Profil | | Threads | `threads` | Link zu Ihrem Threads-Profil | | Medium | `medium` | Link zu Ihrer Medium-Veröffentlichung | | Hacker News | `hacker-news` | Link zu Ihrem Hacker-News-Profil | | Website | `website` | Link zu Ihrer Hauptwebsite | Die Symbole werden unabhängig von der Reihenfolge in Ihrer Konfiguration stets gleich angeordnet. GitHub und X/Twitter erscheinen zuerst, gefolgt von den anderen Plattformen. ### Linkspalten Fügen Sie oberhalb der Symbole für soziale Netzwerke übersichtliche Linkgruppen hinzu: ```json { "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" } } } ``` | Feld | Typ | Beschreibung | |-------|------|-------------| | `links` | array | Array mit Linkspaltenobjekten | | `links[].header` | string | Spaltenüberschrift (optional) | | `links[].items` | array | Links in der Spalte | | `links[].items[].label` | string | Anzeigetext des Links | | `links[].items[].href` | string | URL (interne Pfade oder externe URLs) | Externe Links (mit `http` beginnend) werden automatisch in einem neuen Tab geöffnet. Interne Links führen innerhalb Ihrer Dokumentation zur Zielseite. ### Footer auf bestimmten Seiten ausblenden Blenden Sie den Footer auf einzelnen Seiten mithilfe des Frontmatters aus: ```yaml --- title: Landing Page hideFooter: true --- ``` Das ist nützlich für benutzerdefinierte Landingpages oder Seiten, auf denen der Footer ablenken würde. ## Jamdesk-Branding Standardmäßig erscheint in den Dokumentationsseiten im Footer ein Link mit dem Text „Powered by Jamdesk“. Dieser Link hilft anderen Teams, Jamdesk zu entdecken. Bei Bedarf können Sie ihn entfernen. ### Branding ausblenden So entfernen Sie das Jamdesk-Branding: 1. Öffnen Sie **Settings** in Ihrem Jamdesk-Dashboard. 2. Suchen Sie den Abschnitt **Build Settings**. 3. Deaktivieren Sie **Show Jamdesk Branding**. 4. Starten Sie einen neuen Build. Die Branding-Einstellung ist in allen Tarifen verfügbar. Änderungen werden erst nach einem erneuten Build wirksam. ## Vollständiges Branding-Beispiel Hier sehen Sie eine vollständige Branding-Konfiguration: ```json { "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. Öffnen Sie **Settings** → **Domains**. 2. Fügen Sie Ihre Domain hinzu (z. B. `docs.yourcompany.com`). 3. Richten Sie DNS wie angezeigt ein. 4. Warten Sie auf die Verifizierung. Ihre Dokumentation ist dann unter Ihrer eigenen Domain mit automatischem SSL verfügbar. ## Wie geht es weiter? Passen Sie Farben und Typografie an. Verbessern Sie SEO-Metadaten und Vorschauen.