---
title: Personnalisation de la marque
description: "Configurez logos, favicons, navigation et pied de page de votre documentation. Variantes clair/sombre, couleurs et icônes de liens externes."
---

La personnalisation de la marque contrôle les visuels que les lecteurs voient en premier : logos, favicons et liens de navigation. Tout prend en charge les variantes mode clair/sombre.

## Logo

Ajoutez votre logo à l'en-tête de navigation :

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

| Champ | Description |
|-------|-------------|
| `light` | Logo pour le mode clair (logo sombre sur fond clair) |
| `dark` | Logo pour le mode sombre (logo clair sur fond sombre) |
| `href` | Destination lors d'un clic sur le logo |

<Tip>
Utilisez des logos SVG pour un rendu net à toute taille. Si vous n'avez qu'un seul logo, utilisez-le pour `light` et `dark`.
</Tip>

### Dimensions du logo

Les logos sont affichés avec une largeur maximale de 120px. Pour de meilleurs résultats :
- Largeur : 120-240px
- Hauteur : 30-40px
- Format : SVG recommandé

## Favicon

Ajoutez une icône d'onglet de navigateur :

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

Formats pris en charge : SVG, PNG, ICO

<Note>
Les favicons SVG prennent en charge le mode sombre ! Le navigateur utilisera les couleurs de votre système si vous utilisez `currentColor` dans le SVG.
</Note>

## Nom du site

Le champ `name` apparaît dans les onglets du navigateur et les résultats de recherche :

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

## Liens de navigation

Ajoutez des liens à votre barre de navigation :

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

### Options de lien

| Champ | Type | Description |
|-------|------|-------------|
| `label` | string | Texte affiché |
| `href` | string | URL (externe ou interne) |

### Bouton principal

Le champ `primary` crée un bouton d'appel à l'action mis en évidence :

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

## Pied de page

Ajoutez des liens sociaux et des colonnes de liens personnalisées au pied de page de votre documentation.

### Liens sociaux

Affichez des icônes de réseaux sociaux en bas de chaque page :

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

#### Plateformes prises en charge

| Plateforme | Clé | Description |
|----------|-----|-------------|
| GitHub | `github` | Lien vers votre organisation ou dépôt GitHub |
| X (Twitter) | `x` ou `twitter` | Lien vers votre profil X/Twitter |
| LinkedIn | `linkedin` | Lien vers la page LinkedIn de votre entreprise |
| Discord | `discord` | Lien vers votre serveur Discord |
| Slack | `slack` | Lien vers votre communauté Slack |
| YouTube | `youtube` | Lien vers votre chaîne YouTube |
| Instagram | `instagram` | Lien vers votre profil Instagram |
| Facebook | `facebook` | Lien vers votre page Facebook |
| Reddit | `reddit` | Lien vers votre subreddit |
| Telegram | `telegram` | Lien vers votre canal Telegram |
| Bluesky | `bluesky` | Lien vers votre profil Bluesky |
| Threads | `threads` | Lien vers votre profil Threads |
| Medium | `medium` | Lien vers votre publication Medium |
| Hacker News | `hacker-news` | Lien vers votre profil Hacker News |
| Site web | `website` | Lien vers votre site web principal |

<Tip>
Les icônes s'affichent dans un ordre cohérent quelle que soit la façon dont vous les définissez dans votre configuration. GitHub et X/Twitter apparaissent en premier, suivis des autres plateformes.
</Tip>

### Colonnes de liens

Ajoutez des groupes de liens organisés au-dessus de vos icônes sociales :

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

| Champ | Type | Description |
|-------|------|-------------|
| `links` | array | Tableau d'objets de colonnes de liens |
| `links[].header` | string | En-tête de colonne (optionnel) |
| `links[].items` | array | Liens dans la colonne |
| `links[].items[].label` | string | Texte affiché pour le lien |
| `links[].items[].href` | string | URL (chemins internes ou URL externes) |

<Note>
Les liens externes (commençant par `http`) s'ouvrent automatiquement dans un nouvel onglet. Les liens internes naviguent dans votre documentation.
</Note>

### Masquer le pied de page sur des pages spécifiques

Utilisez le frontmatter pour masquer le pied de page sur des pages individuelles :

```yaml
---
title: Landing Page
hideFooter: true
---
```

Cela est utile pour les pages d'accueil personnalisées ou les pages où le pied de page serait distrayant.

## Personnalisation de la marque Jamdesk

Par défaut, un lien « Propulsé par Jamdesk » apparaît dans le pied de page de vos pages de documentation. Cela contribue à faire connaître Jamdesk tout en gardant votre documentation professionnelle.

### Masquer la marque

Pour supprimer la marque Jamdesk :

1. Accédez à **Paramètres** dans votre dashboard Jamdesk
2. Trouvez la section **Paramètres de build**
3. Désactivez **Afficher la marque Jamdesk**
4. Déclenchez un nouveau build

<Note>
Le bouton de marque est disponible sur tous les plans. Les modifications nécessitent un rebuild pour prendre effet.
</Note>

## Exemple complet de personnalisation

Voici une configuration de personnalisation complète :

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

## Domaine personnalisé

Ajoutez votre domaine dans le dashboard Jamdesk :

1. Accédez à **Paramètres** → **Domaines**
2. Ajoutez votre domaine (ex. : `docs.yourcompany.com`)
3. Configurez le DNS comme indiqué
4. Attendez la vérification

Votre documentation sera accessible à votre domaine personnalisé avec SSL automatique.

## Et ensuite ?

<Columns cols={2}>
  <Card title="Thèmes" icon="palette" href="/fr/customization/theming">
    Personnalisez les couleurs et la typographie
  </Card>
  <Card title="Optimisation SEO" icon="magnifying-glass-chart" href="/fr/content/seo">
    Améliorez les métadonnées de recherche et les aperçus
  </Card>
</Columns>