Personalização do lado do cliente client-side-customization

Para personalizar a aparência e/ou o comportamento de um componente do AEM Communities no lado do cliente, há várias abordagens.

Duas abordagens principais são sobrepor ou estender um componente.

Sobreposição um componente altera o componente padrão e afeta todas as referências ao componente.

Extensão um componente, sendo nomeado exclusivamente, limita o escopo das alterações. O termo "estender" é utilizado alternadamente com "sobrepor".

Sobreposições overlays

Sobrescrever um componente é um método para fazer modificações em um componente padrão e afetar todas as instâncias que usam o padrão.

A sobreposição é realizada modificando uma cópia do componente padrão no /aplicativos , em vez de modificar o componente original no /libs diretório. O componente é construído com um caminho relativo idêntico, exceto que 'libs' é substituído por 'apps'.

O diretório /apps é o primeiro local pesquisado para resolver solicitações e, se não for encontrado, a versão padrão localizada no diretório /libs será usada.

O componente padrão no diretório /libs nunca deve ser modificado, pois os patches e atualizações futuros são livres para alterar o diretório /libs de qualquer maneira necessária, mantendo as interfaces públicas.

Isso é diferente de extensão um componente padrão no qual o desejo é fazer modificações para um uso específico, criando um caminho exclusivo para o componente e confiando em fazer referência ao componente padrão original no diretório /libs como o tipo de superrecurso.

Para obter um exemplo rápido de sobreposição do componente de comentários, tente a variável Tutorial do componente Comentários da sobreposição.

Extensões extensions

Estender (substituir) um componente é um método para fazer modificações para um uso específico sem afetar todas as instâncias que usam o padrão. O componente estendido é nomeado exclusivamente na pasta /apps e faz referência ao componente padrão na pasta /libs, portanto, o design e o comportamento padrão de um componente não são modificados.

Isso é diferente de sobreposição o componente padrão, no qual a natureza do Sling resolve referências relativas para os aplicativos/pastas antes de pesquisar nas libs/pasta, portanto, o design ou comportamento de um componente é modificado globalmente.

Para obter um exemplo rápido de como estender o componente comentários, tente o Tutorial do componente Estender comentários.

Vínculo Javascript javascript-binding

O script HBS do componente deve ser vinculado aos objetos, modelos e visualizações do JavaScript que implementam esse recurso.

O valor da variável data-scf-component pode ser o padrão, como social/tally/components/hbs/rating ou um componente estendido (personalizado) para funcionalidade personalizada, como rede/componentes/hbs/classificação.

Para vincular um componente, o script de componente inteiro deve ser incluído em um <div> elemento com os seguintes atributos:

Por exemplo, de /apps/weretail/components/hbs/rating/rating.hbs:

<div class="we-Rating" data-component-id="{{id}}" data-scf-component="weretail/components/hbs/rating">

     <!-- HTML with HBS accessing the rating component -->

</div>

Propriedades Personalizadas custom-properties

Ao estender ou sobrepor um componente, é possível adicionar propriedades a uma caixa de diálogo modificada.

Todas as propriedades definidas em um componente/recurso podem ser acessadas referenciando as chaves da propriedade no modelo de handlebars:

{{properties.<property_name>}}

CSS de capa skinning-css

A personalização de componentes para corresponder ao tema geral do site pode ser alcançada com a definição de "esfolamento" - alteração de cores, fontes, imagens, botões, links, espaçamento e até mesmo posicionamento.

A capa pode ser alcançada substituindo seletivamente os estilos de estrutura ou escrevendo folhas de estilos inteiramente novas. Os componentes do SCF definem classes CSS namespacadas, modulares e semânticas que afetam os vários elementos que compõem um componente.

Para captar um componente:

Os estilos personalizados agora substituirão os estilos de estrutura padrão e o componente será renderizado com a nova capa.

Extensão Do Javascript extending-javascript

Para estender uma implementação de componentes do Javascript, é necessário apenas

forum.js: Exemplo de extensão do Fórum - HBS forum-js-sample-extension-of-forum-hbs

(function($CQ, _, Backbone, SCF) {
    "use strict";
    var GMForumView = SCF.ForumView.extend({
        viewName: "GMForum",
        showComposer: function(e) {
            SCF.ForumView.prototype.toggleComposer.apply(this);
            var cancel = this.$el.find('.cancel-new-topic');
            cancel.toggle();
        },
        hideComposer: function(e) {
            SCF.ForumView.prototype.toggleComposer.apply(this);
            var cancel = this.$el.find('.cancel-new-topic');
            cancel.toggle();
        }
    });

    SCF.registerComponent('social/forum/components/hbs/post', SCF.Post, SCF.PostView);
    SCF.registerComponent('social/forum/components/hbs/topic', SCF.Topic, SCF.TopicView);
    SCF.registerComponent('social/forum/components/hbs/forum', SCF.Forum, GMForumView );
})($CQ, _, Backbone, SCF);

Tags de script script-tags

As tags de script são uma parte inerente da estrutura do lado do cliente. Elas são a cola que ajuda a vincular a marcação gerada no lado do servidor aos modelos e visualizações no lado do cliente.

As tags de script em scripts SCF não devem ser removidas ao substituir ou substituir componentes. As tags de script SCF criadas automaticamente para injetar JSON no HTML são identificadas com o atributo data-scf-json=verdadeiro.

Clientlibs para SCF clientlibs-for-scf

O uso de bibliotecas do lado do cliente (clientlibs), fornece um meio de organizar e otimizar o Javascript e o CSS usado para renderizar o conteúdo no cliente.

As clientlibs para SCF seguem um padrão de nomenclatura muito específico para duas variantes, que variam somente pela presença de "autor" no nome da categoria:

Clientlibs completos complete-clientlibs

As clientlibs completas (não autoras) incluem dependências e são convenientes para inclusão com ui:includeClientLib.

Essas versões são encontradas em:

Por exemplo:

O Guia de componentes da comunidade lista as clientlibs completas necessárias para cada componente do SCF.

Clientlibs para componentes do Communities descreve como adicionar clientlibs a uma página.

Clientlibs de Autor author-clientlibs

As clientlibs de versão do autor são removidas para o Javascript mínimo necessário para implementar o componente.

Essas clientlibs nunca devem ser incluídas diretamente, mas estão disponíveis para incorporação em outras clientlibs, que são artesanais para um site.

Essas versões são encontradas na pasta libs do SCF:

Por exemplo:

Observação: embora as clientlibs do autor nunca incorporem outras bibliotecas, elas listam suas dependências. Quando incorporadas em outras bibliotecas, as dependências não são automaticamente extraídas e também devem ser incorporadas.

As clientlibs do autor necessárias podem ser identificadas ao inserir "autor" nas clientlibs listadas para cada componente do SCF no Guia de componentes da comunidade.

Considerações sobre o uso usage-considerations

Cada site é diferente em como eles gerenciam bibliotecas de clientes. Vários fatores incluem: