> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-dmytro-mintlify-update-0nfoy34.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Crear y editar páginas

> Crea, edita y organiza páginas de documentación en el editor web.

<div id="navigate-files">
  ## Navegar por archivos
</div>

Explora las páginas de tu documentación en la Tab **Navigation** del panel izquierdo.

* Haz clic en los elementos de navegación para expandirlos o contraerlos.
* Haz clic en las páginas para abrirlas en el editor.
* Haz clic en el icono de búsqueda o pulsa <kbd>Cmd</kbd> + <kbd>K</kbd> (macOS) o <kbd>Ctrl</kbd> + <kbd>K</kbd> (Windows) para buscar archivos y contenido. La búsqueda encuentra coincidencias tanto en los nombres de archivo como en el contenido de las páginas.
* Haz clic en el botón de ocultar barra lateral en la barra de herramientas para contraerla y darle más espacio al editor.

<Note>
  La Tab de navegación muestra las páginas por sus títulos. La Tab de archivos muestra las páginas por su nombre de archivo y extensión.
</Note>

<div id="create-new-pages">
  ## Crear páginas nuevas
</div>

1. Haz clic en el botón <Icon icon="plus" /> del elemento de navegación en el que quieras agregar una página.
2. Haz clic en **Add a page**.
3. Introduce un nombre de archivo. El editor añade automáticamente la extensión `.mdx`.

<div id="edit-content">
  ## Editar contenido
</div>

Cambia entre el modo visual y Markdown mode mediante el conmutador en la barra de herramientas. El editor web guarda tus cambios al cambiar de modo.

<Note>
  Los archivos de especificación de API (OpenAPI y AsyncAPI) son de solo lectura en el editor web. Puedes ver su contenido, pero no puedes editarlos directamente. Para actualizar un archivo de especificación, edítalo con tu editor de código preferido y envía los cambios a tu repositorio de documentación.
</Note>

<Frame>
  <img src="https://mintcdn.com/adminroletesting-dmytro-mintlify-update-0nfoy34/zqq4GrpqWTAZNPAr/images/editor/mode-toggle-light.png?fit=max&auto=format&n=zqq4GrpqWTAZNPAr&q=85&s=cfb759d5bad29be2a0e13c803307b02c" alt="Conmutador de modo en la barra de herramientas." className="block dark:hidden" width="332" height="84" data-path="images/editor/mode-toggle-light.png" />

  <img src="https://mintcdn.com/adminroletesting-dmytro-mintlify-update-0nfoy34/zqq4GrpqWTAZNPAr/images/editor/mode-toggle-dark.png?fit=max&auto=format&n=zqq4GrpqWTAZNPAr&q=85&s=ade7ba596922c71f48633e7801cd431d" alt="Conmutador de modo en la barra de herramientas." className="hidden dark:block" width="330" height="82" data-path="images/editor/mode-toggle-dark.png" />
</Frame>

<div id="visual-mode">
  ### Modo visual
</div>

Edita el contenido con vistas previas en tiempo real que muestran cómo se verá el contenido cuando se publique. El editor usa el corrector ortográfico integrado de tu navegador para resaltar las palabras mal escritas mientras escribes.

* **Agregar texto**: Escribe en el editor para ver cómo se ve el texto cuando se publica.
* **Dar formato al texto**: Usa la barra de herramientas para poner texto en negrita, cursiva o aplicar otros formatos.
* **Agregar componentes**: Presiona <kbd>/</kbd> para abrir el menú de componentes y seleccionar componentes.
* **Agregar imágenes**: Usa el componente de imagen desde el menú <kbd>/</kbd> o escribe <kbd>/image</kbd>.
* **Agregar videos**: Escribe <kbd>/video</kbd> para cargar o seleccionar un video.
* **Agregar contenido incrustado**: Escribe <kbd>/embed</kbd> y pega una URL de YouTube, Loom o Vimeo para incrustar el video, o cambia a **inserción manual** para HTML personalizado. Consulta [Agregar contenido multimedia](/es/editor/media) para más detalles.
* **Agregar diagramas Mermaid**: Escribe <kbd>/mermaid</kbd> para insertar un diagrama Mermaid con una vista previa interactiva, controles de zoom y desplazamiento, modo de pantalla completa y un editor de código.
* **Agregar fragmentos**: Escribe <kbd>/snippet</kbd> para buscar e insertar un fragmento reutilizable. El editor agrega automáticamente la declaración de importación necesaria.
* **Agregar ecuaciones matemáticas**: Escribe <kbd>/inline-math</kbd> para una ecuación LaTeX en línea o <kbd>/block-math</kbd> para una ecuación centrada en bloque. Primero [habilita LaTeX](/es/editor/configurations) en la configuración de tu sitio.
* **Agregar bloques de prompts**: Escribe <kbd>/prompt</kbd> para insertar una plantilla de prompt de IA con acciones de copia.
* **Editar tablas**: Cuando tu cursor esté dentro de una tabla, usa la barra de herramientas flotante para agregar o eliminar filas y columnas, o combinar celdas.
* **Insertar emojis**: Escribe <kbd>:</kbd> seguido de una palabra clave para abrir el selector de emojis. Usa las teclas de flecha para navegar por la cuadrícula y presiona <kbd>Enter</kbd> para insertar el emoji seleccionado. El selector busca en nombres de emojis, etiquetas y códigos cortos.
* **Insertar enlaces**: Selecciona texto y presiona <kbd>Cmd</kbd> + <kbd>K</kbd>, o arrastra 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**: Haz clic derecho en una página del árbol de navegación y selecciona **Copy link**, luego pega el enlace en tu contenido. El editor reconoce los enlaces a otras páginas de la misma documentación y los convierte en enlaces internos automáticamente. Los enlaces pegados siguen funcionando incluso si más adelante mueves o renombras la página de destino.

