Collection de blocs

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 d'AEM de production réels. Pour faire partie de cette collection, un bloc doit être utilisé de manière intensive dans plusieurs projets et offrir 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.

Au fur et à mesure que les besoins et les conceptions des sites web changent, la collecte des blocs change également. Des ajouts seront apportés pour tenir compte des nouveaux besoins des projets, mais les blocs qui ne sont pas suffisamment utilisés 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
  • Utile : Aucune dépendance, compatible avec le standard
  • Responsive : Fonctionne sur tous les points d’arrêt
  • Prise en compte du contexte : Hérite du contexte CSS (texte et couleurs d’arrière-plan)
  • Localisable : Pas de contenu codé en dur
  • Rapide : Aucun impact négatif sur les performances
  • SEO et A11y : adapté aux moteurs de recherche 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 modifierez tous les .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.

Boileter

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

<h3>Titres</h3>

Contenu par défaut

Les différents niveaux d’en-têtes fournissent la colonne vertébrale sémantique de votre document.

<h3>Texte</h3>

Contenu par défaut

Texte du corps ou copie avec options de mise en forme sémantique enrichie

<h3>Images</h3>

Contenu par défaut

Les images donnent vie à votre contenu

<h3>Listes</h3>

Contenu par défaut

Listes triées et non triées là 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, etc.

<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

Regroupement du contenu de votre page en sections

<h3>Icônes</h3>

Contenu par défaut

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

<h3>Hero</h3>

Bloc

Traitement des héros en haut d’une page

<h3>Colonnes</h3>

Bloc

Manière flexible de gérer les 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 couramment utilisés, mais qui ne sont pas si courants qu’on les considère 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 dans le code standard. De même, si un bloc du standard n'est plus autant utilisé, il peut être déplacé vers cette collection.

<h3>Incorporer</h3>

Bloc

Méthode simple d’intégration du contenu des médias sociaux dans AEM pages

<h3>Fragment</h3>

Bloc

Partage de portions de contenu sur plusieurs pages

<h3>Tableau</h3>

Bloc

Un moyen d’organiser les données tabulaires en lignes et en 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 pouvant être basculés pour afficher le contenu complet associé.

<h3>Chemins de navigation</h3>

Module complémentaire de bloc

Liste des titres de page et des liens pertinents indiquant l’emplacement de la page active dans la hiérarchie de navigation

<h3>Carrousel</h3>

Bloc

Outil d’affichage dynamique qui évolue sans problème au travers d’une série d’images avec du contenu texte facultatif.

<h3>Formulaire</h3>

Bloc

Ensemble de contrôles de saisie regroupés permettant aux utilisateurs d’envoyer des informations.

<h3>Citation</h3>

Bloc

Affichage d’une citation ou d’un surlignage d’un passage spécifique (ou "guillemets d’extraction") dans un document

<h3>Recherche</h3>

Bloc

Permet aux utilisateurs de rechercher du contenu du site en entrant un terme de recherche

<h3>Onglets</h3>

Bloc

Informations sur les segments dans plusieurs panneaux étiquetés (ou "à onglets")

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

Autoblock

Une fenêtre contextuelle qui s’affiche sur le contenu d’un autre site

La collecte par bloc évolue continuellement en fonction des commentaires de la communauté AEM. Si vous pensez qu'un bloc doit être inclus dans la collection, veuillez contacter votre contact AEM. Les candidats actuels à l’inclusion dans la collection bloquée sont les suivants :

  • Bannière de consentement

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

Bloc

Avec Block Party, nous aimerions donner à notre communauté de développeurs passionnés un lieu où présenter ce qu'ils ont construit sur AEM sites. Il permet également à d’autres personnes d’éviter de réinventer la roue et de réutiliser ces blocs/fragments de code/intégrations créés par la communauté et de modifier le code selon les besoins pour l’adapter à leurs propres projets.

Remarque : Bien que nous aimions 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 Bloc. Veuillez utiliser le code à votre discrétion.

Si vous êtes un développeur AEM et que vous souhaitez envoyer votre bloc/fragment de code/intégration cool, veuillez saisir votre envoi. utilisation de ce formulaire.

Fragment de code
hannessolo

Boîte de dialogue modale

Prévisualisation

<small>Script pour ajouter des modèles à votre page de mise en ligne. Cette opération utilise l’élément de boîte de dialogue natif new(ish) .

Vous pouvez le voir en action ici :

Lien

</small>

Fragment de code
msagolj

Lecture automatique vidéo

<small>Pour lire automatiquement des vidéos dans différents navigateurs, un ensemble d’attributs doit être défini. Il est important de définir videoTag.muted = true exactement de cette manière, sinon il ne sera pas lu dans Chrome. Par exemple. setAttribute('muted', true) ne fonctionne pas.</small>

