Show Menu
TÓPICOS×

Adicionar Clientlibs

Adicionar uma ClientLibraryFolder (clientlibs)

Crie uma ClientLibraryFolder 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 em 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 categories propriedade:
  • Nome: categorias
  • Tipo: String
  • Valor: apps.an-scf-sandbox
  • Clique em Adicionar
  • Clique em Salvar tudo
Observação: como pré-visualizar o valor das categorias 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.txt e css.txt arquivos. (Não é oficialmente uma cq:ClientLibraryFolder sem eles.)
  1. Clique com o botão direito 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 incorporará as bibliotecas necessárias do lado do cliente (clientlibs) para componentes SCF. Neste tutorial, adicionaremos muitas das clientlibs necessárias para os componentes Comunidades.
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 category=cq.social.hbs.forum" %>
Neste 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
    O <enter> irá abrir uma caixa de diálogo
    Clique #​após 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 serão funcionais nem estilizados, pois os Javascript e os estilos 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 declaração include pertence ao seção da 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 duas vezes em headlibs.jsp para 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 seu repositório ficar corrompido e você desejar reiniciar, 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 pular e começar a reproduzir!...
Para criar um pacote:
  • No CRXDE Lite , clique no ícone Pacote
  • Clique em Criar pacote
    • Nome do pacote: an-scf-sandbox-minimal-pkg
    • Versão: 0.1
    • Grupo: <deixar como padrão>
    • 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.