Bloquear coleção

Esta é uma coleção de blocos considerados parte do produto AEM e são recomendados como blueprints para blocos em seu projeto.

Esses bloqueios vêm de projetos de AEM de produção real. Para fazer parte dessa coleção, um bloco precisa ter alto uso em vários projetos e fornecer funcionalidade abstrata suficiente, além de ser geral o suficiente para que possa ser reutilizado sem precisar alterar o modelo de conteúdo subjacente.

À medida que as necessidades e os designs dos sites mudam, a coleção de blocos também muda. As adições serão feitas para refletir as necessidades emergentes dos projetos, mas os blocos que não forem usados com frequência suficiente também serão removidos (obsoletos).

Existem alguns princípios técnicos para os blocos na coleção:

  • Intuitivo: Estrutura de conteúdo intuitiva e fácil de criar
  • Utilizável: Sem dependências, compatível com boilerplate
  • Responsivo: Funciona em todos os pontos de interrupção
  • Sensível ao contexto: Herda o contexto CSS, como texto e cores de fundo
  • Localizável: Nenhum conteúdo embutido em código
  • Rápido: Nenhum impacto negativo no desempenho
  • SEO e A11y: compatível com SEO e acessível

Todos os blocos podem ser considerados como a base para o seu próprio desenvolvimento de blocos. É muito provável que você altere todas as .css e .js código para atender às suas próprias necessidades de projeto. O valor principal desses blocos é a estrutura de conteúdo que eles fornecem.

Considerando que o código do bloco será totalmente adaptado ao seu projeto, não há intenção de que os blocos na coleção sejam compatíveis com as respectivas versões anteriores ou de torná-los atualizáveis.

Boilerplate

Os blocos mais usados (bem como os tipos de conteúdo padrão) têm curadoria no Boilerplate do AEM e fazem parte de todos os projetos AEM. Para que um bloco se torne parte da chapa tem que ser usado pela grande maioria de todos os projetos AEM.

<h3>Cabeçalhos</h3>

Conteúdo padrão

Diferentes níveis de cabeçalhos fornecem a estrutura semântica do documento

<h3>Texto</h3>

Conteúdo padrão

Corpo de texto ou cópia com opções avançadas de formatação semântica

<h3>Imagens</h3>

Conteúdo padrão

Imagens dão vida ao seu conteúdo

<h3>Listas</h3>

Conteúdo padrão

Listas ordenadas e não ordenadas onde quer que sejam necessárias

<h3>Links</h3>

Conteúdo padrão

Fazer referência a outros sites ou ao seu próprio conteúdo

<h3>Botões</h3>

Conteúdo padrão

Botões de frase de chamariz e muito mais

<h3>Código</h3>

Conteúdo padrão

Realçar trechos de código pré-formatados no seu conteúdo

<h3>Seções</h3>

Conteúdo padrão

Agrupar conteúdo da página em seções

<h3>Ícones</h3>

Conteúdo padrão

Torne seu conteúdo mais interessante com ícones

<h3>Herói</h3>

Bloco

Tratamento herói no topo de uma página

<h3>Colunas</h3>

Bloco

Maneira flexível de lidar com layouts de várias colunas de maneira responsiva

<h3>Cartões</h3>

Bloco

Lista de cartões com ou sem imagens e links

<h3>Cabeçalho</h3>

Bloco

Cabeçalho flexível e exemplo de navegação

<h3>Rodapé</h3>

Bloco

Bloco de rodapé extensível simples

<h3>Metadados</h3>

Adicione metadados à sua página, onde necessário

<h3>Metadados de seção</h3>

Realçar ou estruturar todo o conteúdo em uma seção

Bloquear coleção

A coleção de blocos contém blocos que são comumente usados, mas não são tão comuns para serem considerados placas de expansão. Como regra geral, para ser incluído na coleção de blocos, um bloco deve ser usado em mais da metade de todos os projetos de AEM.

A coleção de blocos pode ser o caminho de entrada no código padronizado. Da mesma forma, se um bloco na chapa não for mais usado, ele poderá ser movido para essa coleção.