Module externe Sidekick
dylandepass

Bibliothèque de Sidekick

Prévisualisation

<small>La bibliothèque de Sidekick est une extension du AEM Sidekick qui permet aux développeurs de créer des outils pilotés par l’interface utilisateur pour les auteurs de contenu. Elle comprend un plug-in de blocs intégré qui peut afficher intuitivement une liste de tous les blocs pour les auteurs et autrices, ce qui leur évite de mémoriser ou de rechercher chaque variation d’un bloc. Les développeurs peuvent également écrire leurs propres modules externes pour la bibliothèque sidekick.</small>

Fragment de code
davidnuescheler

Métatag/CSP basé sur JSON

<small>Cette approche définit une stratégie de sécurité du contenu d’une manière qui n’est transportée qu’une seule fois par le biais du câble, puis mise en cache sur le client. Permet de gérer la CSP dans un fichier JSON facile à lire</small>

Outils de création
sachioross

SASS + AEM

<small>Compilation SASS pour votre CSS lors du développement local dans AEM</small>

Fragment de code
Buuhuu

récupérer

<small>fetch est un petit wrapper autour de la fonction de récupération JavaScript qui vous aide à gérer l’API de contenu AEM lors de la création d’une application composable. Cela facilite la récupération de contenu d’un index d’AEM, l’application d’une pagination différée, le suivi des liens vers les pages et même l’extraction des métadonnées de page. Grâce à la récupération, vous bénéficiez de toute la facilité de création d’une application sans interface utilisateur graphique, sans les gains de performances des SDK sans interface utilisateur ni la complexité des API sans interface utilisateur graphique.</small>

Fragment de code
shsteimer

Modèles chargés dynamiquement

<small>Chargez les fichiers CSS et JS spécifiques à un modèle, ce qui permet de mettre en forme et de bloquer automatiquement des modèles spécifiques, sans intégrer ce code dans les scripts/styles globaux.

Remarque : comme le modèle js est chargé avant le chargement des blocs, mais qu’une fois les sections/blocs décorés, le blocage automatique doit être effectué en tenant compte de cela (c’est-à-dire, créez et décorez vos blocs, puis ajoutez-les à une section, mais ne les chargez pas).</small>

Fragment de code
fkakatie

Images avec liens

Prévisualisation

<small>Ce fragment de code ajoute des liens hypertexte aux images. Pour l’utiliser, reportez-vous au fragment de code associé. Lors de la création dans Wod/GDoc, spécifiez l’URL du lien immédiatement après l’image.</small>

Bloc
jalagari

Bloc de formulaire

Prévisualisation

<small>Bloc de formulaire avec différentes fonctionnalités

  • Intégration de Google Recaptcha

  • Prise en charge des pièces jointes dans Forms.

  • Post-traitement

    • Notification par e-mail
    • Synchroniser les données avec Marketo ou Salesforce.</small>

Bloc
niekraaijakers

Onglets

Prévisualisation

<small>Bloc d’onglets basé sur des sections bloquées automatiquement dans scripts.js Prend en charge les blocs "d’imbrication" dans le bloc de tabulation ainsi que les métadonnées de section telles que les styles.

Logique de bloc d’onglet contrôlée partiellement par CSS</small>

Bloc
dave-fink

Comparaison d’images

Prévisualisation

<small>Il s’agit d’un bloc de contenu simple permettant de comparer deux images à un curseur pour afficher ou masquer l’image de gauche ou de droite.</small>

Bloc
shsteimer

Chemin de navigation

<small>Crée une navigation de chemin de navigation basée sur les titres de page des pages parents.</small>

Fragment de code
andreituicu

Assistant DOM (React JSX-Like)

Prévisualisation

<small>Les assistants Dom s’inspirent de React JSX pour rendre le code JS AEM plus concis, plus facile à écrire, à comprendre et à réviser. Le modèle DOM aime la structure de syntaxe pour visualiser facilement le HTML résultant de l’examen du code à l’aide d’un JS Vanilla 100 % sans aucune compilation ni dépendances externes requises. La surcharge minimale (quelques exceptions et appels de fonction) vous permet de conserver 100 LHS et d’éviter les pièges de l’utilisation de modèles de chaîne pour la manipulation DOM. Peut être utilisé à la fois pour le rendu de données dynamiques à partir de feuilles ou avec des données provenant de documents Word.</small>

Module externe Sidekick
herzog31

Planification des blocs et des sections

Prévisualisation

<small>Ce code vous permet de planifier des blocs ou des sections. Il vous suffit d’ajouter une date ou une plage de dates en ligne à votre tableau de métadonnées de bloc ou de section pour que le contenu ne s’affiche qu’après la date ou dans la plage.

