Show Menu
TEMAS×

Agregar Clientlibs

Agregar una ClientLibraryFolder (clientlibs)

Cree una ClientLibraryFolder con el nombre clientlibs que contendrá el JS y CSS utilizados para procesar las páginas del sitio.
El valor de categories propiedad proporcionado a esta biblioteca de cliente es el identificador utilizado para incluir directamente esta clientlib desde una página de contenido o para incrustarla en otros clientes.
  1. Con CRXDE Lite , expanda /etc/designs
  2. Haga clic con el botón derecho an-scf-sandbox y seleccione Create Node
    • Nombre: clientlibs
    • Tipo: cq:ClientLibraryFolder
  3. Haga clic en Aceptar
En la ficha Propiedades del nuevo clientlibs nodo, introduzca la categories propiedad:
  • Nombre: categorías
  • Tipo: Cadena
  • Valor: apps.an-scf-sandbox
  • Haga clic en Agregar
  • Haga clic en Guardar todo
Nota: anteponer el valor de las categorías con 'aplicaciones'. es una convención para identificar la 'aplicación propietaria' como una carpeta /apps, no como /libs. IMPORTANTE: Agregue marcadores js.txt de posición 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. Seleccione Crear archivo...
  3. Enter Name : css.txt
  4. Seleccione Crear archivo...
  5. Enter Name : js.txt
  6. Haga clic en Guardar todo
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 defina el contenido en:
body {
background-color: #b0c4de;
}

Incrustar clientes SCF

En la ficha Propiedades del clientlibs nodo, introduzca la propiedad String de varios valores embed . Esto incorporará las bibliotecas del lado del cliente (clientlibs) necesarias para los componentes SCF. Para este tutorial, agregaremos muchos de los clientlibs necesarios para los componentes Communities.
Tenga en cuenta que este puede ser o no el método deseado para usar en un sitio de producción, ya que existen consideraciones de conveniencia en comparación con el tamaño y la velocidad de los clientes 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 a los clientes más básicos de SCF, que son los clientes autores:
  • Nombre: embed
  • Tipo: String
  • Haga clic Multi
  • Value: cq.social.scf
    <enter> abrirá un cuadro de diálogo
    Haga clic #​después de cada entrada para agregar las siguientes categorías de 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
Así es como /etc/designs/an-scf-sandbox/clientlibs debería aparecer en el repositorio:

Incluir Clientlibs en la plantilla PlayPage

Sin incluir la categoría apps.an-scf-sandbox ClientLibraryFolder en la página, los componentes SCF no funcionarán ni se les aplicará estilo, ya que no estarán disponibles los JavaScript ni los estilos necesarios.
Por ejemplo, sin incluir clientlibs, el componente de comentarios de SCF no tiene estilo:
Una vez que se incluye apps.an-scf-sandbox clientlibs, el componente de comentarios de SCF aparece con estilo:
La instrucción include pertenece al de la sección script. El valor predeterminado foundation head.jsp incluye una secuencia de comandos que se puede superponer: headlibs.jsp .
Copie headlibs.jsp e incluya clientlibs:
  1. Con 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. Seleccione /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. Anexe 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 navegador y vea si el fondo no es azul.

Guardar su trabajo hasta ahora

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 el tutorial Crear una página de muestra para aquellos que no pueden esperar para simplemente saltar y empezar a reproducir...
Para crear un paquete:
  • En CRXDE Lite , haga clic en el icono Paquete
  • Haga clic en Crear paquete
    • Nombre del paquete: an-scf-sandbox-minimal-pkg
    • Versión: 0.1
    • Grupo: <dejar como predeterminado>
    • Haga clic en Aceptar
  • Haga clic en Editar
    • Ficha Seleccionar filtros
      • Haga clic en Agregar filtro
      • Ruta raíz: <examinar a /apps/an-scf-sandbox >
      • Haga clic en Finalizado
      • Haga clic en Agregar filtro
      • Ruta raíz: <examinar a /etc/designs/an-scf-sandbox >
      • Haga clic en Finalizado
      • Haga clic en Agregar filtro
      • Ruta raíz: <examinar a /content/an-scf-sandbox >
      • Haga clic en Finalizado
    • Haga clic en Guardar
  • Haga clic en Generar
Ahora puede seleccionar Descargar para guardarlo en el disco y Cargar paquete en otra parte, así como seleccionar Más > Replicar para insertar el simulador de pruebas en una instancia de publicación local host para expandir el dominio del simulador de pruebas.