Saltar al contenido principal
El panel izquierdo tiene dos vistas: Navigation y Files. Navigation muestra la estructura de su barra lateral tal como la ven los visitantes. Haga clic en una página para abrirla. Files muestra el árbol de archivos completo de su repositorio, incluidos los archivos que no están en su navegación. Haga clic en cualquier archivo para abrirlo. Para alternar entre vistas, haga clic en el icono de archivo o presione Cmd + Shift + F (macOS) o Ctrl + Shift + F (Windows). Haga clic en el icono de búsqueda o presione Cmd + K (macOS) o Ctrl + K (Windows) para buscar por nombre de archivo o contenido de la página.

​
Administrar archivos y carpetas

Use la vista Files para organizar su contenido:
  • Crear una carpeta: Haga clic en el botón de nueva carpeta en la parte superior del árbol de archivos, o haga clic con el botón derecho en una carpeta existente y seleccione New folder.
  • Renombrar un archivo o carpeta: Haga clic con el botón derecho sobre el elemento y seleccione Rename.
  • Abrir archivos no listados: Haga clic en cualquier archivo del árbol para abrirlo, incluso si no está incluido en su navegación.
Los archivos que no están en su navegación quedan como no listados. Existen en su repositorio pero no aparecerán en la barra lateral publicada.

​
Crear páginas nuevas

​
Añadir una página a la navegación

  1. Haga clic en el botón de más en el elemento de navegación donde quiere añadir una página.
  2. Haga clic en Add a page.
  3. Introduzca un nombre de archivo. El editor añade la extensión .mdx automáticamente.

​
Crear una página no listada

Las páginas no listadas existen en su repositorio pero no aparecen en la navegación. Son útiles para contenido en borrador, fragmentos reutilizables o páginas que planea añadir a la navegación más adelante. Haga clic con el botón derecho en cualquier carpeta de la vista Files y seleccione New file. Introduzca un nombre de archivo y el editor crea la página sin añadirla a la navegación. Puede añadirla a la navegación más tarde desde la pestaña Navigation.

​
Editar contenido

Alterne entre el modo visual y source usando el conmutador de modo en la barra de herramientas debajo de la barra superior. Haga clic en el icono de ojo o presione Cmd + Shift + M (macOS) o Ctrl + Shift + M (Windows) para cambiar al modo visual. Haga clic en el icono de código o presione Cmd + Shift + M (macOS) o Ctrl + Shift + M (Windows) para cambiar al modo source. El modo visual muestra una vista previa en tiempo real a medida que escribe. Presione / para abrir el menú de componentes e insertar componentes, imágenes, vídeos y otro contenido. También puede arrastrar y soltar archivos multimedia directamente sobre la página desde su ordenador o desde el árbol de navegación. Otros atajos:
  • Insertar un enlace: Seleccione texto y presione Cmd + K (macOS) o Ctrl + K (Windows), o arrastre una página desde el árbol de navegación al editor para crear un enlace con el título de la página.
  • Enlazar a otra página: Haga clic con el botón derecho en una página del árbol de navegación, haga clic en Copy link y luego pegue el enlace en su contenido. El editor reconoce los enlaces internos a otras páginas y los convierte.
  • Insertar medios de su proyecto: Arrastre una imagen o vídeo desde el árbol de navegación a la página para incrustarlos en línea. Los formatos admitidos incluyen PNG, JPG, JPEG, GIF, WebP, SVG, MP4 y WebM.
  • Insertar un emoji: Escriba : seguido de una palabra clave para abrir el selector de emojis.
  • Editar una tabla: Cuando su cursor está dentro de una tabla, use la barra de herramientas flotante para añadir o eliminar filas y columnas, o combinar celdas.
El modo source le da acceso directo al código MDX. Úselo para tener un control preciso sobre las propiedades de los componentes y el frontmatter. Para una lista completa de componentes, consulte Components. Para la sintaxis MDX, consulte Format text y Format code.

​
Vista de diff

Para comparar su página actual con la última versión publicada, haga clic en el botón View diff en la barra de herramientas, o presione Cmd + Shift + D (macOS) o Ctrl + Shift + D (Windows). En modo visual se muestra un diff visual. En modo source se muestra un diff de texto. Haga clic en Exit diff o presione el atajo nuevamente para volver a la edición. También puede abrir un diff desde el menú de publicación. Haga clic en Publish y luego en cualquier archivo modificado de la lista.

