Show Menu
TÓPICOS×

Adicionar Clientlibs

Adicionar uma ClientLibraryFolder (clientlibs)

Crie uma ClientLibraryFolder com o nome clientlibs que conterá o JS e o CSS usados para renderizar as páginas do site.
O valor de categories propriedade fornecido para essa biblioteca de cliente é o identificador usado para incluir diretamente essa clientlib de uma página de conteúdo ou para incorporá-la a outras clientlibs.
  1. Usando o CRXDE Lite , expanda /etc/designs
  2. Clique com o botão direito do mouse an-scf-sandbox e selecione Create Node
    • Nome : clientlibs
    • Tipo : cq:ClientLibraryFolder
  3. Clique em OK
Na guia Propriedades do novo clientlibs nó, digite a propriedade categoria :
  • Nome : categorias
  • Tipo: String
  • Valor : apps.an-scf-sandbox
  • Clique em Adicionar
  • Clique em Salvar tudo
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 espaço reservado js.tx a e css.txt arquivos. (Não é oficialmente uma cq:ClientLibraryFolder sem eles.)
  1. Clique com o botão direito do mouse em /etc/designs/an-scf-sandbox/clientlibs
  2. Selecione Criar Arquivo...
  3. Enter Name: css.txt
  4. Selecione Criar Arquivo...
  5. Enter Name: js.txt
  6. 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;
}

Incorporar Clientlibs SCF

Na guia Propriedades do clientlibs nó, digite a propriedade String com vários valores incorporada . Isso incorpora as bibliotecas necessárias do lado do cliente (clientlibs) para componentes SCF. Neste tutorial, muitas das clientlibs necessárias para os componentes Comunidades são adicionadas.
Observe que 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 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 categories=cq.social.hbs.forum" %
Nesse caso, incluindo todos e, portanto, os clientlibs SCF mais básicos que são os clientlibs do autor são preferidos:
  • Nome : embed
  • Tipo : String
  • Clique em Multi
  • Valor: cq.social.scf
    • Ela abrirá 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 OK
  • Clique em Salvar tudo
É assim que agora /etc/designs/an-scf-sandbox/clientlibs deve aparecer no repositório:

Incluir Clientlibs no modelo PlayPage

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 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 html script. O padrão foundation head.jsp inclui um script que pode ser sobreposto: headlibs.jsp .
Copie headlibs.jsp e inclua clientlibs:
  1. Usando o CRXDE Lite , selecione /libs/foundation/components/page/headlibs.jsp
  2. Clique com o botão direito do mouse e selecione Copiar (ou selecione Copiar na barra de ferramentas)
  3. Selecionar /apps/an-scf-sandbox/components/playpage
  4. Clique com o botão direito do mouse e selecione Colar (ou selecione Colar na barra de ferramentas)
  5. Clique no duplo para headlibs.jsp abri-lo
  6. Anexar a seguinte linha ao final do arquivo <ui:includeClientLib categories="apps.an-scf-sandbox"/>
  7. 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.

Salvando Seu Trabalho Até Agora

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 repositório ficar corrompido e você desejar start, desative, renomeie ou exclua a pasta crx-quickstart/, ligue o servidor, carregue e instale esse pacote salvo e não precise 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 pular e reproduzir start!...
Para criar um pacote:
  • Na CRXDE Lite, clique no ícone Pacote
  • Clique em Criar pacote
    • Nome do pacote: an-scf-sandbox-Minimum-pkg
    • Versão: 0,1
    • Grupo: leave as default
    • Clique em OK
  • Clique em Editar
    • Guia Selecionar Filtros
      • Clique em Adicionar filtro
      • Caminho raiz: navegar até /apps/an-scf-sandbox
      • Clique em Concluído
      • Clique em Adicionar filtro
      • Caminho raiz: navegar até /etc/designs/an-scf-sandbox
      • Clique em Concluído
      • Clique em Adicionar filtro
      • Caminho raiz: navegar até /content/an-scf-sandbox**
      • Clique em Concluído
    • Clique em Salvar
  • Clique em Criar
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 a fim de expandir o realm da sua caixa de proteção.