> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/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 los archivos 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 los archivos para abrirlos en el editor.
* Haz clic en el icono de búsqueda o pulsa <kbd>Cmd</kbd> + <kbd>P</kbd> (macOS) o <kbd>Ctrl</kbd> + <kbd>P</kbd> (Windows) para buscar archivos por nombre.

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

1. Haz clic en el botón **+** 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.

<Frame>
  <img src="https://mintcdn.com/anotherhorizon/UHlRmQ8bvjzUmdum/images/editor/mode-toggle-light.png?fit=max&auto=format&n=UHlRmQ8bvjzUmdum&q=85&s=c5534234892643e49278e8b6da0db572" alt="Conmutador de modo en la barra de herramientas." className="block dark:hidden" width="174" height="82" data-path="images/editor/mode-toggle-light.png" />

  <img src="https://mintcdn.com/anotherhorizon/UHlRmQ8bvjzUmdum/images/editor/mode-toggle-dark.png?fit=max&auto=format&n=UHlRmQ8bvjzUmdum&q=85&s=87fdb247bbfd75328246cd707e338f82" alt="Conmutador de modo en la barra de herramientas." className="hidden dark:block" width="174" 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.

* **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>.
* **Insertar enlaces**: Selecciona texto y presiona <kbd>Cmd</kbd> + <kbd>K</kbd>.

Consulta la documentación de [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.
* **Resaltado de sintaxis**: El código se resalta para mejorar la legibilidad.
* **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. Haz clic con el botón derecho en un archivo y selecciona **Configure** para abrir la hoja de configuración de la página.

<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.
* **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-files">
  ## Administrar archivos
</div>

Para mover archivos en tu navigation, arrástralos y suéltalos en la ubicación que quieras.

Para duplicar o eliminar archivos, haz clic derecho sobre el archivo y selecciona la acción que quieras realizar.