Personnalisation de la marque

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 :

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

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

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 :

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

Formats pris en charge : SVG, PNG, ICO

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.

Nom du site

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

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

Ajoutez des liens à votre barre de navigation :

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

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

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

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.

Colonnes de liens

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

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

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

Masquer le pied de page sur des pages spécifiques

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

---
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.