Collection de blocs

Dernière mise à jour : 27 février 2025

Il s’agit d’un ensemble de blocs considérés comme faisant partie du produit AEM et qui sont recommandés en tant que plans directeurs pour les blocs de votre projet.

Ces blocs proviennent de projets AEM de production réels. Pour faire partie de cette collection, un bloc doit être utilisé de manière intensive dans un certain nombre de projets, fournir suffisamment de fonctionnalités abstraites et être suffisamment général pour pouvoir être réutilisé sans avoir à modifier le modèle de contenu sous-jacent.

À mesure que les besoins et les conceptions des sites web changent, la collection de blocs change également. Des ajouts seront effectués pour refléter les nouveaux besoins des projets, mais les blocs qui ne sont pas utilisés assez fréquemment seront également supprimés (obsolète).

Il existe peu de principes techniques pour les blocs de la collection :

  • Intuitif : structure de contenu intuitive et facile à créer
  • Utilisable : aucune dépendance, compatible avec standard
  • Réactif : fonctionne sur tous les points d’arrêt
  • Tenant compte du contexte : hérite du contexte CSS, tel que le texte et les couleurs d’arrière-plan
  • Localisable : aucun contenu codé en dur
  • Rapide : aucun impact négatif sur les performances
  • SEO et A11y: SEO convivial et accessible

Tous les blocs peuvent être considérés comme une base pour votre propre développement de blocs. Il est très probable que vous modifiiez l’ensemble du code .css et .js pour répondre aux besoins de votre projet. La valeur principale de ces blocs est la structure de contenu qu’ils fournissent.

Étant donné que le code de votre bloc sera entièrement adapté à votre projet, il n’est pas prévu que les blocs de la collection soient rétrocompatibles avec leurs versions antérieures respectives ou qu’ils puissent être mis à niveau.

Boilerplate

Les blocs les plus couramment utilisés (ainsi que les types de contenu par défaut) sont traités dans le modèle standard d’AEM et font partie de chaque projet AEM. Pour qu’un bloc devienne un élément standard, il doit être utilisé par la grande majorité de tous les projets AEM.

La base de code de tous les blocs dans AEM Boilerplate est en open source et se trouve sur GitHub adobe/aem-boilerplate

Les blocs dans AEM Boilerplate peuvent être découverts à l’aide de la bibliothèque sidekick ci-dessous. Utilisez le bouton copy pour copier la structure de contenu correspondante dans votre presse-papiers et la coller dans un document pour afficher la structure de contenu.

<h3>Titres</h3>

Contenu par défaut

Les différents niveaux de titres constituent la colonne vertébrale sémantique de votre document

<h3>Texte</h3>

Contenu par défaut

Corps de texte ou copie avec options de formatage sémantique riches

<h3>Images</h3>

Contenu par défaut

Les images animent votre contenu

<h3>Listes</h3>

Contenu par défaut

Listes ordonnées et non ordonnées où elles sont nécessaires

<h3>Liens</h3>

Contenu par défaut

Référencer d’autres sites web ou votre propre contenu

<h3>Boutons</h3>

Contenu par défaut

Boutons d’appel à l’action et plus

<h3>Code</h3>

Contenu par défaut

Mettre en surbrillance les fragments de code préformatés dans votre contenu

<h3>Sections</h3>

Contenu par défaut

Regrouper le contenu de votre page en sections

<h3>Icônes</h3>

Contenu par défaut

Rendre votre contenu plus intéressant avec des icônes

<h3>Héros</h3>

Bloc

Traitement héroïque en haut d’une page

<h3>Colonnes</h3>

Bloc

Méthode flexible pour gérer des dispositions à plusieurs colonnes de manière réactive

<h3>Cartes</h3>

Bloc

Liste des cartes avec ou sans images et liens

<h3>En-tête</h3>

Bloc

Exemple d’en-tête et de navigation flexible

<h3>Pied de page</h3>

Bloc

Bloc de pied de page extensible simple

