mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
97bc466d64
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
204 lines
7.3 KiB
Plaintext
204 lines
7.3 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="styling-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" />
|
||
```
|
||
|
||
|
||
<div id="custom-css">
|
||
## CSS personnalisé
|
||
</div>
|
||
|
||
Ajoutez des fichiers CSS à votre référentiel ; les noms de classes qu’ils définissent seront alors appliqués et 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`
|
||
</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>
|
||
|
||
Tout fichier `.js` situé dans le répertoire de contenu de votre documentation sera inclus dans chaque page. 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>
|