Adicionar Clientlibs

Adicionar uma ClientLibraryFolder (clientlibs)

Crie uma ClientLibraryFolder com o nome clientlibs que conterão o JS e o CSS usados para renderizar as páginas do site.

O categories o valor da propriedade dado a essa biblioteca do 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 CRXDE Lite, expandir /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

add-client-library

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

  • Nome : categorias
  • Tipo : String
  • Valor : apps.an-scf-sandbox
  • Clique em Adicionar
  • Clique em Salvar tudo

Observação : apresentando o valor das categorias como "aplicativos". é uma convenção para identificar o "aplicativo proprietário" como sendo da pasta /apps, não /libs. IMPORTANTE : Adicionar espaço reservado js.txt e css.txt arquivos. (Não é oficialmente uma cq:ClientLibraryFolder sem eles.)

  1. Clique com o botão direito do mouse /etc/designs/an-scf-sandbox/clientlibs
  2. Selecionar Criar arquivo…
  3. Enter Nome: css.txt
  4. Selecionar Criar arquivo…
  5. Enter Nome: js.txt
  6. Clique em Salvar tudo

clientlibs-css

A primeira linha do css.txt e do js.txt identifica o local base do qual as listas de arquivos a seguir devem ser 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

No Propriedades para o clientlibs nó , insira a propriedade String de vários valores embed. Isso incorpora o necessário bibliotecas do lado do cliente (clientlibs) para componentes SCF. Neste tutorial, muitas das clientlibs necessárias para os componentes das Comunidades são adicionadas.

Observação 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 versus tamanho/velocidade das clientlibs 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 e, portanto, as clientlibs do SCF mais básicas, que são as clientlibs do autor, são preferidas:

  • Nome : embed

  • Tipo : String

  • Clique em Multi

  • Valor: cq.social.scf

    • Uma caixa de diálogo será exibida, clique em + 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

scf-clientlibs

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

scf-clientlibs-view

Incluir clientlibs no modelo do PlayPage

Sem incluir a variável apps.an-scf-sandbox Categoria ClientLibraryFolder na página, os componentes do SCF não serão funcionais nem estilizados, pois os Javascript e o(s) estilo(s) necessários não estarão disponíveis.

Por exemplo, sem incluir as clientlibs, o componente de comentários do SCF aparece sem o estilo :

clientlibs-comment

Uma vez que apps.an-scf-sandbox clientlibs é incluído, o componente SCF comments aparece no estilo :

clientlibs-estilo-comentário

A instrução include pertence ao head da seção 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 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 headlibs.jsp para abri-lo

  6. Anexe 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 na Web no navegador e veja se o plano de fundo não é uma sombra de azul.

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

community-play

Salvando Seu Trabalho Até Agora

Neste ponto, existe uma sandbox 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 iniciar novamente, você possa desativar, renomear ou excluir o servidor da pasta crx-quickstart/, ativar, carregar e instalar o pacote salvo e não precisar repetir essas etapas mais básicas.

Este pacote existe no Criar uma página de exemplo tutorial para aqueles que não podem esperar apenas para entrar e começar a jogar!..

Para criar um pacote:

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

    • Selecionar Filtros guia

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

Agora você pode selecionar Baixar para salvá-lo em disco e Fazer upload do pacote em outro lugar, bem como selecionar Mais > Replicar para enviar a sandbox para uma instância de publicação de host local, expanda o realm da sandbox.

Nesta página