Blocksammlung

Dies ist eine Sammlung von Bausteinen, die als Teil des AEM-Produkts betrachtet und als Blueprints für Bausteine in Ihrem Projekt empfohlen werden.

Diese Bausteine stammen aus echten AEM-Projekten. Um Teil dieser Kollektion zu sein, muss ein Baustein in einer Reihe von Projekten einen hohen Nutzwert haben und ausreichend abstrakte Funktionen bieten und allgemein genug sein, damit er wiederverwendet werden kann, ohne das zugrunde liegende Inhaltsmodell ändern zu müssen.

Da sich die Anforderungen und Designs von Websites ändern, ändert sich auch die Blocksammlung. Es werden Ergänzungen vorgenommen, die den neu auftretenden Bedürfnissen von Projekten Rechnung tragen, aber Blöcke, die nicht häufig genug verwendet werden, werden ebenfalls entfernt (veraltet).

Für die Bausteine in der Sammlung gibt es nur wenige technische Grundsätze:

  • Intuitiv: Inhaltsstruktur, die intuitiv und leicht zu erstellen ist
  • Nützlich: Keine Abhängigkeiten, kompatibel mit Textbaustein
  • Responsiv: Funktioniert über alle Haltepunkte hinweg
  • Kontextabhängig: Erbt CSS-Kontext wie Text- und Hintergrundfarben
  • Lokalisierbar: Kein hartcodierter Inhalt
  • Schnell: Keine negativen Leistungseinbußen
  • SEO und A11y: SEO-freundlich und barrierefrei

Alle Bausteine können als Grundlage für Ihre eigene Blockentwicklung betrachtet werden. Es ist sehr wahrscheinlich, dass Sie alle .css und .js Code, um Ihre eigenen Projektanforderungen zu erfüllen. Der Hauptwert dieser Blöcke ist die Inhaltsstruktur, die sie bereitstellen.

Da der Code Ihres Blocks vollständig an Ihr Projekt angepasst wird, ist es nicht beabsichtigt, dass die Bausteine in der Kollektion abwärtskompatibel zu den jeweiligen älteren Versionen sind oder dass sie aktualisierbar sind.

Textbaustein

Die am häufigsten verwendeten Bausteine (sowie Standardinhaltstypen) werden in der AEM Bausteinvorlage kuratiert und sind Teil jedes AEM Projekts. Damit ein Baustein Teil der Bausteinvorlage wird, muss er von der überwiegenden Mehrheit aller AEM Projekte verwendet werden.

<h3>Überschriften</h3>

Standardinhalt

Verschiedene Ebenen von Überschriften bieten das semantische Backbone Ihres Dokuments

<h3>Text</h3>

Standardinhalt

Textkörper oder Textkörper mit komplexen semantischen Formatierungsoptionen

<h3>Bilder</h3>

Standardinhalt

Bilder bringen Ihren Inhalt lebendig

<h3>Listen</h3>

Standardinhalt

Sortierte und ungeordnete Listen, wo immer sie benötigt werden

<h3>Links</h3>

Standardinhalt

Referenzieren anderer Websites oder Ihres eigenen Inhalts

<h3>Schaltflächen</h3>

Standardinhalt

Aktionsaufruf-Schaltflächen und mehr

<h3>Code</h3>

Standardinhalt

Vorformatierten Code-Snippets in Ihrem Inhalt hervorheben

<h3>Abschnitte</h3>

Standardinhalt

Gruppieren von Inhalt auf Ihrer Seite in Abschnitte

<h3>Symbole</h3>

Standardinhalt

Machen Sie Ihren Inhalt interessanter mit Symbolen

<h3>Hero</h3>

Block

Hero-Behandlung am oberen Seitenrand

<h3>Spalten</h3>

Block

Flexible Handhabung mehrspaltiger Layouts auf responsive Weise

<h3>Karten</h3>

Block

Liste der Karten mit oder ohne Bilder und Links

<h3>Kopfzeile</h3>