Cette extension est fournie avec une extension de Sidekick qui vous permet de prévisualiser le contenu passé ou futur.

Inapproprié pour les données confidentielles, puisque le contenu planifié sera toujours dans le modèle DOM.</small>

Autre
bosschaert

docxtools: work with multiple .docx files from the command-line linux-style

<small>Cet outil de ligne de commande permet d'effectuer des tâches sur une arborescence de répertoires de fichiers .docx un peu comme vous le feriez avec les commandes linux 'grep' ou 'sed'. Actuellement pris en charge sont : * cat - output text content of docx file to console * grep - search for a regex in the document text * replace/replace-link search and replace text or hyperlinks inside word .docx files Remarque : l’outil est écrit en rouille et les versions fournissent des exécutables spécifiques à la plateforme. Si vous avez besoin d’une autre plateforme, envoyez un ping à David B ou contribuez à une requête de tirage.</small>

Autre
synox

Workflow Github du générateur de flux RSS

Prévisualisation

<small>Ce processus Github met à jour le flux RSS XML chaque fois qu’une nouvelle page est publiée. Workflow :

Lien

Scripts :

Lien

</small>

Fragment de code
ramboz

Création d’Icône Sprite

Prévisualisation

<small>Mécanisme permettant d’insérer des icônes de SVG directement dans le document afin que les icônes puissent être directement stylisées à partir du CSS (taille, couleur, etc.)</small>

Autre
vtsaplin

Expressions AEM

Prévisualisation

<small>Les expressions AEM permettent aux utilisateurs de transformer des documents AEM en modèles en ajoutant des expressions simples avec des paramètres. Ces expressions deviennent ensuite des éléments de HTML qui affichent du contenu récupéré dynamiquement. Il est également possible d’utiliser des expressions comme décorateurs pour mettre en forme et améliorer le contenu autour du point d’insertion. Les expressions deviennent ainsi des fragments réutilisables qui peuvent être placés à l’intérieur des blocs d’AEM de niveau supérieur.</small>

Fragment de code
sdmcraft

Images externes

Prévisualisation

<small>Ce fragment de code illustre un mécanisme d’utilisation d’images sur une page web AEM AEM qui sont récupérées à partir d’un système externe (en dehors de l’).</small>

Autre
synox

Remplacement de liens dans tous les fichiers .docx à l’aide d’une feuille Excel

<small>Remplace de manière récursive les liens obsolètes dans les documents Word par de nouveaux liens basés sur une feuille Excel avec le mappage, généralement le fichier redirections.xlsx.</small>

Autre
sdmcraft

Outil de comparaison visuelle pour les pages web

Prévisualisation

<small>Il s’agit d’un outil de comparaison visuelle pour comparer des pages web. Souvent, lorsque vous travaillez sur les modifications de style d’un site, nous voulons évaluer l’impact de ce changement sur l’ensemble du site. Cette opération manuelle pour toutes les pages est un processus fastidieux. Grâce à cet outil, cette tâche est considérablement automatisée. Une fois que la référence à la branche et la liste des URL lui sont fournies pour les tests visuels, elle passe en revue toutes les URL des branches "principale" et "test" et les charge dans un navigateur sans interface basé sur le droit de lecture, prend des captures d’écran et enregistre les différences. L’outil informe l’utilisateur des différences et fournit l’emplacement des captures d’écran où les différences peuvent être examinées.</small>

Autre
amol-anand

Visionneuse de journal

Prévisualisation

<small>Moyen simple d’afficher les journaux de votre projet Edge Delivery AEM</small>

Module externe Sidekick
usman-khalid

Mode d’accessibilité

Prévisualisation

<small>Ce module externe ajoute un bouton dans le sidekick pour activer le "mode d’accessibilité" sur une page Franklin donnée, ce qui permet d’examiner la page du point de vue du contenu et d’établir des rapports sur des éléments comme l’absence de texte de remplacement sur les images, la facilité de lisibilité et d’autres éléments d’accessibilité.

Il est également extensible de créer des vérifications personnalisées, qui peuvent être utilisées pour promouvoir une utilisation correcte des blocs et le respect des directives de style, par exemple. Il existe un exemple de cela dans le référentiel qui recherche trop d’instances d’un bloc sur une page et en tient compte.

Il peut être utilisé par les auteurs de contenu pour afficher la page et résoudre tout problème lié au contenu ou à l’accessibilité sous la forme d’un contrôle en amont avant la publication.</small>

Module externe Sidekick
shsteimer

Vérification des références

<small>Recherche les références utilisées par une page (formulaires, fragments, liens, etc.) et donne aux auteurs un accès en un clic pour les afficher et les modifier. Peut également vérifier les références entrantes.</small>

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