Adicionar Clientlibs

Adicionar uma ClientLibraryFolder (clientlibs)

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

A variável categories o valor da propriedade fornecido a esta biblioteca do cliente é o identificador usado para incluir diretamente esta clientlib de uma página de conteúdo ou para incorporá-la a outras clientlibs.

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

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: prefixar o valor das categorias com "aplicativos". é uma convenção para identificar o 'aplicativo proprietário' como estando na pasta /apps, não /libs. IMPORTANTE: adicionar espaço reservado js.txt e css.txt arquivos. (Não é oficialmente um 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

A primeira linha do css.txt e do js.txt identifica o local de base a partir do qual as listas de arquivos a seguir são encontradas.

Tente definir o conteúdo de css.txt para

#base=.
 style.css

Em seguida, crie um arquivo em clientlibs chamado style.css e defina o conteúdo como

body {

background-color: #b0c4de;

}

Incorporar SCF Clientlibs

No Propriedades para a clientlibs insira a propriedade multi-value String incorporar. Isso incorpora o necessário bibliotecas do lado do cliente (clientlibs) para componentes SCF. Para este tutorial, muitas das bibliotecas de clientes necessárias para os componentes do Communities são adicionadas.

Nota 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 comparação ao tamanho/velocidade das bibliotecas de clientes 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 eles 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

  • 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

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

Incluir clientlibs no modelo PlayPage

Sem incluir o apps.an-scf-sandbox ClientLibraryFolder na página, os componentes do SCF não serão funcionais nem estilizados, pois o(s) JavaScript(s) 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 estilo:

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

A instrução include pertence a head seção 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. Usar CRXDE Lite, selecione /libs/foundation/components/page/headlibs.jsp

2. Clique com o botão direito 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 e selecione Colar (ou selecione Colar na barra de ferramentas)

5. Clique duas vezes headlibs.jsp para abri-lo

6. Acrescentar 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 é um tom de azul.

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

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 começar novamente, você pode desligar o servidor, renomear ou excluir a pasta crx-quickstart/, ligar o servidor, carregar e instalar este pacote salvo, e não precisa repetir essas etapas mais básicas.

Este pacote existe no Criar uma página de exemplo tutorial para quem não pode esperar para apenas saltar em e começar a jogar!..

Para criar um pacote:

• No CRXDE Lite, clique no botão Ícone do pacote

• Clique em Criar pacote

  • Nome do pacote: an-scf-sandbox-minimal-pkg
  • Versão: 0.1
  • Grupo: leave as default
  • Clique em OK

• Clique em Editar

  • Selecionar Filtros guia

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

Agora é possível selecionar Baixar para salvá-lo em disco e Fazer upload do pacote em outro lugar, e selecione Mais > Replicar para enviar a sandbox para uma instância de publicação de host local para expandir o realm da sandbox.

Recursos do Business.Adobe.com

Personalized Experiences Embedded Charts Responsive Forms Managed Cloud Headless Cms Digital Asset Management