Añadir Clientlibs add-clientlibs
Añadir una ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs
Cree una ClientLibraryFolder denominada clientlibs
que contenga las hojas de estilos en cascada (CSS) y JavaScript (JS) utilizadas para procesar las páginas del sitio.
El valor de propiedad categories
dado a esta biblioteca de cliente es el identificador usado para incluir directamente esta clientlib de una página de contenido o para incrustarla en otras clientlibs.
-
Usando CRXDE Lite, expanda
/etc/designs
-
Haga clic con el botón derecho en
an-scf-sandbox
y seleccioneCreate Node
- Nombre:
clientlibs
- Tipo:
cq:ClientLibraryFolder
- Nombre:
-
Haga clic en Aceptar
En la ficha Propiedades del nuevo nodo clientlibs
, escriba la propiedad categories:
- Nombre: categorías
- Tipo: Cadena
- Valor: apps.an-scf-sandbox
- Haga clic en Agregar
- Haga clic en Guardar todo
Nota: anteponga el valor de categorías con "apps". es una convención para identificar la "aplicación propietaria" como en la carpeta /apps, no /libs. IMPORTANTE: Agregue los archivos de marcador de posición js.tx
t y css.txt
. (No es oficialmente una cq:ClientLibraryFolder sin ellas).
- Clic con el botón derecho
/etc/designs/an-scf-sandbox/clientlibs
- Seleccionar Crear archivo…
- Escriba Nombre:
css.txt
- Seleccionar Crear archivo…
- Escriba Nombre:
js.txt
- Haga clic en Guardar todo
La primera línea de los archivos 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 denominado style.css y establezca el contenido en
body {
background-color: #b0c4de;
}
Incrustar Clientlibs SCF embed-scf-clientlibs
En la ficha Propiedades del nodo clientlibs
, escriba la propiedad de cadena de varios valores embed. Esto incrusta las bibliotecas del cliente (clientlibs) necesarias para los componentes de SCF. Para este tutorial, se agregan muchos de los clientlibs necesarios para los componentes de Communities.
Este puede ser o no el enfoque deseado para utilizar en un sitio de producción, ya que hay consideraciones de comodidad en comparación con el tamaño y la 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 función directamente en la página, por ejemplo,
% ui:includeClientLib categories=cq.social.hbs.forum" %
En este caso, incluyéndolos todos y por lo tanto se prefieren los clientlibs SCF más básicos que son los clientlibs de autor:
-
Nombre:
embed
-
Tipo:
String
-
Haga clic
Multi
-
Valor:
cq.social.scf
-
Aparecerá un cuadro de diálogo,
haga clic en+
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 Aceptar
-
-
Haga clic en Guardar todo
Así es como debería aparecer /etc/designs/an-scf-sandbox/clientlibs
en el repositorio:
Incluir Clientlibs en la plantilla de PlayPage include-clientlibs-in-playpage-template
Sin incluir la categoría ClientLibraryFolder apps.an-scf-sandbox
en la página, los componentes SCF no funcionan ni tienen estilo, ya que los estilos JavaScript y CSS necesarios no están disponibles.
Por ejemplo, sin incluir los clientlibs, el componente Comentarios de SCF aparece sin estilo :
Una vez que se incluye apps.an-scf-sandbox clientlibs, el componente Comentarios de SCF aparece con el siguiente estilo:
La instrucción include pertenece a la sección head
del script html
. El valor predeterminado foundation head.jsp
incluye un script que se puede superponer: headlibs.jsp
.
Copie headlibs.jsp e incluya clientlibs:
-
Usando 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)
-
Seleccionar
/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 doble clic en
headlibs.jsp
para poder 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 explorador y compruebe si el fondo no es azul.
https://localhost:4502/content/an-scf-sandbox/en/play.html
Guardar El Trabajo Hasta El Momento saving-your-work-so-far
En este punto, existe una zona protegida minimalista. Puede valer la pena guardarlo como un paquete para que, mientras se reproduce, si el repositorio se daña y desea volver a empezar, pueda desactivar el servidor. A continuación, cambie el nombre de la carpeta crx-quickstart/, encienda el servidor, cargue e instale este paquete guardado y no tenga que repetir estos pasos más básicos.
Este paquete existe en el tutorial Crear una página de muestra para aquellos que no puedan esperar para saltar y comenzar a reproducir.
Para crear un paquete:
-
En el CRXDE Lite, haga clic en Package icon
-
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
-
Seleccione la ficha Filtros
- Haga clic en Agregar filtro
- Ruta raíz: examinar
/apps/an-scf-sandbox
- Haga clic en Listo.
- Haga clic en Agregar filtro
- Ruta raíz: examinar
/etc/designs/an-scf-sandbox
- Haga clic en Listo.
- Haga clic en Agregar filtro
- Ruta raíz: examinar
/content/an-scf-sandbox**
- Haga clic en Listo.
-
Haga clic en Guardar
-
-
Haga clic en Generar
Ahora puede seleccionar Descargar para guardarlo en el disco y Cargar paquete en otro lugar, y seleccionar Más > Replicar para insertar la zona protegida en una instancia de publicación localhost para expandir el dominio de la zona protegida.