Block

Flexibles Header- und Navigationsbeispiel

<h3>Fußzeile</h3>

Block

Einfacher erweiterbarer Fußzeilenblock

<h3>Metadaten</h3>

Fügen Sie bei Bedarf Metadaten zu Ihrer Seite hinzu.

<h3>Abschnittsmetadaten</h3>

Markieren oder strukturieren Sie den gesamten Inhalt eines Abschnitts.

Blocksammlung

Die Blocksammlung enthält Bausteine, die häufig verwendet werden, aber nicht so häufig als Bausteinvorlage gelten. Um in die Blocksammlung aufgenommen zu werden, muss ein Block für mehr als die Hälfte aller AEM verwendet werden.

Die Blocksammlung kann der Einstiegspfad in den Textbausteincode sein. Wenn ein Baustein in der Bausteinvorlage nicht mehr so viel verwendet wird, kann er in diese Sammlung verschoben werden.

<h3>Einbetten</h3>

Block

Einbetten von Social-Media-Inhalten in AEM Seiten

<h3>Fragment</h3>

Block

Teilen von Inhalten auf mehreren Seiten

<h3>Tabelle</h3>

Block

Eine Möglichkeit, tabellarische Daten in Zeilen und Spalten zu organisieren

<h3>Video</h3>

Block

Videos direkt von AEM anzeigen und wiedergeben

<h3>Akkordeon</h3>

Block

Ein Stapel beschreibender Beschriftungen, die umgeschaltet werden können, um zugehörigen vollständigen Inhalt anzuzeigen

<h3>Breadcrumbs</h3>

Block-Add-on

Eine Liste der Seitentitel und relevanten Links, die die Position der aktuellen Seite in der Navigationshierarchie anzeigen

<h3>Karussell</h3>

Block

Ein dynamisches Anzeigewerkzeug, das durch eine Reihe von Bildern mit optionalem Textinhalt reibungslos verläuft

<h3>Formular</h3>

Block

Eine Reihe von Eingabesteuerelementen, die gruppiert sind und Benutzern das Senden von Informationen ermöglichen

<h3>Zitat</h3>

Block

Anzeige eines Zitats oder Hervorhebung eines bestimmten Durchgangs (oder "Anführungszeichen ziehen") in einem Dokument

<h3>Suchen</h3>

Block

Ermöglicht es Benutzern, Site-Inhalte durch Eingabe eines Suchbegriffs zu finden

<h3>Registerkarten</h3>

Block

Segmentieren von Informationen in mehrere beschriftete (oder "Registerkarten"-Bereiche)

<h3>Modal</h3>

Autoblock

Ein Popup, das über anderen Site-Inhalten angezeigt wird

Die Blockerfassung entwickelt sich kontinuierlich basierend auf dem Feedback der AEM Community. Wenn Sie der Meinung sind, dass es einen Block gibt, der in der Blocksammlung enthalten sein sollte, wenden Sie sich bitte an Ihren AEM. Die aktuellen Kandidaten für die Aufnahme in die Blocksammlung umfassen:

  • Einverständnisbanner

Wenn Sie einen Block benötigen, der noch nicht Teil der Sammlung ist, ist es relativ einfach, AEM Projekte auf GitHub zu finden, die Beispielimplementierungen für alle oben genannten Kandidaten haben.

Blockpartei

Mit Block Party möchten wir unserer leidenschaftlichen Entwickler-Community einen Ort geben, um zu zeigen, was sie auf AEM Sites erstellt haben. Es ermöglicht auch anderen, das Neuerfinden des Rades zu vermeiden und diese Bausteine/Codeausschnitte/Integrationen, die von der Community erstellt wurden, wiederzuverwenden und den Code nach Bedarf an ihre eigenen Projekte anzupassen.

Hinweis: Obwohl wir unsere AEM-Entwickler-Community lieben und unterstützen, ist Adobe nicht für die Pflege oder Aktualisierung des Codes verantwortlich, der in Block Party gezeigt wird. Bitte benutzen Sie den Code nach eigenem Ermessen.

