mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
273 lines
9.9 KiB
Plaintext
273 lines
9.9 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`) :
|
||
|
||
- 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"]`
|
||
|
||
</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>
|
||
|
||
<div id="external-scripts">
|
||
## Scripts externes
|
||
</div>
|
||
|
||
Chargez des scripts externes depuis une URL sur chaque page de votre documentation en utilisant la configuration `integrations.customScripts` dans `docs.json`. C'est utile pour ajouter des scripts d'analyse ou de suivi tiers hébergés sur un CDN.
|
||
|
||
<Note>
|
||
Les scripts externes nécessitent l'activation de l'option custom scripts pour votre projet. Contactez le support si vous avez besoin d'un accès.
|
||
</Note>
|
||
|
||
<div id="configuration">
|
||
### Configuration
|
||
</div>
|
||
|
||
Ajoutez le tableau `customScripts` à `integrations` dans votre `docs.json` :
|
||
|
||
```json docs.json
|
||
{
|
||
"integrations": {
|
||
"customScripts": [
|
||
{
|
||
"src": "https://cdn.example.com/analytics.js",
|
||
"strategy": "afterInteractive"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
Chaque objet script accepte les propriétés suivantes :
|
||
|
||
<ResponseField name="src" type="string" required>
|
||
L'URL HTTPS du script à charger. Doit pointer vers un fichier JavaScript valide.
|
||
</ResponseField>
|
||
|
||
<ResponseField name="strategy" type="string" default="afterInteractive">
|
||
Contrôle le moment du chargement du script. Accepte `afterInteractive` (charge après que la page devient interactive) ou `lazyOnload` (charge pendant les temps d'inactivité).
|
||
</ResponseField>
|
||
|
||
Vous pouvez ajouter jusqu'à 20 scripts externes.
|
||
|
||
<Warning>
|
||
Ne chargez que des scripts provenant de sources fiables. Les scripts externes ont un accès complet à la page et peuvent affecter les performances et la sécurité.
|
||
</Warning>
|