Adicionar Clientlibs

Adicionar uma ClientLibraryFolder (clientlibs)

Crie uma ClientLibraryFolder chamada clientlibsque conterá o JS e o CSS usados para renderizar as páginas do site.

O valor da propriedade categoriesfornecido 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.

  1. Usando 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

chlimage_1-220

Na guia Propriedades do novo nó clientlibs, digite a propriedade categories:

  • Nome: categoria
  • 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 arquivos de espaço reservado js.txt e css.txt. (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. Digite Nome: css.txt

  4. Selecione Criar Arquivo…

  5. Digite Nome: js.txt

  6. Clique em Salvar tudo

chlimage_1-221

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 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 OK

  • Clique em Salvar tudo

chlimage_1-222

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

chlimage_1-223

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(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:

chlimage_1-224

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

chlimage_1-225

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:

  1. Usando 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 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.

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

chlimage_1-226

Salvar 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 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

    • Nome do pacote: an-scf-sandbox-minimal-pkg
    • Versão: 0.1
    • Grupo: <deixar como padrão>
    • Clique em OK

  • Clique em Editar

    • Selecione a guia Filtros

      • Clique em Adicionar filtro
      • Caminho raiz: <navegue até /apps/an-scf-sandbox>
      • Clique em Concluído
      • Clique em Adicionar filtro
      • Caminho raiz: <navegue até /etc/designs/an-scf-sandbox>
      • Clique em Concluído
      • Clique em Adicionar filtro
      • Caminho raiz: <navegue até /content/an-scf-sandbox>
      • Clique em Concluído

    • 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.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free