Crie uma ClientLibraryFolder chamada clientlibs
que conterá o JS e o CSS usados para renderizar as páginas do site.
O valor da propriedade categories
fornecido para esta biblioteca de cliente é o identificador usado para incluir diretamente esta clientlib de uma página de conteúdo ou para incorporá-la a outras clientlibs.
Usando CRXDE Lite, expanda /etc/designs
Clique com o botão direito do mouse em an-scf-sandbox
e selecione Create Node
clientlibs
cq:ClientLibraryFolder
Clique em OK
Na guia Propriedades do novo nó clientlibs
, digite a propriedade categories
:
Observação: como visualizar o valor do categoria com "aplicativos". é uma convenção para identificar o "aplicativo proprietário" como estando na pasta /apps, não /libs. IMPORTANTE: Adicione arquivos de espaço reservado js.txt
e css.txt
. (Não é oficialmente uma cq:ClientLibraryFolder sem eles.)
Clique com o botão direito do mouse em /etc/designs/an-scf-sandbox/clientlibs
Selecione Criar Arquivo…
Digite Nome: css.txt
Selecione Criar Arquivo…
Digite Nome: js.txt
Clique em Salvar tudo
A primeira linha do css.txt e do js.txt identifica o local base a partir do qual as seguintes listas de arquivos são encontradas.
Tente definir o conteúdo de css.txt como:
#base=.
style.css
Em seguida, crie um arquivo em clientlibs chamado style.css e defina o conteúdo como:
body {
background-color: #b0c4de;
}
Na guia Propriedades do nó clientlibs
, digite a propriedade String de vários valores embed. Isso incorporará as bibliotecas do lado do cliente (clientlibs) necessárias para componentes SCF. Neste tutorial, adicionaremos muitas das clientlibs necessárias para os componentes Comunidades.
Observe que essa pode ser ou não a abordagem desejada para usar em um site de produção, pois há considerações de conveniência em relação ao tamanho/velocidade dos clientlibs baixados para cada página.
Se apenas estiver usando um recurso em uma página, você poderá incluir a clientlib completa desse recurso diretamente na página, por exemplo, <% ui:includeClientLib categoria=cq.social.hbs.forum" %>
Nesse caso, estamos incluindo todos, e assim preferimos os clientlibs SCF mais básicos que são os clientlibs do autor:
Nome: embed
Tipo: String
Clique em Multi
Valor: cq.social.scf
<enter> exibirá uma caixa de diálogo
Clique [+]depois de cada entrada para adicionar as seguintes categorias 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
Clique em Salvar tudo
É assim que /etc/designs/an-scf-sandbox/clientlibs
agora deve aparecer no repositório:
Sem incluir a categoria apps.an-scf-sandbox
ClientLibraryFolder na página, os componentes do SCF não estarão funcionais nem com estilo, pois os Javascript(s) e o(s) estilo(s) necessários não estarão disponíveis.
Por exemplo, sem incluir clientlibs, o componente de comentários SCF aparece sem estilo:
Depois que apps.an-scf-sandbox clientlibs é incluído, o componente de comentários SCF aparece no 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:
Usando CRXDE Lite, selecione /libs/foundation/components/page/headlibs.jsp
Clique com o botão direito do mouse e selecione Copiar (ou selecione Copiar na barra de ferramentas)
Selecionar /apps/an-scf-sandbox/components/playpage
Clique com o botão direito do mouse e selecione Colar (ou selecione Colar na barra de ferramentas)
Clique no duplo em headlibs.jsp
para abri-lo
Anexar a seguinte linha ao final do arquivo
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
Clique em Salvar tudo
<%@ 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 é uma sombra de azul.
http://localhost:4502/content/an-scf-sandbox/en/play.html
Nesse ponto, existe uma caixa de proteção minimalista e pode valer a pena salvar como um pacote para que, durante a reprodução, se o seu repositório ficar corrompido e você desejar start, você possa desligar, renomear ou excluir a pasta crx-quickstart/, ligar o servidor, carregar e instalar esse pacote salvo e não precisar repetir essas etapas mais básicas.
Este pacote existe no tutorial Criar uma página de amostra para aqueles que não podem esperar para saltar e reproduzir start!..
Para criar um pacote:
Em CRXDE Lite, clique no ícone Pacote
Clique em Criar pacote
an-scf-sandbox-minimal-pkg
0.1
Clique em Editar
Selecione a guia Filtros
/apps/an-scf-sandbox
>/etc/designs/an-scf-sandbox
>/content/an-scf-sandbox
>Clique em Salvar
Clique em Compilação
Agora você pode selecionar Download para salvá-lo em disco e Carregar pacote em outro lugar, bem como selecionar Mais > Replicar para encaminhar a caixa de proteção para uma instância de publicação de host local para expandir o realm da sua caixa de proteção.