Adicionar Clientlibs add-clientlibs

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

Crie uma ClientLibraryFolder chamada clientlibs que contém o JavaScript (JS) e as folhas de estilos em cascata (CSS) usadas para renderizar as páginas do site.

A variável categories o valor da propriedade 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.

No Propriedades para o novo clientlibs , insira o categorias propriedade:

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 espaço reservado js.txt e css.txt arquivos. (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

No Propriedades para a clientlibs insira a propriedade multi-value String incorporar. Isso incorpora o necessário bibliotecas do lado do cliente (clientlibs) para 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 agora devem aparecer no repositório:

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

Sem incluir o apps.an-scf-sandbox ClientLibraryFolder na página, os componentes 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 a head seção do html script. 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 Criar uma página de exemplo tutorial para aqueles que não podem esperar para começar a jogar.

Para criar um pacote:

Agora é possível selecionar Baixar para salvá-lo em disco e Fazer upload do pacote em outro lugar e selecione Mais > Replicar para enviar a sandbox para uma instância de publicação de host local para expandir o realm da sandbox.