Wenn Sie ein AEM Entwickler sind und Ihren coolen Block/Codeausschnitt oder Ihre Integration übermitteln möchten, geben Sie Ihre Übermittlung ein Verwenden dieses Formulars.

Codeausschnitt
hannessolo

Vorschau

<small>Skript zum Hinzufügen von Modellen zu Ihrer Frankfurter Seite. Dabei wird das neue (ish) native Dialogfeldelement verwendet.

Sie können ihn hier in Aktion sehen:

</small>

Codeausschnitt
msagolj

Video-Autoplay

<small>Um Videos über verschiedene Browser hinweg automatisch abzuspielen, müssen Attribute festgelegt werden. Es ist wichtig, videoTag.muted = true genau auf diese Weise festzulegen, da es andernfalls nicht in Chrome wiedergegeben wird. z. setAttribute('muted', true) funktioniert nicht.</small>

Sidekick-Plugin
dylandepass

Sidekick-Bibliothek

Vorschau

<small>Die Sidekick-Bibliothek ist eine Erweiterung für die AEM Sidekick, die Entwicklern die Erstellung benutzeroberflächengesteuerter Tools für Inhaltsautoren ermöglicht. Sie enthält ein integriertes Baustein-Plug-in, das Autorinnen und Autoren eine Liste aller Bausteine intuitiv anzeigen kann, sodass Autorinnen und Autoren sich nicht mehr jede Variante eines Bausteins merken oder suchen müssen. Entwickler können auch eigene Plugins für die Sidekick-Bibliothek schreiben.</small>

Codeausschnitt
davidnuescheler

Metatag/JSON-basiertes CSP

<small>Mit diesem Ansatz wird ein CSP so festgelegt, dass nur einmal über das Kabel transportiert und dann auf dem Client zwischengespeichert wird. Ermöglicht die Verwaltung des CSP in einer einfach zu lesenden JSON-Datei</small>

Build-Tools
sachioross

SASS + AEM

<small>SASS-Kompilierung für Ihre CSS bei der lokalen Entwicklung in AEM</small>

Codeausschnitt
Buuhuu

Schrift

<small>ffetch ist ein kleiner Wrapper um die JavaScript-Abruffunktion, der Ihnen beim Erstellen einer zusammenstellbaren Anwendung beim Umgang mit der AEM Content API hilft. Dadurch wird es einfach, Inhalte aus einem AEM-Index abzurufen, verzögerte Paginierung anzuwenden, Links auf Seiten zu folgen und sogar Seitenmetadaten abzurufen. Mit Fetch können Sie eine Headless-Anwendung ohne Leistungsgepäck von Headless-SDKs und die Komplexität von Headless-APIs erstellen.</small>

Codeausschnitt
Spitzhacker

Dynamisch geladene Vorlagen

<small>Laden Sie CSS- und JS-spezifische CSS für eine Vorlage, sodass vorlagenspezifische Stile und automatische Blockierung möglich sind, ohne diesen Code in globale Skripte/Stile zu integrieren.

Hinweis: Da die Vorlage js vor dem Laden von Blöcken geladen wird, aber nachdem Abschnitte/Blöcke dekoriert wurden, muss die automatische Blockierung in diesem Sinne durchgeführt werden (d. h. erstellen und dekorieren Sie Blöcke und fügen Sie sie zu einem Abschnitt hinzu, laden Sie sie jedoch nicht).</small>

Codeausschnitt
fkakatie

Vorschau

<small>Dieses Snippet fügt Hyperlinks zu Bildern hinzu. Lesen Sie zur Verwendung das entsprechende Codefragment. Geben Sie beim Authoring in Wod/GDoc die Link-URL direkt nach dem Bild an.</small>

Block
jalagari

Formularblock

Vorschau

