Adicionar Clientlibs add-clientlibs

Adicionar uma ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs

Crie uma ClientLibraryFolder chamada clientlibs que contém a JavaScript (JS) e as Folhas de Estilos em Cascata (CSS) usadas para renderizar as páginas do site.

O valor da propriedade categories fornecido a esta biblioteca do cliente é o identificador usado para incluir diretamente esta clientlib de uma página de conteúdo ou para incorporá-la a outras clientlibs.

Na guia Propriedades do novo nó clientlibs, insira a propriedade categorias:

Observação: prefixar o valor das categorias com "aplicativos". é uma convenção para identificar o 'aplicativo proprietário' como estando na pasta /apps, não /libs. IMPORTANTE: adicionar os arquivos de espaço reservado js.txt e css.txt. (Não é oficialmente um cq:ClientLibraryFolder sem eles.)

A primeira linha do css.txt e do js.txt identifica o local de base a partir do qual as listas de arquivos a seguir são encontradas.

Tente definir o conteúdo de css.txt para

#base=.
 style.css

Em seguida, crie um arquivo em clientlibs chamado style.css e defina o conteúdo como

body {

background-color: #b0c4de;

}

Incorporar SCF Clientlibs embed-scf-clientlibs

Na guia Propriedades do nó clientlibs, insira a propriedade de cadeia de caracteres de vários valores embed. Isso incorpora as bibliotecas do lado do cliente (clientlibs) necessárias para os componentes SCF. Para este tutorial, muitas das bibliotecas de clientes necessárias para os componentes do Communities são adicionadas.

Essa pode ou não ser a abordagem desejada para usar em um site de produção, pois há considerações de conveniência em relação ao tamanho/velocidade das bibliotecas de clientes baixadas para cada página.

Se estiver usando apenas um recurso em uma página, você pode incluir a clientlib completa desse recurso diretamente na página, por exemplo,

% ui:includeClientLib categories=cq.social.hbs.forum" %

Nesse caso, incluindo todos eles e, portanto, os clientlibs SCF mais básicos que são os clientlibs do autor são preferidos:

É assim que /etc/designs/an-scf-sandbox/clientlibs deve aparecer no repositório:

Incluir clientlibs no modelo PlayPage include-clientlibs-in-playpage-template

Sem incluir a categoria ClientLibraryFolder apps.an-scf-sandbox na página, os componentes do SCF não são funcionais nem estilizados, pois os estilos JavaScript e CSS necessários não estão disponíveis.

Por exemplo, sem incluir as clientlibs, o componente de comentários do SCF aparece sem estilo:

Depois que apps.an-scf-sandbox clientlibs é incluído, o componente de comentários SCF aparece com o estilo:

A instrução include pertence à seção head do script html. O padrão foundation head.jsp inclui um script que pode ser sobreposto: headlibs.jsp.

Copie headlibs.jsp e inclua clientlibs:

<%@ 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"/>

Carregue seu site no navegador e veja se o plano de fundo não é um tom de azul.

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

Salvando seu trabalho até agora saving-your-work-so-far

Neste ponto, existe uma sandbox minimalista. Pode valer a pena salvar como um pacote para que, durante a reprodução, se o repositório for corrompido e você desejar recomeçar, possa desativar o servidor. Em seguida, renomeie ou exclua a pasta crx-quickstart/, ative o servidor, carregue e instale este pacote salvo e não precise repetir as etapas mais básicas.

Este pacote existe no tutorial Criar uma Página de Exemplo para aqueles que não podem esperar para começar a jogar.

Para criar um pacote:

Agora você pode selecionar Baixar para salvá-lo em disco e Carregar Pacote em outro lugar, e selecionar Mais > Replicar para encaminhar a sandbox para uma instância de publicação de host local para expandir o território de sua sandbox.