mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
63569d88cf
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
98 lines
3.8 KiB
Plaintext
98 lines
3.8 KiB
Plaintext
---
|
|
title: "Agregar contenido multimedia"
|
|
description: "Sube y usa imágenes y recursos en tu documentación."
|
|
keywords: ["editor","media","images","assets"]
|
|
---
|
|
|
|
<div id="supported-file-types">
|
|
## Tipos de archivo admitidos
|
|
</div>
|
|
|
|
- **Imágenes**: PNG, JPG, JPEG, SVG, GIF, WebP (máx. 20 MB)
|
|
- **Vídeos**: MP4, WebM (máx. 100 MB)
|
|
- **Fuentes**: 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 del archivo 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> para insertar contenido incrustado. Pega una URL de YouTube o Loom para generar automáticamente un iframe, o cambia a **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 (Scalable Vector Graphics) para iconos y logotipos. |