<small>Formularblock mit verschiedenen Funktionen

  • Google Recaptcha-Integration

  • Anlagenunterstützung in Forms.

  • Nachbearbeitung

    • E-Mail-Benachrichtigung
    • Daten mit Marketo oder Salesforce synchronisieren.</small>

Block
niekraaijMacher

Registerkarten

Vorschau

<small>Registerkartenblock basierend auf Abschnitten, die in scripts.js automatisch blockiert werden Unterstützt "Verschachtelungsblöcke"im Registerkartenblock sowie Abschnittsmetadaten wie Stile.

Tabulatorblocklogik, teilweise von CSS gesteuert</small>

Block
dave-fink

Bildvergleich

Vorschau

<small>Dies ist ein einfacher Inhaltsbaustein, um zwei Bilder mit einem Schieberegler zu vergleichen, um das Bild links oder rechts ein- oder auszublenden.</small>

Block
Spitzhacker

<small>Erstellt eine Breadcrumb-Navigationsleiste basierend auf den Seitentiteln der übergeordneten Seiten</small>

Codeausschnitt
andreituicu

DOM Helpers (React JSX-like)

Vorschau

<small>Dom Helpers, inspiriert von React JSX, um den AEM JS-Code präziser, einfacher zu schreiben, zu verstehen und zu überprüfen. DOM ähnelt der Syntaxstruktur, um die resultierende HTML einfach zu visualisieren, wenn der Code mit 100 % Vanilla JS betrachtet wird, ohne dass Kompilierung oder externe Abhängigkeiten erforderlich sind. Minimaler Mehraufwand (einige IP-Adressen und Funktionsaufrufe), der es Ihnen ermöglicht, 100 LHS beizubehalten und die Fallstricke der Verwendung von Zeichenfolgenvorlagen zur DOM-Manipulation zu vermeiden. Kann sowohl zum Rendern dynamischer Daten aus Tabellen als auch mit Daten aus Word-Dokumenten verwendet werden.</small>

Sidekick-Plugin
herzog31

Block- und Abschnittsplanung

Vorschau

<small>Mit diesem Code können Sie Bausteine oder Abschnitte planen. Fügen Sie einfach ein Datum oder einen Datumsbereich als Zeile zu Ihrer Block- oder Abschnitt-Metadatentabelle hinzu. Ihr Inhalt wird erst nach dem Datum oder innerhalb des Bereichs angezeigt.

Dies ist mit einer Sidekick-Erweiterung ausgestattet, mit der Sie eine Vorschau von vergangenem oder zukünftigem Inhalt anzeigen können.

Für vertrauliche Daten nicht geeignet, da sich der geplante Inhalt weiterhin im DOM befindet.</small>

Sonstiges
bosschaert

docxtools: Arbeiten mit mehreren .docx-Dateien aus der Befehlszeile linux-style

<small>Dieses Kommandozeilen-Tool ermöglicht es Ihnen, Aufgaben in einem Verzeichnisbaum von DOCX-Dateien ähnlich wie mit den linux 'grep'- oder 'sed'-Befehlen auszuführen. Derzeit unterstützt sind: * cat - Ausgabe Text Inhalt der DOCX-Datei in Konsole * grep - Suchen nach einem Regex im Dokumenttext * Ersetzen/Ersetzen-Link-Suche und Ersetzen von Text oder Hyperlinks innerhalb des Worts .docx-Dateien Hinweis: Das Tool ist in Rust geschrieben und die Versionen bieten plattformspezifische ausführbare Dateien. Wenn Sie einen anderen Plattform-Ping für David B oder einen PR-Beitrag benötigen.</small>

Sonstiges
synox

RSS-Feed-Generator GitHub-Workflow

Vorschau

<small>Dieser GitHub-Workflow aktualisiert die RSS-Feed-XML jedes Mal, wenn eine neue Seite veröffentlicht wird. Workflow:

Skripte:

</small>

Codeausschnitt
ramboz

Erstellen von Symbolspritzen

Vorschau

