AEM Extensión de corchetes de aem-brackets-extension
Información general overview
AEM AEM La extensión de brackets proporciona un flujo de trabajo fluido para editar componentes de y bibliotecas de cliente, y utiliza la potencia de Corchetes editor de código, que proporciona acceso desde el editor de código a los archivos y capas de Photoshop. AEM La fácil sincronización que proporciona la extensión (no se requiere Maven ni File Vault) aumenta la eficacia del desarrollador y también ayuda a los desarrolladores de front-end con conocimientos limitados a participar en proyectos. Esta extensión también proporciona cierta compatibilidad con el Lenguaje de plantilla de HTML (HTL), que elimina la complejidad de JSP para que el desarrollo de componentes sea más fácil y seguro.
Características features
AEM Las principales características de la extensión de corchetes de la son:
- AEM Sincronización automatizada de los archivos modificados en la instancia de desarrollo de la.
- Sincronización bidireccional manual de archivos y carpetas.
- Sincronización completa del paquete de contenido del proyecto.
- Finalización de código HTL para expresiones y
data-sly-*
instrucciones de bloque.
AEM Además, Brackets incluye muchas funciones útiles para los desarrolladores de front-end de:
- Compatibilidad con archivos Photoshop para extraer información de un archivo de PSD, como capas, medidas, colores, fuentes, textos, etc.
- Sugerencias para el código del PSD para reutilizar fácilmente esta información extraída en el código.
- Compatibilidad con preprocesadores CSS, como LESS y SCSS.
- Y cientos de extensiones adicionales que cubren necesidades más específicas.
Instalación installation
Corchetes brackets
AEM La extensión de corchetes de la serie admite corchetes de la versión 1.0 o posterior.
Descargue la última versión de Brackets de paréntesis.io.
La extensión de the-extension
Para instalar la extensión, siga estos pasos:
-
Abra los corchetes. En el menú Archivo, seleccione Extension Manager…
-
Entrar AEM en la barra de búsqueda y busque AEM Extensión de corchetes de.
-
Clic Instalar.
-
Cierre el cuadro de diálogo y el Extension Manager una vez finalizada la instalación.
Introducción getting-started
El proyecto del paquete de contenido the-content-package-project
AEM Una vez instalada la extensión, puede empezar a desarrollar componentes de la abriendo una carpeta de paquete de contenido desde el sistema de archivos con corchetes.
El proyecto debe contener al menos:
-
a
jcr_root
carpeta (por ejemplo,myproject/jcr_root
) -
a
filter.xml
(por ejemplo,myproject/META-INF/vault/filter.xml
); para obtener más detalles acerca de la estructura delfilter.xml
consulte el archivo Definición del filtro de Workspace.
Entre paréntesis Archivo menú, elija Abrir carpeta… y elija la jcr_root
o la carpeta del proyecto principal.
jcr_root
carpeta en Corchetes. A continuación, siga los pasos a continuación para configurar el Configuración de proyecto AEM y, finalmente, cargue todo el paquete en la instancia de desarrollo de su haciendo un Exportar paquete de contenido como se indica más adelante en la sección Sincronización completa del paquete de contenido./content/todo.html
AEM AEM En la URL de la instancia de desarrollo de la puede empezar a realizar modificaciones en el código de Brackets y ver cómo, después de realizar una actualización en el explorador web, los cambios se sincronizan inmediatamente con el servidor de la.Configuración de proyecto project-settings
AEM Para sincronizar el contenido con y desde una instancia de desarrollo de, debe definir la Configuración del proyecto. Esto se puede hacer accediendo a la AEM menú y elegir Configuración del proyecto…
La Configuración del proyecto permite definir lo siguiente:
- La URL del servidor (por ejemplo,
http://localhost:4502
) - Si se toleran los servidores que no tienen un certificado HTTPS válido (manténgalo sin marcar, a menos que sea necesario)
- El nombre de usuario utilizado para sincronizar contenido (por ejemplo,
admin
) - La contraseña del usuario (por ejemplo,
admin
)
Sincronización de contenido synchronizing-content
AEM La extensión Brackets proporciona los siguientes tipos de sincronización de contenido para archivos y carpetas permitidos por las reglas de filtrado definidas en filter.xml
:
Sincronización Automática De Archivos Cambiados automated-synchronization-of-changed-files
AEM Esto solo sincronizará los cambios de Paréntesis a la instancia de la, pero nunca al revés.
Sincronización bidireccional manual manual-bidirectional-synchronization
En el Explorador del proyecto, abra el menú contextual haciendo clic con el botón secundario en cualquier archivo o carpeta y, a continuación, seleccione Exportar a servidor o Importar desde servidor se puede acceder a las opciones.
jcr_root
carpeta, la Exportar a servidor y Importar desde servidor las entradas del menú contextual están desactivadas.Sincronización completa del paquete de contenido full-content-package-synchronization
En el AEM , el menú Exportar paquete de contenido o Importar paquete de contenido Las opciones de permiten sincronizar todo el proyecto con el servidor.
Estado de sincronización synchronization-status
AEM La extensión de corchetes de la barra de herramientas de la parte derecha de la ventana Corchetes, que muestra un icono de notificación que indica el estado de la última sincronización, incluye la siguiente información:
- verde: todos los archivos se han sincronizado correctamente
- azul: hay una operación de sincronización en curso
- amarillo: algunos archivos no se sincronizaron
- rojo: no se sincronizó ningún archivo
Al hacer clic en el icono de notificación, se abre el cuadro de diálogo Informe de estado de sincronización que muestra todos los estados de cada archivo sincronizado.
filter.xml
se sincronizarán, independientemente del método de sincronización utilizado..vltignore
Los archivos de se admiten para excluir el contenido de la sincronización con el repositorio y desde él.Edición de código HTL editing-htl-code
AEM La extensión Brackets también incluye algunas características de finalización automática para facilitar la escritura de atributos y expresiones HTL.
Atributo de finalización automática attribute-auto-completion
- En un atributo de HTML, escriba
sly
. El atributo se completa automáticamente endata-sly-
. - Seleccione el atributo HTL en la lista desplegable.
Expresión: finalización automática expression-auto-completion
Dentro de una expresión ${}
, los nombres de variables comunes se completan automáticamente.
Más información more-information
AEM La extensión de Brackets es un proyecto de código abierto, alojado en GitHub por el Adobe Marketing Cloud organización, bajo la licencia de Apache, versión 2.0:
- Repositorio de códigos: https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
- Licencia de Apache, versión 2.0: https://www.apache.org/licenses/LICENSE-2.0.html
El editor de código Brackets también es un proyecto de código abierto, alojado en GitHub por el Adobe Systems Incorporated organización:
- Repositorio de códigos: https://github.com/adobe/brackets
¡Siéntase libre de contribuir!