<h3>Incorporação</h3>

Bloco

Uma maneira simples de incorporar conteúdo de mídia social em páginas de AEM

<h3>Fragmento</h3>

Bloco

Compartilhar partes do conteúdo em várias páginas

<h3>Tabela</h3>

Bloco

Uma maneira de organizar dados tabulares em linhas e colunas

<h3>Vídeo</h3>

Bloco

Exibir e reproduzir vídeos diretamente do AEM

<h3>Acordeão</h3>

Bloco

Uma pilha de rótulos descritivos que podem ser alternados para exibir o conteúdo completo relacionado

<h3>Navegações estruturais</h3>

Bloquear Complemento

Uma lista de títulos de página e links relevantes mostrando o local da página atual na hierarquia de navegação

<h3>Carrossel</h3>

Bloco

Uma ferramenta de exibição dinâmica que faz uma transição suave entre uma série de imagens com conteúdo de texto opcional

<h3>Formulário</h3>

Bloco

Um conjunto de controles de entrada agrupados que permite aos usuários enviar informações

<h3>Aspas</h3>

Bloco

Uma exibição de uma citação ou um destaque de passagem específica (ou "citações pull") dentro de um documento

<h3>Pesquisar</h3>

Bloco

Permite que os usuários encontrem o conteúdo do site inserindo um termo de pesquisa

<h3>Guias</h3>

Bloco

Segmente informações em vários painéis rotulados (ou com "guias")

<h3>Modal</h3>

Bloqueio automático

Um pop-up que aparece sobre o conteúdo de outro site

A coleção de blocos está em constante evolução com base no feedback da comunidade AEM. Se você acha que há um bloco que deve ser incluído na coleção de blocos, fale com o seu contato AEM. Os candidatos atuais para inclusão na coleção de blocos são:

  • Banner de consentimento

Se você precisar imediatamente de um bloco que ainda não faz parte da coleção, é relativamente fácil encontrar projetos AEM no GitHub que tenham implementações de exemplo para todos os candidatos acima.

Bloquear Grupo

Com o Block Party, gostaríamos de oferecer à nossa apaixonada comunidade de desenvolvedores um lugar para mostrar o que eles construíram em sites de AEM. Ele também permite que outros evitem reinventar a roda e reutilizem esses blocos/snippets de código/integrações criadas pela comunidade e ajuste o código conforme necessário para se adequar aos seus próprios projetos.

Observação: embora adoremos e apoiemos nossa comunidade de desenvolvedores de AEM, o Adobe não é responsável por manter ou atualizar o código exibido no Block Party. Use o código a seu critério.

Se você for um desenvolvedor de AEM e quiser enviar seu bloco divertido/trecho de código ou integração, insira seu envio usando este formulário.

Trecho de código
hannessolo

Visualização

<small>Script para adicionar modais à sua página do franklin. Usa o novo elemento nativo da caixa de diálogo.

Você pode vê-lo em ação aqui:

</small>

Trecho de código
msagolj

Reprodução automática de vídeo

<small>Para reproduzir vídeos automaticamente em navegadores diferentes, um conjunto de atributos precisa ser definido. É importante definir videoTag.muted = true exatamente dessa maneira, caso contrário, ele não será reproduzido no chrome. P. ex. setAttribute('mudo', true) não funciona.</small>

plug-in do Sidekick
dylandepass

Biblioteca Sidekick

Visualização

<small>A Biblioteca Sidekick é uma extensão do AEM Sidekick que permite aos desenvolvedores criar ferramentas orientadas por interface para autores de conteúdo. Ele inclui um plug-in de blocos integrado que pode exibir uma lista de todos os blocos para os autores de forma intuitiva, eliminando a necessidade de os autores se lembrarem ou pesquisarem cada variação de um bloco. Os desenvolvedores também podem escrever seus próprios plugins para a biblioteca sidekick.</small>

Trecho de código
davidnuescheler

CSP baseado em Metatag/JSON