<small>Ein Mechanismus, um SVG-Symbole direkt im Dokument inline zu referenzieren, sodass die Symbole direkt aus der CSS formatiert werden können (Größe, Farbe usw.)</small>

Sonstiges
vtsaplin

AEM Ausdrücke

Vorschau

<small>AEM Ausdrücke ermöglichen es Benutzern, AEM in Vorlagen umzuwandeln, indem einfache Ausdrücke mit Parametern hinzugefügt werden. Diese Ausdrücke werden dann zu HTML-Elementen, die dynamisch abgerufene Inhalte anzeigen. Es ist auch möglich, Ausdrücke als Dekoratoren zu verwenden, um Inhalte um den Einfügepunkt herum zu gestalten und zu ergänzen. Dadurch werden Ausdrücke zu wiederverwendbaren Fragmenten, die in AEM Bausteinen der obersten Ebene platziert werden können.</small>

Codeausschnitt
sdmcraft

Externe Bilder

Vorschau

<small>Dieser Codeausschnitt zeigt einen Mechanismus zur Verwendung von Bildern auf einer AEM AEM Webseite, die von einem externen System (außerhalb von AEM AEM) abgerufen werden.</small>

Sonstiges
synox

<small>Ersetzt rekursiv veraltete Links in Word-Dokumenten durch neue Links, die auf einem Excel-Blatt basieren, durch die Zuordnung, normalerweise die redirects.xlsx.</small>

Sonstiges
sdmcraft

Visuelles Vergleichstool für Webseiten

Vorschau

<small>Dies ist ein visuelles Vergleichstool für den Vergleich von Webseiten. Oft möchten wir während der Arbeit an Stiländerungen für eine Site die Auswirkungen dieser Änderung auf der gesamten Site bewerten. Es ist mühsam, dies für alle Seiten manuell zu tun. Mit diesem Tool wird diese Aufgabe weitgehend automatisiert. Sobald die Verzweigungsreferenz und die Liste der URLs für visuelle Tests bereitgestellt wurden, werden alle URLs der Verzweigungen "main"und "test"durchlaufen und in einen Headless-Browser auf Play-back-Basis geladen. Außerdem werden Screenshots erstellt und die Unterschiede aufgezeichnet. Das Tool informiert den Benutzer über die Unterschiede und bietet den Speicherort der Screenshots, in denen die Unterschiede überprüft werden können.</small>

Sonstiges
amol-anand

Protokoll-Viewer

Vorschau

<small>Einfache Ansicht der Protokolle für Ihr AEM Edge-Bereitstellungsprojekt</small>

Sidekick-Plugin
usman-khalid

Barrierefreiheitsmodus

Vorschau

<small>Dieses Plug-in fügt eine Schaltfläche im Sidekick hinzu, um den "Barrierefreiheitsmodus"auf einer bestimmten Franklin-Seite zu aktivieren, die die Seite aus der Perspektive des Inhalts überprüft und über Dinge wie fehlenden Alternativtext auf Bildern, einfache Lesbarkeit und andere barrierefreie Elemente berichtet.

Es ist auch erweiterbar, um benutzerdefinierte Prüfungen zu erstellen, mit denen beispielsweise die korrekte Blocknutzung gefördert und Stilrichtlinien eingehalten werden können. Ein Beispiel dafür ist das Repository, das auf zu viele Instanzen eines Blocks auf einer Seite prüft und Berichte dazu erstellt.

Sie kann von Inhaltsautoren verwendet werden, um die Seite anzuzeigen und alle inhaltlichen oder barrierefreien Probleme vor der Veröffentlichung als Preflight-Prüfung zu beheben.</small>

Sidekick-Plugin
Spitzhacker

Prüfung der Verweise

<small>Sucht die von einer Seite verwendeten Verweise (Formulare, Fragmente, Links usw.) und erhalten Autoren 1-Klick-Zugriff, um sie anzuzeigen und zu bearbeiten. Kann auch auf eingehende Verweise überprüfen.</small>

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