​
Acciones de bloque

En modo visual, pase el cursor sobre cualquier bloque para mostrar un controlador de arrastre a la izquierda. Haga clic en el controlador para abrir un menú contextual con acciones para ese bloque:
  • Turn into: Convierte el bloque en otro tipo: texto, encabezados, cita en bloque o lista.
  • Duplicate: Inserta una copia del bloque inmediatamente después.
  • Delete: Elimina el bloque.
El menú de acciones de bloque en modo visual.

​
Índice de contenido

En modo visual, el editor muestra un minimapa en el lado derecho de la página que refleja la estructura de encabezados de su documento. Pase el cursor sobre el minimapa para expandirlo en un índice de contenido completo. Haga clic en cualquier encabezado para desplazarse a esa sección.

​
Opciones de los bloques de código

Al editar un bloque de código en modo visual, puede:
  • Resaltar o enfocar líneas: Seleccione texto dentro del bloque de código y luego use la barra de herramientas que aparece para marcar líneas como resaltadas o enfocadas. Resaltar enfatiza visualmente las líneas. Enfocar líneas atenúa todo lo demás.
  • Marcar líneas de diff: Seleccione líneas y use la barra de herramientas para marcarlas como adiciones (+) o eliminaciones (-).
  • Wrap: Alterna el ajuste de línea en la configuración del bloque de código.
  • Expandable: Hace que el bloque de código sea contraíble para que los lectores puedan expandirlo cuando lo deseen.

​
Administrar páginas

  • Mover: Arrastre y suelte las páginas para reordenarlas en la navegación.
  • Renombrar: Haga clic con el botón derecho en una página y seleccione Rename.
  • Duplicar: Haga clic con el botón derecho en una página y seleccione Duplicate.
  • Eliminar: Haga clic con el botón derecho en una página y seleccione Delete. El editor quita la página de la navegación automáticamente.

​
Páginas eliminadas mediante Git

Si un compañero de equipo elimina una página a través de Git mientras la tiene abierta, el editor entra en modo de solo lectura y muestra una barra de aviso. El editor conserva su contenido para que pueda copiarlo antes de salir de la página.

​
Configurar páginas

Pase el cursor sobre una página y haga clic en el icono de engranaje, o haga clic con el botón derecho y seleccione Settings, para configurar:
  • Title, Slug y Sidebar title: Controlan cómo aparece la página en la navegación y su URL.
  • Description y Keywords: Mejoran la búsqueda y el SEO.
  • Layout: Elija entre estándar, ancho, centrado o personalizado.
Para más detalles sobre cada ajuste, consulte Pages.

​
Añadir medios

​
Imágenes y vídeos

Escriba /image para subir una nueva imagen o seleccionar una existente de su repositorio. Escriba /video para subir o seleccionar un vídeo. También puede arrastrar y soltar archivos desde su ordenador directamente sobre una página. En modo visual, el archivo se inserta en línea. En modo source, el editor inserta la ruta del archivo en la posición del cursor. Las imágenes se guardan en su carpeta images/ y los vídeos en videos/. Para reutilizar medios que ya existen en su proyecto, arrastre un archivo de imagen o vídeo desde el árbol de navegación a la página. El editor incrusta el activo en línea.

​
Variantes de imagen claras y oscuras

Después de insertar una imagen en modo visual, pase el cursor sobre ella para mostrar la barra de herramientas de imagen. Use Light/dark variants para subir imágenes separadas para modo claro y oscuro.

​
Incrustar medios externos

Escriba /embed y pegue una URL de YouTube, Loom o Vimeo. El editor detecta el proveedor y genera el iframe. Buscar youtube, yt, loom o vimeo en el menú de barra inclinada también muestra el comando Embed. Para otras incrustaciones, escriba /embed y active Manual embed para escribir HTML personalizado. Para más información sobre el formato de imágenes y el uso del componente Frame, consulte Images and embeds.

Temas relacionados

Preguntar al agenteCrear diseños de página personalizadosCrear páginas de API manuales