Descripción General de Edición de Sitios

La página Edición de Sitios en VpAdmin proporciona una interfaz potente y optimizada para gestionar y editar tus sitios web, simplificando todo el proceso de publicación desde la creación de contenido hasta el despliegue. Combina una vista de árbol de archivos, un editor de markdown/código y herramientas robustas de control de versiones, lo que te permite ajustar el contenido, la estructura y el flujo de trabajo de despliegue de tu sitio con facilidad.

Descripción General

La página está dividida en tres secciones principales:

1. Barra lateral izquierda: Proporciona acceso al árbol de archivos del proyecto, varias acciones e información relacionada con el proyecto.

2. Redimensionador: Un separador que se puede arrastrar y que se utiliza para ajustar el ancho de la barra lateral izquierda.

3. Área de contenido principal: Muestra el contenido del archivo en un editor, pestañas para diferentes archivos abiertos y herramientas de gestión de proyectos.

   

Barra Lateral Izquierda

La barra lateral izquierda está diseñada para la navegación y gestión de proyectos, e incluye varios componentes clave:

Toggle de Encabezado

• Funcionalidad: Alterna la visibilidad de la sección de encabezado, que contiene el selector de proyecto, el botón de actualización y el progreso de la cuota del proyecto.

• Acción: Al hacer clic en el icono de toggle del encabezado, se alterna la visibilidad del encabezado.

Selector de Proyecto

• Funcionalidad: Selecciona un proyecto que deseas editar.

• Acción: Haz clic en el menú desplegable y elige el proyecto de la lista.

Progreso de Cuota del Proyecto

• Funcionalidad: Muestra la cuota de uso actual del sitio. La capacidad de almacenamiento mostrada variará según el plan de precios seleccionado para tu sitio. Para más detalles, consulta Precios.

• Captura de Pantalla del Progreso de Cuota del Proyecto:

  

Barra de Acción

• Funcionalidad: Proporciona un conjunto de botones para gestionar los archivos y realizar cambios en tu sitio.

• Disposición: La barra de acción incluye los siguientes botones:

  • Mostrar Puntos de Recuperación: Te permite acceder y gestionar los puntos de recuperación de tu proyecto, ayudándote a volver a versiones anteriores.
  • Guardar Todo: Guarda todos los cambios que has realizado.
  • Expandir Todo: Expande todos los nodos del árbol de archivos.
  • Contraer Todo: Contrae todos los nodos del árbol de archivos.
  • Mostrar/Ocultar Todos los Archivos: Alterna la visualización de todos los archivos o solo aquellos relacionados con el contenido de tu sitio.
  • Descargar Proyecto: Descarga un archivo zip que contiene los archivos de tu sitio.
  • Mostrar/Ocultar Archivos Cambiados: Alterna la visualización de los archivos modificados en el árbol.
  • Ver Historial: Abre el historial de commits, permitiéndote volver a una versión anterior.
  • Enviar Cambios: Envía los archivos modificados seleccionados como una nueva versión de tu sitio, pero no publica las modificaciones.
  • Publicar Proyecto: Publica tu sitio web, haciendo que los cambios se activen en tu dominio.

• Captura de Pantalla de la Barra de Acción:

  

Barra de Progreso de Publicación

• Funcionalidad: Muestra el progreso actual de la publicación de tu sitio o el resultado de la publicación más reciente.

• Acción: Haz clic en el botón "+" para ocultar/mostrar detalles sobre el progreso actual. Si el sitio actual no se está publicando, se mostrará el resultado de la última publicación. Si la última publicación falló, puedes ver los registros de errores.

Árbol de Archivos

• Funcionalidad: Muestra la estructura de archivos del sitio, lo que te permite navegar y seleccionar archivos para editar.

• Características:

  • Navegación: Utiliza el icono de flecha para expandir y contraer carpetas.
  • Selección de Archivos: Haz clic en el nombre del archivo para abrirlo en el editor.
  • Arrastrar y Soltar: Arrastra y suelta archivos para organizar tu sitio; también puedes arrastrar y soltar archivos locales para subirlos a tu sitio.
  • Menú Contextual: Pasa el ratón sobre el botón de menú contextual para revelar un menú desplegable que ofrece más operaciones relacionadas con el nodo.

Vista de Archivos Modificados

• Funcionalidad: Muestra todos los archivos que has modificado, con un indicador de estado. También puedes comparar los cambios y revertir las modificaciones.

Vista de Historial de Versiones

• Funcionalidad: Muestra el historial de tus versiones, lo que te permite navegar a través de la versión del proyecto y revertir tu sitio a una versión específica. Nota: Esto perderá todos los cambios realizados después de esta versión. El sistema creará automáticamente un punto de recuperación para guardar el estado actual del sitio. Además, las versiones con un icono verde se han publicado, mientras que las versiones con un icono gris aún no se han publicado en línea.

Redimensionador

• Funcionalidad: Te permite cambiar el tamaño del ancho de la barra lateral izquierda arrastrándola hacia la izquierda o hacia la derecha.

Área de Contenido Principal

El área de contenido principal proporciona una interfaz para ver y editar diferentes formatos de archivo y detalles del proyecto.

Pestañas

• Funcionalidad: Muestra múltiples archivos abiertos como pestañas, lo que permite una navegación fácil.
• Características:

  • Etiqueta de Pestaña: Muestra el nombre del archivo e indica el estado de no guardado o guardado mediante un punto y un indicador de carga.

  • Menú del Clic Derecho: Haz clic derecho en una pestaña para acceder a opciones como: cerrar, actualizar.

    

Editor de Archivos

• Funcionalidad: Proporciona un editor para ver y editar el contenido del archivo en función de diferentes formatos, incluidos markdown, código e imagen.

• Características:

  • Editor de Markdown: Admite formato enriquecido, vista previa en tiempo real y guardado de documentos Markdown.
  • Editor de Código: Admite el resaltado de sintaxis y la edición de archivos de código.
  • Visor de Imágenes: Muestra archivos de imagen.
  • Vista Diff: Muestra los cambios entre dos versiones.

Conclusión

La página Edición de Sitios en VpAdmin proporciona un entorno optimizado para la gestión de contenido de sitios web, lo que te permite navegar fácilmente por tu proyecto, editar archivos y desplegar cambios de manera efectiva, todo mientras te beneficias de un robusto control de versiones y flujos de trabajo de publicación simplificados. Con su diseño intuitivo y sus potentes funciones, puedes mantener y actualizar tus sitios web de forma fluida a través de VpAdmin.