Saiba como implementar estilos individuais e reutilizar os Componentes principais usando o Sistema de estilos do Experience Manager. Este tutorial aborda o desenvolvimento para o Sistema de estilos a fim de estender os Componentes principais com CSS específico da marca e configurações de política avançadas do Editor de modelos.
Analisar as ferramentas e instruções necessárias para a configuração de um ambiente de desenvolvimento local.
É também recomendável rever a Bibliotecas do lado do cliente e fluxo de trabalho de front-end tutorial para entender os fundamentos das bibliotecas do lado do cliente e as várias ferramentas de front-end integradas ao projeto AEM.
Se você concluiu com êxito o capítulo anterior, é possível reutilizar o projeto e ignorar as etapas para verificar o projeto inicial.
Verifique o código de linha base no qual o tutorial se baseia:
Confira o tutorial/style-system-start
ramificar 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 de Maven:
$ mvn clean install -PautoInstallSinglePackage
Se estiver usando o AEM 6.5 ou 6.4, anexe o classic
para qualquer comando Maven.
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Você sempre pode exibir o código concluído em GitHub ou confira o código localmente alternando para a ramificação tutorial/style-system-solution
.
Este capítulo usa o Recurso Sistema de estilo para criar variações do Título e Texto componentes usados na página Artigo.
Estilo de sublinhado disponível para uso para o componente de Título
A variável Sistema de Estilos permite que desenvolvedores e editores de modelo criem várias variações visuais de um componente. Os autores podem decidir qual estilo usar ao compor uma página. O Sistema de estilos é usado no restante do tutorial para obter 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 podem escolher vários estilos de como um componente deve ser exibido. Os "estilos" são apoiados por classes CSS adicionais que são inseridas na div externa de um componente. Nas bibliotecas de clientes, as regras CSS são adicionadas com base nessas classes de estilo para que o componente altere a aparência.
Você pode encontrar documentação detalhada para o Sistema de estilos aqui. Há também uma grande vídeo técnico para entender o sistema de estilos.
A variável Componente de Título foi enviado por proxy para o projeto em /apps/wknd/components/title
como parte da ui.apps módulo. Os estilos padrão de elementos de cabeçalho (H1
, H2
, H3
(…) já foram implementadas no ui.frontend módulo.
A variável Designs de artigo da WKND contém um estilo exclusivo para o componente Título com um sublinhado. Em vez de criar dois componentes ou modificar a caixa de diálogo de componentes, o Sistema de estilos pode ser usado para permitir que os autores adicionem uma opção de 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 modelos no AEM.
Navegue até a Página do artigo modelo de: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html
Entrada 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 na div externa da marcação HTML do componente.
Como autor, vamos aplicar o estilo sublinhado a determinados Componentes de título.
Navegue até a La Skateparks name artigo no editor do AEM Sites em: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
Entrada Editar escolha um componente de Título. Clique em pincel e selecione o Sublinhado estilo:
Nesse ponto, nenhuma alteração visível ocorre, pois o underline
O estilo não foi implementado. No próximo exercício, esse estilo será implementado.
Clique em Informações da página ícone > Exibir como publicado para inspecionar a página fora do editor de AEM.
Use as ferramentas de desenvolvedor do navegador para verificar se a marcação ao redor do componente 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 Underline usando o ui.frontend módulo do projeto AEM. O servidor de desenvolvimento do webpack fornecido com o ui.frontend módulo para visualizar os estilos antes é usada a implantação em uma instância local do AEM.
Inicie o watch
processo de dentro 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 AEM.
Retorne ao IDE e abra o arquivo _title.scss
de: ui.frontend/src/main/webpack/components/_title.scss
.
Introduzir uma nova regra que vise o 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 definir sempre os estilos como escopo para o componente de destino. Isso garante que estilos extras não afetem outras áreas da página.
Todos os Componentes principais aderem a 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 dos Componentes principais em vez de elementos HTML.
Retorne à página do navegador e do AEM. Você verá que o estilo Underline foi adicionado:
No Editor de AEM, agora é possível ativar e desativar o Sublinhado estilo 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 de elementos de parágrafo já foram implementados na ui.frontend.
A variável Designs de artigo da WKND contém um estilo exclusivo para o componente Texto com um bloco de aspas:
Em seguida, adicione uma política para os componentes de Texto.
Navegue até a Modelo da página de artigo de: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.
Entrada 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é a La Skateparks name artigo no editor do AEM Sites em: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
Entrada 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 à div externa 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>
A seguir, vamos implementar o estilo de Bloco de Cotações usando o ui.frontend módulo do projeto AEM.
Se ainda não estiver em execução, inicie o watch
processo de dentro 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 autores de conteúdo. A criação de estilos diretamente em relação ao conteúdo do RTE deve ser feita com cuidado, e é ainda mais importante definir o escopo mais preciso dos estilos.
Retorne ao navegador mais uma vez e você verá que o estilo de bloco Cotação foi adicionado:
Interrompa o servidor de desenvolvimento do webpack.
Os componentes do container foram usados para criar a estrutura básica do Modelo de página de artigo e fornecer as zonas de lançamento para que os autores de conteúdo adicionem conteúdo a uma página. Os containers também podem usar o Sistema de estilos, fornecendo aos autores de conteúdo ainda mais opções para projetar layouts.
A variável Contêiner principal do modelo Página de artigo contém os dois contêineres possíveis de serem criados e tem uma largura fixa.
Contêiner principal no modelo de página do artigo.
A política do Contêiner principal define o elemento padrão como main
:
O CSS que faz o Contêiner principal fixo está definido na variável 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 poderia ser usado para criar um Largura fixa como parte da política de Contêineres. O sistema de estilos pode dar 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 do estilo e você ganhou experiência prática usando o Sistema de Estilos AEM.
Saiba mais sobre as etapas completas para criar um Componente AEM personalizado que exibe o conteúdo criado em uma caixa de diálogo e explora o desenvolvimento de um modelo 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 em na ramificação Git tutorial/style-system-solution
.
tutorial/style-system-solution
filial.