Saiba como implementar estilos individuais e reutilizar componentes principais usando o Sistema Experience Manager Style. Este tutorial aborda o desenvolvimento do Sistema de estilos para estender os Componentes principais com CSS específico da marca e configurações avançadas de política do Editor de modelos.
Revise as ferramentas necessárias e as instruções para configurar um ambiente de desenvolvimento local.
Também é recomendável revisar a Bibliotecas do lado do cliente e fluxo de trabalho front-end tutorial para entender os fundamentos das bibliotecas do lado do cliente e as várias ferramentas de front-end integradas ao projeto do AEM.
Se você concluiu o capítulo anterior com êxito, é possível reutilizar o projeto e ignorar as etapas para verificar o projeto inicial.
Confira o código base que o tutorial constrói:
Confira o tutorial/style-system-start
ramificação de GitHub
$ cd aem-guides-wknd
$ git checkout tutorial/style-system-start
Implante a base de código em uma instância de AEM local usando suas habilidades Maven:
$ mvn clean install -PautoInstallSinglePackage
Se estiver usando AEM 6.5 ou 6.4, anexe a classic
para qualquer comando Maven.
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Você sempre pode exibir o código concluído em GitHub ou faça check-out do código localmente, alternando para a ramificação tutorial/style-system-solution
.
Este capítulo usa o Recurso Sistema de estilos para criar variações do Título e Texto componentes usados na página Artigo .
Estilo sublinhado disponível para uso para o Componente de título
O Sistema de estilos permite que desenvolvedores e editores de modelo criem várias variações visuais de um componente. Os autores, por sua vez, podem decidir qual estilo usar ao compor uma página. O Sistema de estilos é usado no restante do tutorial para atingir vários estilos únicos, ao usar os Componentes principais em uma abordagem de código baixo.
A ideia geral com o Sistema de estilos é que os autores possam escolher vários estilos de como um componente deve ser exibido. Os "estilos" são respaldados por classes CSS adicionais que são injetadas na div externa de um componente. Nas bibliotecas de clientes, as regras de CSS são adicionadas com base nessas classes de estilo para que o componente mude de aparência.
Você pode encontrar documentação detalhada do Style System aqui. Há também um grande vídeo técnico para entender o sistema de estilos.
O Componente de título foi anexada ao projeto em /apps/wknd/components/title
como parte da ui.apps módulo. Os estilos padrão dos elementos Cabeçalho (H1
, H2
, H3
…) já tiverem sido implementadas na ui.frontend módulo.
O Designs de artigo WKND contém um estilo exclusivo para o componente de Título com um sublinhado. Em vez de criar dois componentes ou modificar a caixa de diálogo do componente, o Sistema de estilos pode ser usado para permitir que os autores tenham a opção de adicionar um estilo sublinhado.
Vamos adicionar uma política para os componentes de Título para permitir que os autores de conteúdo escolham o estilo Sublinhado a ser aplicado a componentes específicos. Isso é feito usando o Editor de modelo no AEM.
Navegue até o Página do artigo modelo de: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html
Em Estrutura no modo principal Contêiner de layout, selecione o Política ícone ao lado do Título componente listado em Componentes permitidos:
Crie uma política para o componente de Título com os seguintes valores:
Título da política*: Título da WKND
Propriedades > Guia Estilos > Adicionar um novo estilo
Sublinhado : cmp-title--underline
Clique em Concluído para salvar as alterações na política de Título.
O valor cmp-title--underline
preenche a classe CSS no div externo da marcação HTML do componente.
Sendo um autor, vamos aplicar o estilo sublinhado a determinados Componentes de título.
Navegue até o La Skateparks artigo no editor do AEM Sites em: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
Em Editar , escolha um componente de Título . Clique no botão pincel e selecione o Sublinhado estilo:
Nesse ponto, nenhuma alteração visível ocorre como a variável underline
O estilo não foi implementado. No próximo exercício, esse estilo é implementado.
Clique no botão Informações da página ícone > Exibir como publicado para inspecionar a página fora do editor de AEM.
Use as ferramentas do desenvolvedor do navegador para verificar se a marcação em torno do componente de Título tem a classe CSS cmp-title--underline
aplicado ao div externo.
<div class="title cmp-title--underline">
<div data-cmp-data-layer="{"title-b6450e9cab":{"@type":"wknd/components/title","repo:modifyDate":"2022-02-23T17:34:42Z","dc:title":"Vans Off the Wall Skatepark"}}"
id="title-b6450e9cab" class="cmp-title">
<h2 class="cmp-title__text">Vans Off the Wall Skatepark</h2>
</div>
</div>
Em seguida, implemente o estilo Sublinhado usando o ui.frontend módulo do projeto AEM. O servidor de desenvolvimento de webpack que é fornecido com o ui.frontend para visualizar os estilos before é usada a implantação em uma instância local de AEM.
Inicie o watch
do ui.frontend módulo:
$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm run watch
Isso inicia um processo que monitora as alterações no ui.frontend
e sincronize as alterações na instância de AEM.
Retorne o IDE e abra o arquivo _title.scss
de: ui.frontend/src/main/webpack/components/_title.scss
.
Introduza uma nova regra direcionada para a variável cmp-title--underline
classe:
/* Default Title Styles */
.cmp-title {}
.cmp-title__text {}
.cmp-title__link {}
/* Add Title Underline Style */
.cmp-title--underline {
.cmp-title__text {
&:after {
display: block;
width: 84px;
padding-top: 8px;
content: '';
border-bottom: 2px solid $brand-primary;
}
}
}
É considerada uma prática recomendada usar sempre estilos de escopo restritos para o componente de destino. Isso garante que estilos extras não afetem outras áreas da página.
Todos os componentes principais seguem até Notação BEM. É uma prática recomendada direcionar a classe CSS externa ao criar um estilo padrão para um componente. Outra prática recomendada é direcionar nomes de classe especificados pela notação BEM do Componente principal em vez de elementos HTML.
Retorne ao navegador e à página de AEM. Você deve ver que o estilo Sublinhado foi adicionado:
No Editor de AEM, agora é possível ativar e desativar o Sublinhado e veja se as alterações foram refletidas visualmente.
Em seguida, repita etapas semelhantes para aplicar um estilo exclusivo ao Componente de texto. O componente de Texto foi enviado por proxy para o projeto em /apps/wknd/components/text
como parte da ui.apps módulo. Os estilos padrão dos elementos de parágrafo já foram implementados na variável ui.frontend.
O Designs de artigo WKND contém um estilo exclusivo para o componente de Texto com um bloco de aspas:
Em seguida, adicione uma política para os componentes de Texto.
Navegue até o Modelo da página do artigo de: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.
Em Estrutura no modo principal Contêiner de layout, selecione o Política ícone ao lado do Texto componente listado em Componentes permitidos:
Atualize a política do componente de Texto com os seguintes valores:
Título da política*: Texto do conteúdo
Plug-ins > Estilos de parágrafo > Ativar estilos de parágrafo
Guia Estilos > Adicionar um novo estilo
Bloco de Cotação : cmp-text--quote
Clique em Concluído para salvar as alterações na política de texto.
Navegue até o La Skateparks artigo no editor do AEM Sites em: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
Em Editar , escolha um componente de Texto . Edite o componente para incluir um elemento de aspas:
Selecione o componente de texto e clique no botão pincel e selecione o Bloco de Cotação estilo:
Use as ferramentas de desenvolvedor do navegador para inspecionar a marcação. Você deve ver o nome da classe cmp-text--quote
foi adicionado ao div externo do componente:
<!-- Quote Block style class added -->
<div class="text cmp-text--quote">
<div data-cmp-data-layer="{"text-60910f4b8d":{"@type":"wknd/components/text","repo:modifyDate":"2022-02-24T00:55:26Z","xdm:text":"<blockquote>&nbsp; &nbsp; &nbsp;&quot;There is no better place to shred then Los Angeles&quot;</blockquote>\r\n<p>- Jacob Wester, Pro Skater</p>\r\n"}}" id="text-60910f4b8d" class="cmp-text">
<blockquote> "There is no better place to shred then Los Angeles"</blockquote>
<p>- Jacob Wester, Pro Skater</p>
</div>
</div>
Em seguida, vamos implementar o estilo Bloco de Cotação usando o ui.frontend módulo do projeto AEM.
Se ainda não estiver em execução, inicie o watch
do ui.frontend módulo:
$ npm run watch
Atualizar o arquivo text.scss
de: ui.frontend/src/main/webpack/components/_text.scss
:
/* Default text style */
.cmp-text {}
.cmp-text__paragraph {}
/* WKND Text Quote style */
.cmp-text--quote {
.cmp-text {
background-color: $brand-third;
margin: 1em 0em;
padding: 1em;
blockquote {
border: none;
font-size: $font-size-large;
font-family: $font-family-serif;
padding: 14px 14px;
margin: 0;
margin-bottom: 0.5em;
&:after {
border-bottom: 2px solid $brand-primary; /*yellow border */
content: '';
display: block;
position: relative;
top: 0.25em;
width: 80px;
}
}
p {
font-family: $font-family-serif;
}
}
}
Nesse caso, os elementos de HTML brutos são direcionados pelos estilos. Isso ocorre porque o componente de Texto fornece um Editor de Rich Text para os autores de conteúdo. A criação de estilos diretamente no conteúdo do RTE deve ser feita com cuidado e é ainda mais importante criar um escopo restrito dos estilos.
Retorne ao navegador mais uma vez e você deve ver que o estilo de bloco Cotação foi adicionado:
Pare o servidor de desenvolvimento de webpack.
Os componentes do contêiner foram usados para criar a estrutura básica do Modelo de página de artigo e fornecer as zonas de soltar para os autores de conteúdo adicionarem conteúdo em uma página. Os contêineres também podem usar o Sistema de estilos, fornecendo aos autores de conteúdo ainda mais opções para projetar layouts.
O Contêiner principal do modelo de Página do artigo contém os dois contêineres que podem ser criados pelo autor e tem uma largura fixa.
Contêiner principal no modelo da página de artigo.
A política da Contêiner principal define o elemento padrão como main
:
O CSS que faz a variável Contêiner principal fixa é definido no ui.frontend módulo em ui.frontend/src/main/webpack/site/styles/container_main.scss
:
main.container {
padding: .5em 1em;
max-width: $max-content-width;
float: unset!important;
margin: 0 auto!important;
clear: both!important;
}
Em vez de direcionar o main
HTML, o Sistema de estilos pode ser usado para criar um elemento Largura fixa como parte da política Contêiner. O sistema de estilos poderia oferecer aos usuários a opção de alternar entre Largura fixa e Largura do fluido contêineres.
Parabéns, a Página do artigo é quase um estilo e você ganhou uma experiência prática usando o Sistema de estilos de AEM.
Saiba mais sobre as etapas completas para criar um componente de AEM personalizado que exibe o conteúdo criado em uma caixa de diálogo e explora o desenvolvimento de um Modelo do Sling para encapsular a lógica de negócios que preenche o HTL do componente.
Exibir o código concluído em GitHub ou revise e implante o código localmente na ramificação Git tutorial/style-system-solution
.
tutorial/style-system-solution
ramificação.