<small>Essa abordagem está definindo um CSP de uma maneira que é transportada apenas pela conexão uma vez e, em seguida, armazenada em cache no cliente. Permite gerenciar a CSP em um arquivo JSON de fácil leitura</small>

Criar ferramentas
sachioross

SASS + AEM

<small>Compilação SASS para CSS enquanto desenvolve localmente no AEM</small>

Trecho de código
Buuhuu

fetch

<small>ffetch é um pequeno invólucro em torno da função fetch do JavaScript que ajuda você a lidar com a API de conteúdo do AEM ao criar um aplicativo combinável. Ele facilita a busca de conteúdo de um índice AEM, a aplicação de paginação lenta, o acompanhamento de links para páginas e até mesmo a obtenção de metadados de página. Com o ffetch, você tem toda a facilidade de criar um aplicativo headless sem a bagagem de desempenho dos SDKs headless e a complexidade das APIs headless.</small>

Trecho de código
shsteimer

Modelos carregados dinamicamente

<small>Carregar CSS e JS específicos para um modelo, permitindo o estilo e o bloqueio automático específicos do modelo, sem mesclar esse código em scripts/estilos globais.

Observação: como o modelo js é carregado antes que os blocos sejam carregados, mas depois que as seções/blocos são decorados, o bloqueio automático precisa ser feito tendo isso em mente (ou seja, crie e decore os blocos e adicione-os a uma seção, mas não os carregue).</small>

Trecho de código
fkakatie

Visualização

<small>Este trecho adiciona hiperlinks a imagens. Para usá-lo, consulte o trecho de código vinculado. E durante a criação no Word/GDoc, especifique o URL do link imediatamente após a imagem.</small>

Bloquear
jalagari

Bloco de formulário

Visualização

<small>Bloco de formulário com vários recursos

  • Integração do Google Recaptcha

  • Suporte ao anexo no Forms.

  • Pós-processamento

    • Notificação por e-mail
    • Sincronizar dados com o Marketo ou Salesforce.</small>

Bloquear
niekraaijmakers

Guias

Visualização

<small>As guias são bloqueadas automaticamente com base em seções no script.js. Suporta o "aninhamento" de blocos no bloco de guias, bem como metadados de seção, como estilos.

Lógica de bloco de guias controlada parcialmente por css</small>

Bloquear
dave-fink

Image-Compare

Visualização

<small>Este é um bloco de conteúdo simples para comparar duas imagens com um controle deslizante para mostrar ou ocultar a imagem esquerda ou direita.</small>

Bloquear
shsteimer

<small>Cria uma navegação estrutural baseada nos títulos das páginas principais</small>

Trecho de código
andreituicu

Auxiliares de DOM (React-Like JSX)

Visualização

<small>Auxiliares Dom inspirados no React JSX para tornar o código AEM JS mais conciso, fácil de escrever, entender e revisar. Estrutura de sintaxe tipo DOM para visualizar facilmente o HTML resultante ao observar o código usando 100% JS padrão sem compilação ou dependências externas necessárias. Sobrecarga mínima (alguns ifs e chamadas de função), permitindo que você mantenha 100 LHS e evite as armadilhas do uso de modelos de string para a manipulação de DOM. Pode ser usado para renderizar dados dinâmicos de folhas ou com dados provenientes de documentos do Word.</small>

plug-in do Sidekick
herzog31

Agendamento de bloco e seção

Visualização

<small>Esse código permite agendar blocos ou seções. Basta adicionar uma data ou um intervalo de datas como linha à tabela de metadados de bloco ou seção e o conteúdo só será exibido após a data ou dentro do intervalo.

Isso vem com uma extensão Sidekick, que permite pré-visualizar conteúdo passado ou futuro.

Não é adequado para dados confidenciais, pois o conteúdo agendado ainda estará no DOM.</small>

Outro
bosschaert

docxtools: trabalhe com vários arquivos .docx a partir da linha de comando linux-style

