mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
0bea1ebbf5
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
238 lines
9.6 KiB
Plaintext
238 lines
9.6 KiB
Plaintext
---
|
||
title: "Scripts personnalisés"
|
||
description: "Ajoutez du JavaScript et du CSS personnalisés pour adapter entièrement l’apparence et l’expérience de votre documentation."
|
||
keywords: ["CSS", "JavaScript", "Tailwind CSS", "personnalisation du style"]
|
||
---
|
||
|
||
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.
|
||
|
||
<div id="style-with-tailwind-css">
|
||
## Styliser avec Tailwind CSS
|
||
</div>
|
||
|
||
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`.
|
||
|
||
```html
|
||
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
|
||
```
|
||
|
||
<Warning>
|
||
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.
|
||
</Warning>
|
||
|
||
|
||
<div id="add-custom-css">
|
||
## Ajouter du CSS personnalisé
|
||
</div>
|
||
|
||
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.
|
||
|
||
<div id="adding-stylecss">
|
||
### Ajout de `style.css`
|
||
</div>
|
||
|
||
Par exemple, vous pouvez ajouter le fichier `style.css` suivant pour personnaliser la barre de navigation et le pied de page.
|
||
|
||
```css
|
||
#navbar {
|
||
background: #fffff2;
|
||
padding: 1rem;
|
||
}
|
||
|
||
footer {
|
||
margin-top: 2rem;
|
||
}
|
||
```
|
||
|
||
|
||
<div id="using-identifiers-and-selectors">
|
||
### Utilisation des identifiants et des sélecteurs
|
||
</div>
|
||
|
||
Mintlify propose un ensemble d’identifiants et de sélecteurs courants pour vous aider à baliser les éléments importants de l’interface utilisateur.
|
||
|
||
<Tip>
|
||
Utilisez l’outil d’inspection des éléments pour trouver les références aux éléments que vous souhaitez personnaliser.
|
||
</Tip>
|
||
|
||
<AccordionGroup>
|
||
<Accordion title="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`
|
||
</Accordion>
|
||
|
||
<Accordion title="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`) :
|
||
|
||
- Élément actif dans un menu déroulant de navigation : `nav-dropdown-item[data-active]`
|
||
- Onglet actif dans la navigation mobile : `mobile-nav-tabs-item[data-active]`
|
||
- Groupe actif de la barre latérale : `sidebar-group[data-active]`
|
||
- Lien actif de la barre latérale : `#sidebar-content li[data-active]`
|
||
- Onglet actif de la navigation supérieure : `.nav-tabs-item[data-active]` — s'applique uniquement aux onglets simples ; les onglets avec menus déroulants ne reçoivent pas `data-active`. Notez le `.` initial : il cible une classe sur un élément `<a>` standard, contrairement à la plupart des autres composants qui utilisent des noms d'éléments personnalisés.
|
||
- Élément actif de la table des matières : `toc-item[data-active]`
|
||
- Élément le plus profond actif de la table des matières : `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.
|
||
|
||
Nom de composant (`data-component-name`) :
|
||
|
||
Utilisez `data-component-name` pour cibler des composants d'interface spécifiques avec un sélecteur stable qui persiste même si les noms de classes internes changent.
|
||
|
||
- Conteneur de diagramme Mermaid : `[data-component-name="mermaid-container"]` — inclut la superposition des contrôles de zoom
|
||
- Contrôles de zoom et de déplacement Mermaid : `[data-component-name="mermaid-controls-wrapper"]`
|
||
- Bouton principal de l'en-tête : `[data-component-name="primary-header-button"]` — thème Sequoia uniquement
|
||
- Bascule de thème : `[data-component-name="theme-toggle"]`
|
||
|
||
Attributs Badge :
|
||
|
||
- Badge : `[data-badge]`
|
||
- Badge par couleur : `[data-badge][data-color="blue"]`
|
||
- Badge par taille : `[data-badge][data-size="sm"]`
|
||
|
||
</Accordion>
|
||
</AccordionGroup>
|
||
|
||
<Warning>
|
||
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.
|
||
</Warning>
|
||
|
||
<div id="custom-javascript">
|
||
## JavaScript personnalisé
|
||
</div>
|
||
|
||
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.
|
||
|
||
<div id="adding-custom-javascript">
|
||
### Ajout de JavaScript personnalisé
|
||
</div>
|
||
|
||
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](https://marketingplatform.google.com/about/analytics) sur l’ensemble de la documentation.
|
||
|
||
```js
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag() {
|
||
dataLayer.push(arguments);
|
||
}
|
||
gtag('js', new Date());
|
||
|
||
gtag('config', 'TAG_ID');
|
||
```
|
||
|
||
<Warning>
|
||
Veuillez l’utiliser avec prudence afin de ne pas introduire de vulnérabilités de sécurité.
|
||
</Warning>
|