DocumentaciónAEM as a Cloud ServiceGuía del usuario

Personalización de la creación de páginas customizing-page-authoring

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Administrador
  • Desarrollador

Adobe Experience Manager as a Cloud Service proporciona mecanismos que le permiten personalizar la funcionalidad de creación de páginas (y las consolas) de su instancia de creación.

Clientlibs clientlibs

Clientlibs permite ampliar la implementación predeterminada para habilitar nuevas funciones, al tiempo que se reutilizan las funciones, los objetos y los métodos estándar.

Al personalizar, puede crear su propia clientlib en /apps.. La nueva clientlib debe:

  • Depender de la clientlib cq.authoring.editor.sites.page de creación.
  • Forme parte de la categoría cq.authoring.editor.sites.page.hook apropiada.

Ver Uso de bibliotecas del lado del cliente en AEM as a Cloud Service.

Superposiciones overlays

Las superposiciones se basan en definiciones de nodo y le permiten superponer la funcionalidad estándar de /libs con su propia funcionalidad personalizada en /apps.

Al crear una superposición, no se requiere una copia individual del original, ya que la fusión de recursos de sling permite la herencia.

Para obtener más información, consulte Conjunto de documentación de JS.

Para obtener más información sobre las superposiciones, consulte Superposiciones para Adobe Experience Manager as a Cloud Service.

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. AEM Los modos estándar incluyen Edición, Diseño, Desarrollador, Deformación de tiempo, Estado de Live Copy 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 copia de idioma en el contenido de muestra WKND 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 ejemplo que muestra cómo crear una capa (modo) para la vista MSM.

Puede encontrar el código de esta página en GitHub.

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.

Puede encontrar el código de esta página en GitHub.

Filtrado de recursos filtering-resources

Al crear páginas, el usuario debe seleccionar a menudo entre los recursos de una lista.

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 el componente Granite pathbrowser se utiliza para permitir que el usuario seleccione la ruta a un recurso en particular, las rutas presentadas se pueden filtrar de la siguiente manera:

Para obtener más información sobre cómo crear un predicado personalizado, vea este artículo.

Agregar una nueva acción a una barra de herramientas de componentes add-new-action-to-a-component-toolbar

Cada componente suele tener 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.

Puede encontrar el código de esta página en GitHub.

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:

  1. /libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js contiene definiciones de los distintos editores disponibles.

  2. 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.

  3. Se pueden configurar detalles de configuración adicionales del editor mediante un nodo config que contenga configuraciones y un nodo plugin 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.

   <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
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 propiedad name, 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):

  1. Implementar:

    • setUp
    • tearDown

  2. Registre el editor (incluye el constructor):

    • editor.register

  3. 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.

Puede encontrar el código de esta página en GitHub.

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.

Puede encontrar el código de esta página en GitHub.

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:

  1. En /apps se superpone el asistente Sitios /libs/wcm/core/content/common/managepublicationwizard

    • Esto mismo reemplaza la instancia común de /libs/cq/gui/content/common/managepublicationwizard.

  2. Actualice el modelo de flujo de trabajo y las configuraciones/scripts relacionados según sea necesario.

  3. 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.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab