Personalización de la creación de páginas customizing-page-authoring
Adobe Experience Manager AEM () proporciona varios mecanismos para permitirle personalizar la funcionalidad de creación de páginas (y las consolas) de su instancia de creación.
-
Clientlibs
Clientlibs le permite ampliar la implementación predeterminada para obtener nuevas funcionalidades, mientras reutiliza las funciones, los objetos y los métodos estándar. Al personalizar, puede crear su propia clientlib en
/apps.
. La nueva clientlib debe:- dependen de la clientlib de creación
cq.authoring.editor.sites.page
- formar parte de la categoría
cq.authoring.editor.sites.page.hook
apropiada
- dependen de la clientlib de creación
-
Superposiciones
Las superposiciones se basan en definiciones de nodo y le permiten superponer la funcionalidad estándar (en
/libs
) con su propia funcionalidad personalizada (en/apps
). Al crear una superposición, no es necesaria una copia 1:1 del original, ya que la fusión de recursos de sling permite la herencia.
AEM Se pueden utilizar de muchas maneras para ampliar la funcionalidad de creación de páginas en la instancia de. A continuación se cubre una selección (en un nivel superior).
- Usando y creando clientlibs.
- Usando y creando superposiciones.
- Granite
- AEM Estructura de la interfaz de usuario táctil habilitada para la creación de páginas de para obtener detalles de las áreas estructurales utilizadas para la creación de páginas.
/libs
./libs
se sobrescribe la próxima vez que actualice la instancia (y es posible que se sobrescriba al aplicar una revisión o un paquete de características).- Vuelva a crear el elemento necesario (es decir, tal como existe en
/libs
) en/apps
- Realizar cambios en
/apps
Añadir nueva capa (modo) add-new-layer-mode
Cuando está editando una página, hay varios modos disponibles. Estos modos se implementaron usando layers. Permiten acceder a diferentes tipos de funcionalidades para el mismo contenido de página. Las capas estándar son: editar, previsualizar, anotar, desarrollador y segmentación.
Ejemplo de capa: estado de Live Copy layer-example-live-copy-status
AEM Una instancia de estándar proporciona la capa de MSM. Esto accede a los datos relacionados con la administración de varios sitios y los resalta en la capa.
Para verlo en acción, puede editar cualquier página de Copia de idioma de We.Retail (o cualquier otra página de Live Copy) y seleccionar el modo Estado de Live Copy.
Puede encontrar la definición de capa de MSM (para referencia) en:
/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js
Ejemplo de código code-sample
Este es un paquete de muestra que muestra cómo crear una capa (modo), que es una nueva capa para la vista MSM.
CÓDIGO EN GITHUB
Puede encontrar el código de esta página en GitHub
- Abrir proyecto aem-authoring-new-layer-mode en GitHub
- Descargar el proyecto como archivo ZIP
Añadir nueva categoría de selección al navegador de recursos add-new-selection-category-to-asset-browser
El explorador de recursos muestra recursos de varios tipos o categorías (por ejemplo, imágenes y documentos). Los recursos también se pueden filtrar por estas categorías de recursos.
Ejemplo de código code-sample-1
aem-authoring-extension-assetfinder-flickr
es un paquete de muestra que muestra cómo agregar un grupo al buscador de recursos. Este ejemplo se conecta al flujo público de Flickr y los muestra en el panel lateral.
CÓDIGO EN GITHUB
Puede encontrar el código de esta página en GitHub
- Abrir el proyecto aem-authoring-extension-assetfinder-flickr en GitHub
- Descargar el proyecto como archivo ZIP
Filtrado de recursos filtering-resources
Al crear páginas, el usuario debe seleccionar a menudo entre recursos (por ejemplo, páginas, componentes y recursos). Esto puede adoptar la forma de una lista, por ejemplo, desde la que el autor debe elegir un elemento.
Para mantener la lista a un tamaño razonable y también relevante para el caso de uso, se puede implementar un filtro en forma de predicado personalizado. Por ejemplo, si se usa el componente pathbrowser
Granite para permitir que el usuario seleccione la ruta de acceso a un recurso concreto, las rutas presentadas se pueden filtrar de la siguiente manera:
- Implemente el predicado personalizado implementando la interfaz
com.day.cq.commons.predicate.AbstractNodePredicate
. - Especifique un nombre para el predicado y haga referencia a ese nombre cuando use
pathbrowser
.
Para obtener más información sobre la creación de un predicado personalizado, consulte Implementación de un evaluador de predicados personalizado para el Generador de consultas.
com.day.cq.commons.predicate.AbstractNodePredicate
también funciona en la IU clásica.Agregar una nueva acción a una barra de herramientas de componentes add-new-action-to-a-component-toolbar
Cada componente (normalmente) tiene una barra de herramientas que proporciona acceso a una serie de acciones que se pueden realizar en ese componente.
Ejemplo de código code-sample-2
aem-authoring-extension-toolbar-screenshot
es un paquete de ejemplo que muestra cómo crear una acción personalizada de la barra de herramientas para procesar componentes.
CÓDIGO EN GITHUB
Puede encontrar el código de esta página en GitHub
- Abrir el proyecto aem-authoring-extension-toolbar-screenshot en GitHub
- Descargar el proyecto como archivo ZIP
Añadir nuevo editor en contexto add-new-in-place-editor
Editor in situ estándar standard-in-place-editor
En una instalación estándar de AEM:
-
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
Contiene definiciones de los distintos editores disponibles.
-
Existe una conexión entre el editor y cada tipo de recurso (como en el componente ) que puede utilizarlo:
-
cq:inplaceEditing
por ejemplo:
-
/libs/foundation/components/text/cq:editConfig
-
/libs/foundation/components/image/cq:editConfig
-
propiedad:
editorType
Define el tipo de editor en línea que se utiliza cuando se activa la edición in situ para ese componente; por ejemplo,
text
,textimage
,image
,title
.
-
-
-
-
Se pueden configurar detalles de configuración adicionales del editor mediante un nodo
config
que contenga configuraciones y un nodoplugin
que contenga los detalles de configuración del complemento necesarios.A continuación se muestra un ejemplo de definición de relaciones de aspecto para el complemento de recorte de imágenes del componente de imagen. Debido al potencial del tamaño de pantalla limitado, las relaciones de aspecto de recorte se trasladaron al editor de pantalla completa y solo se pueden ver allí.
code language-xml <cq:inplaceEditing jcr:primaryType="cq:InplaceEditingConfig" active="{Boolean}true" editorType="image"> <config jcr:primaryType="nt:unstructured"> <plugins jcr:primaryType="nt:unstructured"> <crop jcr:primaryType="nt:unstructured"> <aspectRatios jcr:primaryType="nt:unstructured"> <_x0031_6-10 jcr:primaryType="nt:unstructured" name="16 : 10" ratio="0.625"/> </aspectRatios> </crop> </plugins> </config> </cq:inplaceEditing>
note caution CAUTION AEM Las proporciones de recorte de la propiedad ratio
se definen como altura/anchura. Esto es distinto de la definición convencional de anchura/altura y se realiza por motivos de compatibilidad con sistemas anteriores. Los usuarios autores no notarán ninguna diferencia siempre que defina claramente la propiedadname
, ya que esto es lo que se muestra en la interfaz de usuario.
Creación de un nuevo editor in situ creating-a-new-in-place-editor
Para implementar un nuevo editor in situ (dentro de la clientlib):
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
-
Implementar:
setUp
tearDown
-
Registre el editor (incluye el constructor):
editor.register
-
Proporcione la conexión entre el editor y cada tipo de recurso (como en el componente) que pueda utilizarlo.
Ejemplo de código para crear un nuevo editor en contexto code-sample-for-creating-a-new-in-place-editor
AEM aem-authoring-extension-inplace-editor
es un paquete de muestra que muestra cómo crear un editor local en el sitio de la aplicación de la.
CÓDIGO EN GITHUB
Puede encontrar el código de esta página en GitHub
- Abrir el proyecto aem-authoring-extension-inplace-editor en GitHub
- Descargar el proyecto como archivo ZIP
Configuración de varios editores locales configuring-multiple-in-place-editors
Es posible configurar un componente para que tenga varios editores in situ. Cuando se configuran varios editores locales, puede seleccionar el contenido adecuado y abrir el editor correspondiente. Consulte la documentación de Configuración de varios editores locales para obtener más información.
Añadir una acción de nueva página add-a-new-page-action
Para agregar una nueva acción de página a la barra de herramientas de la página, por ejemplo, una acción Volver a sitios (consola).
Ejemplo de código code-sample-3
aem-authoring-extension-header-backtosites
es un paquete de ejemplo que muestra cómo crear una acción personalizada de la barra de encabezado para volver a la consola Sitios.
CÓDIGO EN GITHUB
Puede encontrar el código de esta página en GitHub
- Abrir el proyecto aem-authoring-extension-header-backtosites en GitHub
- Descargar el proyecto como archivo ZIP
Personalizar el flujo de trabajo de solicitud de activación customizing-the-request-for-activation-workflow
El flujo de trabajo predeterminado, Solicitud de activación:
-
Aparecerá automáticamente en el menú apropiado cuando un autor de contenido no tenga los derechos de replicación adecuados, pero sí tiene miembros de Usuarios y autores DAM.
-
De lo contrario, no se muestra nada, ya que se han eliminado los derechos de replicación.
Para tener un comportamiento personalizado en dicha activación, puede superponer el flujo de trabajo Solicitud de activación:
-
En la superposición
/apps
, el asistente Sitios:/libs/wcm/core/content/common/managepublicationwizard
note note NOTE Esto en sí, anula la instancia común de: /libs/cq/gui/content/common/managepublicationwizard
-
Actualice el modelo de flujo de trabajo y las configuraciones/scripts relacionados según sea necesario.
-
Elimine el derecho a la acción
replicate
de todos los usuarios adecuados para todas las páginas relevantes; para que este flujo de trabajo se active como una acción predeterminada cuando cualquiera de los usuarios intente publicar (o replicar) una página.