DocumentaciónAEM 6.4Guía de Communities

Agregar Clientlibs add-clientlibs

Last update: Fri May 05 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • User
CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

Agregar una ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs

Crear una ClientLibraryFolder denominada clientlibsque contendrán los JS y CSS utilizados para procesar las páginas del sitio.

La variable categoriesel valor de propiedad dado a esta biblioteca de cliente es el identificador utilizado para incluir directamente esta clientlib desde una página de contenido o para incrustarla en otras clientlibs.

  1. Uso CRXDE Lite, expandir /etc/designs

  2. Haga clic con el botón derecho en an-scf-sandbox y seleccione Create Node

    • Nombre: clientlibs
    • Tipo: cq:ClientLibraryFolder

  3. Haga clic en Aceptar

chlimage_1-220

En el Propiedades para la nueva clientlibs , introduzca el categories propiedad:

  • Nombre:categories
  • Tipo:cadena
  • Valor: apps.an-scf-sandbox
  • Haga clic en Agregar
  • Haga clic en Guardar todo

Nota: anteponer el valor de categorías a "apps". es una convención para identificar la "aplicación propietaria" como si estuviera en la carpeta /apps, no en /libs. IMPORTANTE: Agregar marcador de posición js.txt y css.txt archivos. (No es oficialmente un cq:ClientLibraryFolder sin ellos).

  1. Haga clic con el botón derecho en /etc/designs/an-scf-sandbox/clientlibs

  2. Select Crear archivo…

  3. Entrar Nombre: css.txt

  4. Select Crear archivo…

  5. Entrar Nombre: js.txt

  6. Haga clic en Guardar todo

chlimage_1-221

La primera línea de css.txt y js.txt identifica la ubicación base desde la que se encuentran las siguientes listas de archivos.

Intente establecer el contenido de css.txt en:

#base=.
 style.css

A continuación, cree un archivo en clientlibs llamado style.css y establezca el contenido en:

body {

background-color: #b0c4de;

}

Incrustar Clientlibs SCF embed-scf-clientlibs

En el Propiedades para la variable clientlibs , introduzca la propiedad String de varios valores. embed. Esto incorporará lo necesario bibliotecas del lado del cliente (clientlibs) para componentes SCF. Para este tutorial, agregaremos muchos de los clientlibs necesarios para los componentes de Communities.

Nota que este puede ser o no el método deseado para usar en un sitio de producción, ya que existen consideraciones de comodidad en comparación con el tamaño/velocidad de los clientlibs descargados para cada página.

Si solo utiliza una función en una página, puede incluir la clientlib completa de esa característica directamente en la página, por ejemplo, <% ui:includeClientLib categories=cq.social.hbs.forum" %>

En este caso, los incluimos a todos, por lo que preferiríamos los clientlibs de SCF más básicos, que son los clientlibs de autor:

  • Nombre: embed

  • Tipo: String

  • Haga clic Multi

  • Valor: cq.social.scf

    <enter> se abrirá un cuadro de diálogo

    Haga clic en [+] ​después de cada entrada para añadir las siguientes categorías clientlib:

    • cq.ckeditor
    • cq.social.author.hbs.comments
    • cq.social.author.hbs.forum
    • cq.social.author.hbs.rating
    • cq.social.author.hbs.reviews
    • cq.social.author.hbs.voting
    • Haga clic en Aceptar

  • Haga clic en Guardar todo

chlimage_1-222

Así es como /etc/designs/an-scf-sandbox/clientlibs debería aparecer en el repositorio:

chlimage_1-223

Incluir Clientlibs en la plantilla de PlayPage include-clientlibs-in-playpage-template

Sin incluir el apps.an-scf-sandbox categoría ClientLibraryFolder en la página; los componentes SCF no funcionarán ni se diseñarán, ya que los Javascript y los estilos necesarios no estarán disponibles.

Por ejemplo, sin incluir clientlibs, el componente de comentarios de SCF aparece sin estilo:

chlimage_1-224

Una vez que se incluye apps.an-scf-sandbox clientlibs , el componente de comentarios de SCF aparece con estilo:

chlimage_1-225

La sentencia include pertenece al grupo <head> de la sección <html> secuencia de comandos. El valor predeterminado foundation head.jsp incluye una secuencia de comandos que se puede superponer: headlibs.jsp.

Copie headlibs.jsp e incluya clientlibs:

  1. Uso CRXDE Lite, seleccione /libs/foundation/components/page/headlibs.jsp

  2. Haga clic con el botón derecho y seleccione Copiar (o seleccione Copiar en la barra de herramientas)

  3. Seleccionar /apps/an-scf-sandbox/components/playpage

  4. Haga clic con el botón derecho y seleccione Pegar (o seleccione Pegar en la barra de herramientas)

  5. Haga doble clic en headlibs.jsp para abrirlo

  6. Añada la línea siguiente al final del archivo

    <ui:includeClientLib categories="apps.an-scf-sandbox"/>

  7. Haga clic en Guardar todo

<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
<% currentDesign.writeCssIncludes(pageContext); %>
<ui:includeClientLib categories="apps.an-scf-sandbox"/>

Cargue el sitio web en el explorador y compruebe si el fondo no está a la sombra de azul.

http://localhost:4502/content/an-scf-sandbox/en/play.html

chlimage_1-226

Guardar su trabajo hasta ahora saving-your-work-so-far

En este punto, existe un simulador de pruebas minimalista y puede que valga la pena guardarlo como paquete para que, mientras se reproduce, si el repositorio se daña y desea volver a empezar, puede desactivar el servidor, cambiar el nombre o eliminar la carpeta crx-quickstart/, activar el servidor, cargar e instalar este paquete guardado y no tener que repetir estos pasos más básicos.

Este paquete existe en la variable Crear una página de muestra tutorial para aquellos que no pueden esperar para simplemente saltar y comenzar a jugar!..

Para crear un paquete:

  • De CRXDE Lite, haga clic en Icono de paquete

  • Haga clic en Crear paquete

    • Nombre del paquete: an-scf-sandbox-minimal-pkg
    • Versión: 0.1
    • Grupo: <leave as="" default="">
    • Haga clic en Aceptar

  • Haga clic en Editar

    • Select Filtros ficha

      • Haga clic en Añadir filtro
      • Ruta raíz: <browse to="" span="" id="0" translate="no" />>/apps/an-scf-sandbox
      • Haga clic en Listo
      • Haga clic en Añadir filtro
      • Ruta raíz: <browse to="" span="" id="0" translate="no" />>/etc/designs/an-scf-sandbox
      • Haga clic en Listo
      • Haga clic en Añadir filtro
      • Ruta raíz: <browse to="" span="" id="0" translate="no" />>/content/an-scf-sandbox
      • Haga clic en Listo

    • Haga clic en Guardar

  • Haga clic en Generar

Ahora puede seleccionar Descargar para guardarlo en disco y Cargar paquete en cualquier otra parte, así como seleccionar Más > Replicar para insertar el simulador de pruebas en una instancia de publicación de localhost para expandir el dominio del simulador de pruebas.

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6