Scripts personnalisés

Ajoutez du JavaScript et du CSS personnalisés pour adapter entièrement l’apparence et l’expérience de votre documentation.

Utilisez CSS pour mettre en forme les éléments HTML, ou ajoutez du CSS et du JavaScript personnalisés afin d’adapter entièrement l’apparence et l’expérience de votre documentation.

​

Styliser avec Tailwind CSS

Utilisez Tailwind CSS v3 pour styliser les éléments HTML. Vous pouvez contrôler la mise en page, l’espacement, les couleurs et d’autres propriétés visuelles. Quelques classes courantes :

• w-full - Pleine largeur
• aspect-video - Ratio 16:9
• rounded-xl - Grandes bordures arrondies
• block, hidden - Contrôle de l’affichage
• dark:hidden, dark:block - Visibilité en mode sombre

Les valeurs arbitraires de Tailwind CSS ne sont pas prises en charge. Pour des valeurs personnalisées, utilisez plutôt la prop style.

<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />

L’utilisation de la prop style peut provoquer un décalage de la mise en page au chargement, en particulier sur les pages en mode personnalisé. Utilisez plutôt des classes Tailwind CSS ou des fichiers CSS personnalisés pour éviter les décalages ou le scintillement.

​

Ajouter du CSS personnalisé

Ajoutez des fichiers CSS à votre référentiel pour appliquer les noms de classes qu’ils définissent et les rendre disponibles dans tous vos fichiers MDX.

​

Ajout de style.css

Par exemple, vous pouvez ajouter le fichier style.css suivant pour personnaliser la barre de navigation et le pied de page.

#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

​

Utilisation des identifiants et des sélecteurs

Mintlify propose un ensemble d’identifiants et de sélecteurs courants pour vous aider à baliser les éléments importants de l’interface utilisateur.

Utilisez l’outil d’inspection des éléments pour trouver les références aux éléments que vous souhaitez personnaliser.

Identifiants

• APIPlaygroundInput: api-playground-input
• AssistantEntry: assistant-entry
• AssistantEntryMobile: assistant-entry-mobile
• Banner: banner
• BodyContent: body-content
• ChangelogFilters: changelog-filters
• ChangelogFiltersContent: changelog-filters-content
• ChatAssistantSheet: chat-assistant-sheet
• ChatAssistantTextArea: chat-assistant-textarea
• ContentArea: content-area
• ContentContainer: content-container
• ContentSideLayout: content-side-layout
• FeedbackForm: feedback-form
• FeedbackFormCancel: feedback-form-cancel
• FeedbackFormInput: feedback-form-input
• FeedbackFormSubmit: feedback-form-submit
• FeedbackThumbsDown: feedback-thumbs-down
• FeedbackThumbsUp: feedback-thumbs-up
• Footer: footer
• Header: header
• NavBarTransition: navbar-transition
• NavigationItems: navigation-items
• Navbar: navbar
• PageContextMenu: page-context-menu
• PageContextMenuButton: page-context-menu-button
• PageTitle: page-title
• Pagination: pagination
• Panel: panel
• RequestExample: request-example
• ResponseExample: response-example
• SearchBarEntry: search-bar-entry
• SearchBarEntryMobile: search-bar-entry-mobile
• SearchInput: search-input
• Sidebar: sidebar
• SidebarContent: sidebar-content
• TableOfContents: table-of-contents
• TableOfContentsContent: table-of-contents-content
• TableOfContentsLayout: table-of-contents-layout
• TopbarCtaButton: topbar-cta-button

Sélecteurs

• Accordion: accordion
• AccordionGroup: accordion-group
• AlmondLayout: almond-layout
• AlmondNavBottomSection: almond-nav-bottom-section
• AlmondNavBottomSectionDivider: almond-nav-bottom-section-divider
• Anchor: nav-anchor
• Anchors: nav-anchors
• APISection: api-section
• APISectionHeading: api-section-heading
• APISectionHeadingSubtitle: api-section-heading-subtitle
• APISectionHeadingTitle: api-section-heading-title
• Callout: callout
• Card: card
• CardGroup: card-group
• ChatAssistantSheet: chat-assistant-sheet
• ChatAssistantSheetHeader: chat-assistant-sheet-header
• ChatAssistantSheetContent: chat-assistant-sheet-content
• ChatAssistantInput: chat-assistant-input
• ChatAssistantSendButton: chat-assistant-send-button
• CodeBlock: code-block
• CodeGroup: code-group
• Content: mdx-content
• DropdownTrigger: nav-dropdown-trigger
• DropdownContent: nav-dropdown-content
• DropdownItem: nav-dropdown-item
• DropdownItemTextContainer: nav-dropdown-item-text-container
• DropdownItemTitle: nav-dropdown-item-title
• DropdownItemDescription: nav-dropdown-item-description
• DropdownItemIcon: nav-dropdown-item-icon
• Expandable: expandable
• Eyebrow: eyebrow
• FeedbackToolbar: feedback-toolbar
• Field: field
• Frame: frame
• Icon: icon
• Link: link
• LoginLink: login-link
• Logo: nav-logo
• Mermaid: mermaid
• MethodNavPill: method-nav-pill
• MethodPill: method-pill
• NavBarLink: navbar-link
• NavTagPill: nav-tag-pill
• NavTagPillText: nav-tag-pill-text
• OptionDropdown: option-dropdown
• PaginationNext: pagination-next
• PaginationPrev: pagination-prev
• PaginationTitle: pagination-title
• Panel: panel
• SidebarGroup: sidebar-group
• SidebarGroupIcon: sidebar-group-icon
• SidebarGroupHeader: sidebar-group-header
• SidebarNavGroupDivider: sidebar-nav-group-divider
• SidebarTitle: sidebar-title
• Step: step
• Steps: steps
• Tab: tab
• Tabs: tabs
• TabsBar: nav-tabs
• TabsBarItem: nav-tabs-item
• TableOfContents: toc
• TableOfContentsItem: toc-item
• Tooltip: tooltip
• TopbarRightContainer: topbar-right-container
• TryitButton: tryit-button
• Update: update

Attributs de données

Certains éléments exposent des attributs de données que vous pouvez utiliser comme sélecteurs CSS.

État actif (data-active) :

• DropdownItem: nav-dropdown-item[data-active]
• MobileNavTabsBarItem: mobile-nav-tabs-item[data-active]
• SidebarGroup: sidebar-group[data-active]
• SidebarNavItem: #sidebar-content li[data-active]
• TableOfContentsItem: toc-item[data-active]
• TableOfContentsItem (le plus profond) : toc-item[data-active-deepest] — uniquement présent sur le titre exactement visible, contrairement à data-active qui est également défini sur ses titres parents

Attributs Badge :

• Badge : [data-badge]
• Badge par couleur : [data-badge][data-color="blue"]
• Badge par taille : [data-badge][data-size="sm"]

Les références et la mise en forme des éléments courants sont susceptibles d’évoluer au fil des mises à jour de la plateforme. Veillez à utiliser les styles personnalisés avec prudence.

​

JavaScript personnalisé

Le JavaScript personnalisé vous permet d’ajouter du code exécutable personnalisé à l’échelle du site. C’est l’équivalent d’ajouter une balise <script> contenant du code JS sur chaque page.

​

Ajout de JavaScript personnalisé

Mintlify inclut tout fichier .js situé dans le répertoire de contenu de votre documentation dans chaque page de votre site de documentation. Par exemple, vous pouvez ajouter le fichier ga.js suivant pour activer Google Analytics sur l’ensemble de la documentation.

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');

Veuillez l’utiliser avec prudence afin de ne pas introduire de vulnérabilités de sécurité.

​

Scripts externes

Chargez des scripts tiers depuis des URLs externes sur chaque page de votre site de documentation. C’est utile pour ajouter des services d’analyse, des widgets de chat, des gestionnaires de consentement ou d’autres services fournissant un script hébergé.

Vous pouvez gérer les scripts externes depuis le tableau de bord dans Settings > Add-ons > Custom scripts. Pour chaque script, fournissez une URL HTTPS et choisissez une stratégie de chargement :

Stratégie	Description
beforeInteractive	Charge avant que la page ne devienne interactive. Utilisez pour les scripts qui doivent s’exécuter avant toute interaction utilisateur, comme le consentement aux cookies ou les analyses critiques.
afterInteractive	Charge après que la page devient interactive. C’est le comportement par défaut lorsqu’aucune stratégie n’est spécifiée.
lazyOnload	Charge pendant le temps d’inactivité après le chargement de la page. Utilisez pour les scripts de faible priorité comme les widgets de chat ou le suivi non essentiel.

Vous pouvez ajouter jusqu’à 20 scripts personnalisés. Chaque URL doit utiliser HTTPS et ne doit pas pointer vers des types de fichiers interdits tels que .svg, .exe ou .zip.