<small>Essa ferramenta de linha de comando permite executar tarefas em uma árvore de diretório de arquivos .docx da mesma forma que com os comandos 'grep' ou 'sed' do linux. Atualmente compatíveis são: * cat - conteúdo de texto de saída do arquivo docx para o console * grep - pesquisar um regex no texto do documento * substituir/substituir-link pesquisar e substituir texto ou hiperlinks dentro dos arquivos .docx do Word Observação: a ferramenta é escrita em Rust e as versões fornecem executáveis específicos da plataforma. Se você precisar de uma plataforma diferente, execute ping no David B ou contribua com uma PR.</small>

Outro
sinox

Fluxo de trabalho do gerador de RSS Feed Github

Visualização

<small>Esse fluxo de trabalho do GitHub atualiza o XML do feed RSS sempre que uma nova página é publicada. Fluxo de trabalho:

Scripts:

</small>

Trecho de código
ramboz

Ícone Sprite

Visualização

<small>Um mecanismo para embutir ícones de SVG diretamente no documento para que os ícones possam ser estilizados diretamente do CSS (tamanho, cor etc.)</small>

Outro
vtsaplin

Expressões AEM

Visualização

<small>As expressões AEM permitem que os usuários transformem documentos AEM em modelos adicionando expressões simples com parâmetros. Essas expressões se tornam elementos HTML que exibem o conteúdo buscado dinamicamente. Também é possível usar expressões como decoradores para estilizar e aumentar o conteúdo ao redor do ponto de inserção. Isso transforma expressões em fragmentos reutilizáveis que podem ser colocados dentro de blocos AEM de nível superior.</small>

Trecho de código
sdmcraft

Imagens Externas

Visualização

<small>Este trecho de código demonstra um mecanismo para usar imagens em uma página da Web de AEM AEM que são buscadas de um sistema externo (fora do AEM AEM)</small>

Outro
sinox

<small>Substitui recursivamente links desatualizados em documentos do Word por novos links com base em uma planilha do Excel com o mapeamento, geralmente o redirects.xlsx.</small>

Outro
sdmcraft

Ferramenta de comparação visual para páginas da Web

Visualização

<small>Esta é uma ferramenta de comparação visual para comparar páginas da Web. Muitas vezes, ao trabalhar em alterações de estilo em um site, queremos avaliar o impacto dessa alteração em todo o site. Fazer isso manualmente para todas as páginas é um processo entediante. Com essa ferramenta, essa tarefa é automatizada em uma extensão considerável. Uma vez que a referência da ramificação e a lista de URLs é fornecida a ela para testes visuais, ela percorre todas as URLs nas ramificações "main" e "test" e as carrega em um navegador headless baseado no Playwright, captura as telas e registra as diferenças. A ferramenta informa o usuário sobre as diferenças e fornece a localização das capturas de tela, onde as diferenças podem ser revisadas.</small>

Outro
amol-anand

Visualizador de Log

Visualização

<small>Maneira fácil de visualizar registros do seu projeto de entrega do AEM Edge</small>

plug-in do Sidekick
usman-khalid

Modo de acessibilidade

Visualização

<small>Este plug-in adiciona um botão no sidekick para habilitar o "Modo de acessibilidade" em uma determinada página do Franklin, que audita a página de uma perspectiva de conteúdo e relata coisas como ausência de texto alternativo em imagens, facilidade de leitura e outros itens de acessibilidade.

Também é extensível criar verificações personalizadas, que podem ser usadas para promover o uso correto de blocos e seguir as diretrizes de estilo, por exemplo. Há um exemplo disso no repositório que verifica muitas instâncias de um bloco em uma página e relata sobre ele.

Ele pode ser usado por autores de conteúdo para exibir a página e resolver qualquer problema relacionado a conteúdo ou acessibilidade como uma verificação de comprovação antes da publicação.</small>

plug-in do Sidekick
shsteimer

Verificação de referências

<small>Localiza as referências usadas por uma página (formulários, fragmentos, links etc.) e oferece aos autores acesso com um clique para visualizá-los e editá-los. Também é possível verificar referências de entrada.</small>

recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec