Documentação AEM Tutoriais do AEM Tutorials do WKND AEM Sites

Desenvolvimento com o sistema de estilo developing-with-the-style-system

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Tópicos:
Componentes principais

Criado para:

Iniciante
Desenvolvedor

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.

Pré-requisitos prerequisites

Revise as ferramentas e instruções necessárias para configurar um ambiente de desenvolvimento local.

Também é recomendável revisar o tutorial Bibliotecas do lado do cliente e Fluxo de trabalho de front-end para entender os fundamentos das bibliotecas do lado do cliente e as várias ferramentas de front-end integradas ao projeto AEM.

Projeto inicial

NOTE

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 a ramificação tutorial/style-system-start do GitHub

code language-shell
`$ 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:

code language-shell
`$ mvn clean install -PautoInstallSinglePackage`

note note
NOTE
Se estiver usando AEM 6.5 ou 6.4, anexe o perfil `classic` a qualquer comando Maven.

code language-shell
`$ mvn clean install -PautoInstallSinglePackage -Pclassic`

Você sempre pode exibir o código concluído em GitHub ou conferir o código localmente alternando para a ramificação tutorial/style-system-solution.

Objetivo

Entenda como usar o Sistema de estilos para aplicar CSS específico da marca aos Componentes principais do AEM.
Saiba mais sobre a notação BEM e como ela pode ser usada para definir estilos com cuidado.
Aplique configurações avançadas de política com Modelos editáveis.

O que você vai criar what-build

Este capítulo usa o recurso Sistema de Estilos para criar variações dos componentes Título e Texto usados na página Artigo.

Estilos disponíveis para o Título

Estilo de sublinhado disponível para uso para o Componente de Título

Fundo background

O 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. Também há um excelente vídeo técnico para entender o Sistema de Estilos.

Estilo do Sublinhado - Título underline-style

O Componente de Título foi encaminhado por proxy para o projeto em /apps/wknd/components/title como parte do módulo ui.apps. Os estilos padrão de elementos de cabeçalho (H1, H2, H3…) já foram implementados no módulo ui.frontend.

Os designs do Artigo da 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 de componentes, o Sistema de estilos pode ser usado para permitir que os autores adicionem uma opção de estilo sublinhado.

Estilo do Sublinhado - Componente de Título

Adicionar uma política de título

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é o modelo Página de Artigo de: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html
No modo Estrutura, no Contêiner de Layout principal, selecione o ícone Política ao lado do componente Título 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

Configuração da política de estilo para o título

Clique em Concluído para salvar as alterações na política de Título.

note note
NOTE
O valor `cmp-title--underline` preenche a classe CSS na div externa da marcação HTML do componente.

Aplicar o estilo de sublinhado

Como autor, vamos aplicar o estilo sublinhado a determinados Componentes de título.

Navegue até o artigo La Skateparks no editor do AEM Sites em: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html

No modo de Edição, escolha um componente de Título. Clique no ícone de pincel e selecione o estilo Sublinhado:

Aplicar o Estilo de Sublinhado

note note
NOTE
Neste ponto, nenhuma alteração visível ocorre, pois o estilo `underline` não foi implementado. No próximo exercício, esse estilo será implementado.

Clique no ícone Informações da página > Exibir como publicado para inspecionar a página fora do editor do AEM.

Use as ferramentas de desenvolvedor do seu navegador para verificar se a marcação ao redor do componente de Título tem a classe CSS cmp-title--underline aplicada ao div externo.

Div com classe sublinhada aplicada

code language-html

code language-html
`<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>`

<div class="title cmp-title--underline">
    <div data-cmp-data-layer="{&quot;title-b6450e9cab&quot;:{&quot;@type&quot;:&quot;wknd/components/title&quot;,&quot;repo:modifyDate&quot;:&quot;2022-02-23T17:34:42Z&quot;,&quot;dc:title&quot;:&quot;Vans Off the Wall Skatepark&quot;}}"
    id="title-b6450e9cab" class="cmp-title">
        <h2 class="cmp-title__text">Vans Off the Wall Skatepark</h2>
    </div>
</div>

Implementar o estilo de sublinhado - ui.frontend

Em seguida, implemente o estilo Underline usando o módulo ui.frontend do projeto AEM. O servidor de desenvolvimento do webpack que é fornecido com o módulo ui.frontend para visualizar os estilos antes de implantar em uma instância local de AEM é usado.

Iniciar o processo watch no módulo ui.frontend:

code language-shell
`$ cd ~/code/aem-guides-wknd/ui.frontend/ $ npm run watch`

Isso inicia um processo que monitora as alterações no módulo ui.frontend e sincroniza as alterações na instância do AEM.

Retorne ao IDE e abra o arquivo _title.scss de: ui.frontend/src/main/webpack/components/_title.scss.

Introduza uma nova regra direcionada à classe cmp-title--underline:

code language-scss

code language-scss
`/* 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; } } }`

/* 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;
        }
    }
}

note note
NOTE
É 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 à 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 você pode ativar e desativar o estilo Sublinhado e ver que as alterações são refletidas visualmente.

Estilo do bloco de aspas - Texto text-component

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 do módulo ui.apps. Os estilos padrão de elementos de parágrafo já foram implementados no ui.frontend.

Os designs do Artigo da WKND contêm um estilo exclusivo para o componente de Texto com um bloco de aspas:

Estilo do Bloco de Cotas - Componente de Texto

Adicionar uma política de texto

Em seguida, adicione uma política para os componentes de Texto.

Navegue até o Modelo da Página de Artigo de: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.
No modo Estrutura, no Contêiner de Layout principal, selecione o ícone Política ao lado do componente Texto 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 > Habilitar estilos de parágrafo

Guia Estilos > Adicionar um novo estilo

Bloco de Cotação : cmp-text--quote

do componente de Texto

Clique em Concluído para salvar as alterações na política de texto.

Aplicar o Estilo de Bloco de Cotação

Navegue até o artigo La Skateparks no editor do AEM Sites em: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
No modo Editar, escolha um componente de Texto. Edite o componente para incluir um elemento de aspas:
Selecione o componente de texto, clique no ícone de pincel e selecione o estilo de Bloco de Aspas:

Use as ferramentas de desenvolvedor do navegador para inspecionar a marcação. Você deve ver que o nome de classe cmp-text--quote foi adicionado à div externa do componente:

code language-html

code language-html
<!-- 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>

<!-- Quote Block style class added -->
<div class="text cmp-text--quote">
    <div data-cmp-data-layer="{&quot;text-60910f4b8d&quot;:{&quot;@type&quot;:&quot;wknd/components/text&quot;,&quot;repo:modifyDate&quot;:&quot;2022-02-24T00:55:26Z&quot;,&quot;xdm:text&quot;:&quot;<blockquote>&amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;quot;There is no better place to shred then Los Angeles&amp;quot;</blockquote>\r\n<p>- Jacob Wester, Pro Skater</p>\r\n&quot;}}" id="text-60910f4b8d" class="cmp-text">
        <blockquote>&nbsp; &nbsp; &nbsp;"There is no better place to shred then Los Angeles"</blockquote>
        <p>- Jacob Wester, Pro Skater</p>
    </div>
</div>

Implementar o estilo de bloco de cotação - ui.frontend

A seguir, vamos implementar o estilo de Bloco de Cotação usando o módulo ui.frontend do projeto AEM.

Se ainda não estiver em execução, inicie o processo watch de dentro do módulo ui.frontend:

code language-shell
`$ npm run watch`

Atualizar o arquivo text.scss de: ui.frontend/src/main/webpack/components/_text.scss:

code language-css

code language-css
/* 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; } } }

/* 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;
        }
    }
}

note caution
CAUTION
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.

Largura fixa - Contêiner (Bônus) layout-container

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.

O Contêiner Principal do modelo de Página de Artigo contém os dois contêineres que podem ser criados e tem uma largura fixa.

Contêiner principal

Contêiner principal no Modelo de página de artigo.

A política do Contêiner principal define o elemento padrão como main:

Política do Contêiner Principal

O CSS que corrige o Contêiner principal está definido no módulo ui.frontend 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 elemento de HTML main, o Sistema de Estilos pode ser usado para criar um estilo de Largura fixa como parte da política de Contêiner. O Sistema de Estilos pode dar aos usuários a opção de alternar entre contêineres de Largura fixa e Largura fluida.

Desafio de Bônus - use as lições aprendidas com os exercícios anteriores e use o Sistema de Estilos para implementar estilos de Largura fixa e Largura fluida para o componente de Contêiner.

Parabéns. congratulations

Parabéns, a página do artigo é quase do estilo e você ganhou experiência prática usando o Sistema de Estilos AEM.

Próximas etapas next-steps

Saiba mais sobre as etapas completas para criar um componente AEM personalizado que exiba conteúdo criado em uma caixa de diálogo e explore o desenvolvimento de um Modelo Sling para encapsular a lógica de negócios que preencha o HTL do componente.

Visualize o código concluído em GitHub ou revise e implante o código localmente em na ramificação Git tutorial/style-system-solution.

Clonar o repositório github.com/adobe/aem-wknd-guides.
Confira a ramificação tutorial/style-system-solution.

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9