<h3>Métadonnées</h3>

Ajoutez des métadonnées à votre page si nécessaire.

<h3>Métadonnées de section</h3>

Mettre en surbrillance ou structurer tout le contenu d’une section

Collection de blocs

La collection de blocs contient des blocs qui sont couramment utilisés, mais qui ne sont pas si courants que cela puisse être considéré comme standard. En règle générale, pour être inclus dans la collection de blocs, un bloc doit être utilisé sur plus de la moitié de tous les projets AEM.

La collection de blocs peut être le chemin d’entrée du code standard. De même, si un bloc de la plaque chauffante n'est plus aussi utilisé, il peut être déplacé vers cette collection.

La base de code de tous les blocs de la collection de blocs AEM est en open source et se trouve sur GitHub adobe/aem-block-collection

Les blocs de la collection de blocs d’AEM peuvent être découverts à l’aide de la bibliothèque du sidekick ci-dessous, utilisez le bouton copy pour copier la structure de contenu correspondante dans votre presse-papiers et la coller dans un document pour afficher la structure de contenu.

<h3>Incorporer</h3>

Bloc

Un moyen simple d’incorporer du contenu de réseaux sociaux dans des pages AEM

<h3>Fragment</h3>

Bloc

Partage d’éléments de contenu sur plusieurs pages

<h3>Tableau</h3>

Bloc

Méthode d'organisation des données tabulaires en lignes et colonnes

<h3>Vidéo</h3>

Bloc

Affichage et lecture de vidéos directement à partir d’AEM

<h3>Accordéon</h3>

Bloc

Une pile de libellés descriptifs qui peuvent être basculés pour afficher le contenu complet associé

<h3>Chemins de navigation</h3>

Bloquer le module complémentaire

Une liste de titres de page et de liens pertinents indiquant l’emplacement de la page active dans le hiérarchie de navigation

<h3>Carrousel</h3>

Bloc

Outil d’affichage dynamique qui effectue une transition en douceur dans une série d’images avec des options contenu texte

<h3>Boîte de dialogue modale</h3>

Blocage automatique

Fenêtre contextuelle qui s’affiche sur un autre contenu du site

<h3>Citation</h3>

Bloc

Affichage d’une citation ou d’une mise en surbrillance d’un passage spécifique (ou « guillemets ») dans une document

<h3>Recherche</h3>

Bloc

Permet aux utilisateurs de trouver le contenu du site en saisissant un terme de recherche

<h3>Onglets</h3>

Bloc

Segmenter les informations en plusieurs panneaux étiquetés (ou à onglets)

<h3>Formulaire</h3>

Bloquer (obsolète)

Ensemble de commandes de saisie regroupées qui permet aux utilisateurs d’envoyer des informations

La collecte de blocs est en constante évolution en fonction des commentaires de la communauté AEM. Si vous pensez qu’un bloc doit être inclus dans la collection de blocs, contactez votre contact AEM. Les candidats actuels à l’inclusion dans la collection de blocs sont les suivants :

  • Bannière de consentement

Si vous avez besoin immédiatement d’un bloc qui ne fait pas encore partie de la collection, il est relativement facile de trouver des projets AEM sur GitHub qui ont des exemples d’implémentation pour tous les candidats ci-dessus.

Blocage de la fête

La partie bloc est un endroit où la communauté des développeurs d’AEM peut présenter ce qu’ils ont créé sur les sites AEM. Il permet également aux autres d’éviter de réinventer la roue et de réutiliser ces blocs/fragments de code/intégrations créés par la communauté et d’ajuster le code selon les besoins pour l’adapter à leurs propres projets. Voir Block Party pour tout ce qu'il a à offrir.

Remarque : bien que nous appréciions et soutenions notre communauté de développeurs AEM, Adobe n’est pas responsable de la maintenance ou de la mise à jour du code présenté dans la partie barrage. Veuillez utiliser le code à votre discrétion.

recommendation-more-help