Cree una ClientLibraryFolder con el nombre clientlibs
que contendrá el JS y CSS utilizados para representar las páginas del sitio.
El valor de la propiedad categories
que se da 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 clientlibs.
Usando CRXDE Lite, expanda /etc/designs
Haga clic con el botón derecho an-scf-sandbox
y seleccione Create Node
clientlibs
cq:ClientLibraryFolder
Haga clic en Aceptar
En la ficha Propiedades del nuevo nodo clientlibs
, introduzca la propiedad categorías:
Nota: anteponer el valor de categorías con 'aplicaciones'. es una convención para identificar la 'aplicación propietaria' como una carpeta /apps, no como /libs. IMPORTANTE: Añada los archivos de marcador de posición js.tx
t y css.txt
. (No es oficialmente un cq:ClientLibraryFolder sin ellos).
/etc/designs/an-scf-sandbox/clientlibs
css.txt
js.txt
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;
}
En la ficha Propiedades del nodo clientlibs
, introduzca la propiedad de varios valores String embed. Esto incrusta las bibliotecas del lado del cliente (clientlibs) necesarias para los componentes de SCF. Para este tutorial se añaden muchos de los clientlibs necesarios para los componentes Communities.
Tenga en cuenta que este método puede ser o no el deseado para 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, incluidos todos ellos y así los clientes SCF más básicos que son los clientes autores son preferibles:
Nombre : embed
Tipo : String
Haga clic Multi
Value: cq.social.scf
Aparecerá un cuadro de diálogo,
haga clic +
después de cada entrada para agregar 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 Guardar todo
Así es como /etc/designs/an-scf-sandbox/clientlibs
debe aparecer ahora en el repositorio:
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 y 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 sentencia include pertenece a la sección head
de la secuencia de comandos html
. El foundation head.jsp
predeterminado incluye una secuencia de comandos que se puede superponer: headlibs.jsp
.
Copie headlibs.jsp e incluya clientlibs:
Utilizando CRXDE Lite, seleccione /libs/foundation/components/page/headlibs.jsp
Haga clic con el botón derecho y seleccione Copiar (o seleccione Copiar en la barra de herramientas)
Seleccione /apps/an-scf-sandbox/components/playpage
Haga clic con el botón derecho y seleccione Pegar (o seleccione Pegar en la barra de herramientas)
Haga clic en doble headlibs.jsp
para abrirlo
Anexe la línea siguiente al final del archivo
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
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.
https://localhost:4502/content/an-scf-sandbox/en/play.html
En este punto, existe un simulador para pruebas minimalista y puede que valga la pena guardarlo como paquete para que, mientras se reproduce, si el repositorio se daña y desea pasar el inicio, pueda 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 reproducir el inicio…
Para crear un paquete:
En el CRXDE Lite, haga clic en el icono Paquete
Haga clic en Crear paquete
leave as default
Haga clic en Editar
Seleccione la ficha Filtros
/apps/an-scf-sandbox
/etc/designs/an-scf-sandbox
/content/an-scf-sandbox**
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 localhost para expandir el dominio del simulador de pruebas.