mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
020cfdfda5
* docs: update editor embed instructions to use /embed for YouTube, Loom, and Vimeo * Update editor/pages.mdx --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
100 lines
4.1 KiB
Plaintext
100 lines
4.1 KiB
Plaintext
---
|
|
title: "Agregar contenido multimedia"
|
|
description: "Sube, gestiona e inserta imágenes y otros recursos multimedia en tus páginas de documentación usando el gestor de archivos integrado del editor web de Mintlify."
|
|
keywords: ["editor","media","images","assets"]
|
|
---
|
|
|
|
<div id="supported-file-types">
|
|
## Tipos de archivo admitidos
|
|
</div>
|
|
|
|
* **Imágenes**: PNG, JPG, JPEG, GIF, WebP (máx. 20 MB)
|
|
* **Vídeos**: MP4, WebM (máx. 20 MB)
|
|
* **Fuentes**: TrueType (TTF), WOFF, WOFF2
|
|
* **Otros**: PDF, ICO (favicons)
|
|
|
|
<div id="add-media-to-a-page">
|
|
## Agregar contenido multimedia a una página
|
|
</div>
|
|
|
|
<div id="drag-and-drop">
|
|
### Arrastrar y soltar
|
|
</div>
|
|
|
|
Arrastra y suelta contenido multimedia desde tu computadora o desde el gestor de recursos sobre una página. En modo visual, la imagen o el video se insertan en línea. En Modo Markdown, el editor inserta la ruta en la posición de tu cursor. Las imágenes se guardan en la raíz de tu carpeta `images/`, y los videos se guardan en la raíz de tu carpeta `videos/`.
|
|
|
|
<div id="slash-command">
|
|
### Comando slash
|
|
</div>
|
|
|
|
Escribe <kbd>/image</kbd> para abrir el menú de imágenes o <kbd>/video</kbd> para abrir el menú de vídeos. Sube contenido multimedia nuevo o selecciona entre los archivos existentes.
|
|
|
|
<div id="embed">
|
|
### Incrustar
|
|
</div>
|
|
|
|
Escribe <kbd>/embed</kbd> y pega una URL de YouTube, Loom o Vimeo. El editor detecta el proveedor y genera el iframe automáticamente. Al buscar en el menú slash, los términos `youtube`, `yt`, `loom` y `vimeo` también muestran el comando **Embed**.
|
|
|
|
Para otras incrustaciones, escribe <kbd>/embed</kbd> y activa **Inserción manual** para escribir HTML personalizado.
|
|
|
|
<div id="upload-files">
|
|
### Subir archivos
|
|
</div>
|
|
|
|
Usa el explorador de archivos en la barra lateral para subir o buscar archivos. Arrastra y suelta archivos en una carpeta para organizar recursos multimedia.
|
|
|
|
<Frame>
|
|
<img
|
|
src="/images/editor/assets-light.png"
|
|
alt="Explorador de archivos abierto en el menú de la barra lateral del editor."
|
|
className="block dark:hidden"
|
|
/>
|
|
|
|
<img
|
|
src="/images/editor/assets-dark.png"
|
|
alt="Explorador de archivos abierto en el menú de la barra lateral del editor."
|
|
className="hidden dark:block"
|
|
/>
|
|
</Frame>
|
|
|
|
<div id="format-images">
|
|
## Formatear imágenes
|
|
</div>
|
|
|
|
Después de insertar una imagen en el modo visual, pasa el cursor por encima para mostrar una barra de herramientas con opciones de formato.
|
|
|
|
- **Vista previa en modo claro/oscuro**: Cambia entre el modo claro y oscuro para ver cómo se ve la imagen en cada tema.
|
|
- **Alineación**: Establece la alineación de la imagen como izquierda, centrada, derecha o a todo el ancho.
|
|
- **Frame**: Envuelve la imagen en un componente `<Frame>` para añadir un borde y un fondo.
|
|
- **Configuración**: Reemplaza la imagen o actualiza su texto alternativo.
|
|
|
|
<div id="manage-assets">
|
|
## Administra los recursos
|
|
</div>
|
|
|
|
<div id="organize-with-folders">
|
|
### Organiza con carpetas
|
|
</div>
|
|
|
|
Haz clic en el botón **+** del explorador de archivos para crear una nueva carpeta. Arrastra y suelta archivos y carpetas en el árbol de archivos para reordenarlos.
|
|
|
|
<div id="rename-and-edit-assets">
|
|
### Renombrar y editar recursos
|
|
</div>
|
|
|
|
Pasa el cursor sobre un recurso y haz clic en el botón **...** para cambiar el nombre del archivo o actualizar su texto alternativo (alt).
|
|
|
|
<div id="delete-assets">
|
|
### Eliminar recursos
|
|
</div>
|
|
|
|
Pasa el cursor sobre un recurso y haz clic en el botón <Icon icon="trash" /> para eliminarlo.
|
|
|
|
<div id="best-practices">
|
|
## Mejores prácticas
|
|
</div>
|
|
|
|
- **Usa nombres descriptivos**: Pon nombres claros a los archivos, como `api-dashboard-light.png` en lugar de `img1.png`.
|
|
- **Agrega texto alternativo (alt text)**: Proporciona texto alternativo descriptivo para mejorar la accesibilidad y el SEO.
|
|
- **Organiza con carpetas**: Agrupa los recursos relacionados, como variantes de modo claro y oscuro o recursos para un área de funcionalidad específica.
|
|
- **Usa formatos apropiados**: PNG para gráficos con transparencia, JPG para fotos, SVG para iconos y logotipos (no puedes subir archivos SVG a través del editor, pero puedes agregarlos a tu repositorio mediante Git). |