DocumentaçãoAEM 6.4Guia do Communities

Adicionar Clientlibs add-clientlibs

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • User
CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

Adicionar uma ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs

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

O categorieso 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 em an-scf-sandbox e selecione Create Node

    • Nome: clientlibs
    • Tipo: cq:ClientLibraryFolder

  3. Clique em OK

chlimage_1-220

No Propriedades para o novo clientlibs , insira o categories 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 em /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

chlimage_1-221

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 embed-scf-clientlibs

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

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, estamos incluindo todas elas, então preferiria as clientlibs do SCF mais básicas, que são as clientlibs do autor:

  • Nome: embed

  • Tipo: String

  • Clique em Multi

  • Valor: cq.social.scf

    <enter> abrirá uma caixa de diálogo

    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

chlimage_1-222

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

chlimage_1-223

Incluir clientlibs no modelo do PlayPage include-clientlibs-in-playpage-template

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:

chlimage_1-224

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

chlimage_1-225

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

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

chlimage_1-226

Salvando Seu Trabalho Até Agora saving-your-work-so-far

Neste ponto, existe uma sandbox 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 iniciar novamente, você possa desligar o servidor, 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 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:

  • De CRXDE Lite, clique no botão Ícone 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: <browse to="" span="" id="0" translate="no" />>/apps/an-scf-sandbox
      • Clique em Concluído
      • Clique em Adicionar filtro
      • Caminho raiz: <browse to="" span="" id="0" translate="no" />>/etc/designs/an-scf-sandbox
      • Clique em Concluído
      • Clique em Adicionar filtro
      • Caminho raiz: <browse to="" span="" id="0" translate="no" />>/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.

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6