Scripts personalizados

Usa CSS para dar estilo a los elementos HTML o agrega CSS y JavaScript personalizados para adaptar por completo la apariencia y la experiencia de tu documentación.

Estilos con Tailwind CSS

Usa Tailwind CSS v3 para dar estilo a elementos HTML. Puedes controlar el layout, el espaciado, los colores y otras propiedades visuales. Algunas clases comunes son:

w-full - Ancho completo
aspect-video - Relación de aspecto 16:9
rounded-xl - Esquinas redondeadas grandes
block, hidden - Control de visualización
dark:hidden, dark:block - Visibilidad en modo oscuro

Los valores arbitrarios de Tailwind CSS no son compatibles. Para valores personalizados, usa la prop style.

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

CSS personalizado

Agrega archivos CSS a tu repositorio y los nombres de clase definidos se aplicarán y estarán disponibles en todos tus archivos MDX.

Agregar `style.css`

Por ejemplo, puedes añadir el siguiente archivo style.css para personalizar la barra de navegación y el pie de página.

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

footer {
  margin-top: 2rem;
}

Uso de identificadores y selectores

Mintlify cuenta con un conjunto de identificadores y selectores comunes para ayudarte a etiquetar elementos importantes de la interfaz.

Usa la herramienta Inspeccionar elemento para encontrar referencias a los elementos que quieres personalizar.

Identificadores

APIPlaygroundInput: api-playground-input
AssistantEntry: assistant-entry
AssistantEntryMobile: assistant-entry-mobile
Banner: banner
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
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

Selectores

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

Las referencias y el estilo de los elementos comunes están sujetos a cambios a medida que la plataforma evoluciona. Usa estilos personalizados con precaución.

JavaScript personalizado

El JavaScript personalizado te permite agregar código ejecutable de forma global. Es equivalente a añadir una etiqueta <script> con código JavaScript en cada página.

Añadir JavaScript personalizado

Cualquier archivo .js dentro del directorio de contenido de tu documentación se incluirá en todas las páginas. Por ejemplo, puedes añadir el archivo ga.js siguiente para habilitar Google Analytics en toda la documentación.

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

gtag('config', 'TAG_ID');

Úsalo con precaución para evitar introducir vulnerabilidades de seguridad.

Primeros pasos

Configuración principal

Optimización de IA

Componentes

Páginas de API

Autenticación y personalización

Guías

Integraciones

Control de versiones y CI/CD

Scripts personalizados

Estilos con Tailwind CSS

CSS personalizado

Agregar `style.css`

Uso de identificadores y selectores

JavaScript personalizado

Añadir JavaScript personalizado

​Estilos con Tailwind CSS

​CSS personalizado

​Agregar style.css

​Uso de identificadores y selectores

​JavaScript personalizado

​Añadir JavaScript personalizado

Estilos con Tailwind CSS

CSS personalizado

Agregar `style.css`

Uso de identificadores y selectores

JavaScript personalizado

Añadir JavaScript personalizado