Consulta [Components](/es/components) para obtener la lista completa de componentes disponibles.

<div id="markdown-mode">
  ### Modo Markdown
</div>

Edita el código fuente de MDX.

* **Edición directa de MDX**: Escribe sintaxis de MDX y Markdown para controlar el contenido con precisión.
* **Propiedades de componentes**: Configura las propiedades y opciones de los componentes.
* **Frontmatter**: Edita los metadatos de la página en la parte superior del archivo.

Consulta [Formatear texto](/es/create/text) y [Formatear código](/es/create/code) para obtener más información sobre la sintaxis de MDX.

<div id="configure-pages">
  ## Configurar páginas
</div>

Configura la configuración de las páginas para controlar cómo aparecen en la navigation, en los resultados de búsqueda y en el diseño de tu sitio.

Pasa el cursor sobre una página y haz clic en el icono de engranaje. También puedes hacer clic con el botón derecho en un archivo y seleccionar **Settings**.

<Frame>
  <img src="https://mintcdn.com/adminroletesting-dmytro-mintlify-update-0nfoy34/zqq4GrpqWTAZNPAr/images/editor/page-settings-light.png?fit=max&auto=format&n=zqq4GrpqWTAZNPAr&q=85&s=e000b10aab52a91ccac12843bbeadd6e" alt="Una página resaltada en la barra lateral de modo que el icono de engranaje de configuración sea visible." className="block dark:hidden" width="506" height="384" data-path="images/editor/page-settings-light.png" />

  <img src="https://mintcdn.com/adminroletesting-dmytro-mintlify-update-0nfoy34/zqq4GrpqWTAZNPAr/images/editor/page-settings-dark.png?fit=max&auto=format&n=zqq4GrpqWTAZNPAr&q=85&s=18f5284531e4f6b7b5a363afb74e74a3" alt="Una página resaltada en la barra lateral de modo que el icono de engranaje de configuración sea visible." className="hidden dark:block" width="508" height="384" data-path="images/editor/page-settings-dark.png" />
</Frame>

<div id="customize-navigation-appearance">
  ### Personaliza la apariencia de la navegación
</div>

Controla cómo se muestra la página en la barra lateral de navegación de tu sitio.

* **Title**: Define el encabezado principal. Aparece en la navegación, en las pestañas del navegador y en los resultados de búsqueda.
* **Slug**: Define la ruta URL de la página. De forma predeterminada, el slug es la ruta relativa a la raíz de tu repositorio sin la extensión del archivo. Por ejemplo, `guides/getting-started.mdx` se convierte en `guides/getting-started`. Al cambiar el slug, se cambia el nombre del archivo y se mueve para que coincida con la nueva ruta.
* **Título de la barra lateral**: Muestra un texto más corto en la navegación cuando el título completo es demasiado largo para la barra lateral.
* **Icon**: Añade un marcador visual junto a la página para ayudar a los usuarios a identificarla rápidamente.
* **URL externa**: Enlaza a un sitio externo en lugar de una página. Úsalo para añadir recursos externos a tu navegación.

<div id="optimize-for-search-and-sharing">
  ### Optimiza para búsqueda y para compartir
</div>

Ayuda a los usuarios a encontrar tu página y mejora cómo aparece cuando se comparte.

* **Description**: Escribe un breve resumen. Aparece en los resultados de búsqueda y en las metaetiquetas de SEO.
* **Keywords**: Añade términos de búsqueda relevantes para ayudar a los usuarios a descubrir esta página.
* **OG Image URL**: Configura una imagen de vista previa personalizada para las publicaciones en redes sociales y las vistas previas de enlaces.

<div id="control-page-layout">
  ### Controlar el diseño de la página
</div>

Elige cómo se muestra la página para que se adapte a tus necesidades de contenido.

* **Diseño estándar** (`default`): Página predeterminada con barra lateral de navegación e índice de contenido.
* **Diseño de ancho completo** (`wide`): Oculta el índice de contenido para permitir diseños más anchos para tablas, diagramas u otro contenido.
* **Diseño centrado** (`center`): Oculta la barra lateral y el índice de contenido para mejorar la legibilidad en páginas con mucho texto, como las páginas de cambios.
* **Ancho personalizado** (`custom`): Diseño mínimo con solo la barra de navegación superior para páginas de destino u otros diseños únicos.

<div id="manage-pages">
  ## Administrar páginas
</div>

<div id="move-pages">
  ### Mover páginas
</div>

Arrastra y suelta las páginas para reordenarlas en tu navigation o para mover archivos entre carpetas en el árbol de archivos.

<div id="rename-pages">
  ### Renombrar páginas
</div>

En el explorador de archivos, haz clic derecho en un archivo y luego haz clic en **Renombrar**. El editor conserva automáticamente la extensión del archivo. Solo necesitas introducir el nombre de la página.

<div id="duplicate-pages">
  ### Duplicar páginas
</div>

Haz clic derecho sobre una página y selecciona **Duplicar**.

<div id="delete-pages">
  ### Eliminar páginas
</div>

Haz clic con el botón derecho en una página y selecciona **Delete**. Al eliminar una página, se quitará automáticamente de tu navigation.

<div id="hide-pages">
  ### Ocultar páginas
</div>

Para quitar una página de navigation sin eliminar el archivo, habilita el interruptor **Hidden** en la configuración de la página. Una página oculta permanece en tu repositorio y los usuarios aún pueden acceder a ella yendo directamente a la URL de la página. Puedes volver a mostrar una página desde la configuración de la página o agregándola a la navigation de tu `docs.json`.