Markup, Abschnitte, Blöcke und automatisches Blockieren
Um Websites zu entwerfen und Funktionen zu erstellen, verwenden Entwickler das Markup und DOM, die dynamisch aus dem Inhalt gerendert werden. Markup und DOM sind so konstruiert, dass flexible Manipulationen und Stile möglich sind. Gleichzeitig bietet es vordefinierte Funktionen, sodass der Entwickler sich über einige Aspekte moderner Websites keine Gedanken machen muss.
Struktur eines Dokuments
Der wichtigste Aspekt bei der Strukturierung eines Dokuments besteht darin, es für Autoren, die den Inhalt beitragen, einfach und intuitiv zu gestalten.
Daher wird dringend empfohlen, Autoren frühzeitig in den Prozess einzubeziehen. In vielen Fällen ist es empfehlenswert, Autoren einfach den Inhalt, der auf eine Seite verschoben werden muss, in ein Google-Dokument oder ein Word-Dokument einfügen zu lassen, ohne eine Vorstellung von Bausteinen und Abschnitten zu haben. Versuchen Sie dann, kleine Strukturänderungen vorzunehmen und nur dann Abschnitte und Bausteine einzuführen, wenn dies erforderlich ist.
Ein Dokument folgt der folgenden Struktur in der Abstraktion.
Eine in Word oder einem Google Doc-Dokument erstellte Seite verwendet das wohlverstandene semantische Modell wie Überschriften, Textkörper, Listen, Bilder, Links usw. , das von HTML, Markdown und Google Doc/Word gemeinsam verwendet wird. Wir nennen das Standardinhalt. In einer idealen Situation lässt sich so viel Inhalt wie möglich als Standardinhalt verfassen, da dies der natürliche Weg für Autoren ist, Dokumente zu behandeln.
Neben dem Standardinhalt haben wir ein Konzept der Seite Abschnitte, getrennt durch horizontale Regeln oder --- um bestimmte Elemente einer Seite zu gruppieren. Es kann sowohl semantische als auch Design-Gründe geben, Inhalte zu gruppieren. Ein einfacher Fall könnte sein, dass ein Abschnitt einer Seite eine andere Hintergrundfarbe hat.
Darüber hinaus gibt es das Konzept der Bausteine die als Tabelle mit einer Überschrift als erste Zeile erstellt werden, die den Blocktyp angibt. Dieses Konzept ist der einfachste Ansatz, um Ihren Code zu komponieren.
Abschnitte können mehrere Blöcke enthalten. Blöcke sollten nie verschachtelt werden, da sie die Verwendung für Autoren sehr erschweren.
DOM vs. Markup
AEM erzeugt ein sauberes und leicht lesbares semantisches Markup aus dem Inhalt, der ihm bereitgestellt wird. Sie können einfach über die Ansichtsquelle und sehen Sie sich das Markup der Seite an, die Sie gerade lesen.
Die in scripts.js nimmt das Markup auf und erweitert es zu einem DOM, das dann für die meisten Entwicklungsaufgaben verwendet wird, insbesondere zum Erstellen von Bausteinen. Um ein DOM zu erstellen, das für benutzerdefinierten Projektcode einfach zu verwenden ist, sollten Sie es am besten in zwei Schritten betrachten.
Im ersten Schritt erstellen wir das Markup mit Abschnitten, Bausteinen und Standardinhalten, die diesem ähneln.
Im zweiten Schritt wird die oben genannte Aufspaltung in das folgende Beispiel-DOM erweitert, das dann für die Formatierung und das Hinzufügen von Funktionen verwendet werden kann. Die Unterschiede zwischen dem vom Server bereitgestellten Markup und dem erweiterten DOM, das für die meisten Entwicklungsaufgaben verwendet wird, werden unten hervorgehoben.
Es besteht hauptsächlich aus der Einführung eines Wrappers <div> für Bausteine und Standardinhalte sowie dynamisches Hinzufügen zusätzlicher hilfreicher CSS-Klassen und Datenattribute, die vom AEM-Blocklader verwendet werden.
Abschnitte
Abschnitte bieten eine Möglichkeit, Standardinhalte und -blöcke vom Autor zu gruppieren. Die meisten Zeitunterteilungsumbrüche werden basierend auf visuellen Unterschieden zwischen Abschnitten eingeführt, z. B. einer anderen Hintergrundfarbe für einen Teil einer Seite.
Aus der Entwicklungsperspektive ergibt sich für gewöhnlich keine große Interaktion mit Abschnitten, die über die CSS-Formatierung hinausgehen.
Abschnitte können einen speziellen Block namens Section Metadata, was zu Datenattributen für einen Abschnitt führt. Die Namen der Datenattribute können von den Autoren ausgewählt werden. Die einzige bekannte Abschnitt-Metadateneigenschaft ist Style wird in zusätzliche CSS-Klassen umgewandelt, die zum übergeordneten Abschnittselement hinzugefügt werden.
Blöcke und Standardinhalte werden immer in einen Abschnitt eingeschlossen, auch wenn der Autor keine speziellen Abschnittsumbrüche einführt.
Standardinhalt
Es gibt eine breite Palette an Semantik, die von Word-Dokumenten, Google-Dokumenten, Markdown und HTML gemeinsam genutzt werden. Zum Beispiel gibt es Überschriften verschiedener Ebenen (z. B. <h1> - <h6>), Bilder, Links, Listen (<ul>, <ol>), Hervorhebung (<em>, <strong>) usw.
Wir nutzen das intuitive Verständnis, das Autoren haben, wie sie diese Semantik in den Tools verwenden können, mit denen sie vertraut sind (z. B. Word-/Google-Dokumente), ordnet sie Markdown zu und rendert sie dann im HTML-Markup.
Alle Zuordnungen sollten relativ einfach und intuitiv für den Entwickler sein. Ein Bereich, in dem wir etwas weiter gehen als die einfachste Übersetzung, ist die Bearbeitung von Bildern. Statt einer einfachen <img> Tag, ein vollständiges <picture> -Tag wird mit einer Reihe verschiedener Auflösungen gerendert, die für die Anzeige auf Desktop- und Mobilgeräten erforderlich sind, sowie mit verschiedenen Formaten für moderne Browser, die Web und ältere Browser unterstützen, die dies nicht tun.
Blöcke
Die meisten projektspezifischen CSS- und JavaScript-Dateien werden in Blöcken gespeichert. Autoren erstellen Blöcke in ihren Dokumenten und Entwickler schreiben den entsprechenden Code, der die Blöcke mit CSS formatiert und/oder das DOM dekoriert, um das Markup eines Bausteins zu übernehmen und es in die Struktur umzuwandeln, die für die gewünschte Formatierung und Funktionalität erforderlich oder praktisch ist.
Der Blockname wird sowohl als Ordnername eines Bausteins als auch als Dateiname für die CSS- und JavaScript-Dateien verwendet, die vom Blocklader geladen werden, wenn ein Baustein auf einer Seite verwendet wird. Der Blockname wird auch als CSS-Klassenname im Block verwendet, um eine intuitive Formatierung zu ermöglichen.
Das JavaScript wird als -Modul (ESM) geladen und exportiert eine Standardfunktion, die beim Laden der Blöcke ausgeführt wird.
Alle CSS auf Blockebene sollten auf den Block übertragen werden, um sicherzustellen, dass es keine Nebenwirkungen für andere Teile Ihres Projekts gibt. Das bedeutet, dass allen Selektoren in einem Block die entsprechende Blockklasse vorangestellt werden sollte. In bestimmten Fällen ist es sinnvoll, auch den Wrapper oder den enthaltenden Abschnitt des Blocks für den Selektor zu verwenden.
Es gibt ein Gleichgewicht zwischen DOM-Manipulation in JavaScript und der Komplexität der CSS-Selektoren. Komplexe brüchige CSS-Selektoren werden nicht empfohlen. Gleichzeitig wird der Code durch das Hinzufügen von Klassen zu jedem Element komplexer und die Semantik der Elemente wird ignoriert.
Einer der wichtigsten Grundsätze eines Projekts besteht darin, die Dinge für Autoren einfach und intuitiv zu halten. Komplizierte Bausteine erschweren die Erstellung von Inhalten. Daher ist es wichtig, dass Entwickler die Komplexität der Übersetzung eines intuitiven Authoring-Erlebnisses in das DOM absorbieren, das für das Layout oder die Anwendungslogik erforderlich ist. Es ist oft verlockend, dem Autor Komplexität zu übertragen. Stattdessen sollten Entwickler sicherstellen, dass Blöcke nicht für Autoren schwer zu erstellen sind. Ein Autor sollte immer in der Lage sein, einen Block einfach zu kopieren/einzufügen und intuitiv zu verstehen, worum es geht.
Ein einfaches Beispiel ist die Spaltenblock. Es fügt zusätzliche Klassen in JavaScript hinzu, basierend darauf, wie viele Spalten in der entsprechenden Instanz vom Autor erstellt wurden. Dadurch kann es eine flexible Formatierung von Inhalten verwenden, die in zwei Spalten oder drei Spalten enthalten sind.
Blöcke können sehr einfach sein oder vollständige Anwendungskomponenten oder Widgets enthalten und bieten dem Entwickler die Möglichkeit, ihre Codebasis in kleine Codeblöcke zu bündeln, die einfach verwaltet werden können und bei Bedarf auf die Webseiten geladen werden können.
Der Inhalt eines Bausteins wird als verschachtelt im Markup gerendert <div> Tags für die Zeilen und Spalten, die der Autor eingegeben hat. Im einfachsten Fall hat ein Block nur eine einzige Zelle.
<div class=”blockname”>
<div>
<div>
<p>Hello, World.</p>
</div>
</div>
</div>
Autoren können ihren Seiten auf Ad-hoc-Weise Bausteine hinzufügen, indem sie einfach eine Tabelle mit dem Blocknamen in der ersten Zeile oder Tabellenüberschrift hinzufügen. Einige Blöcke werden auch automatisch geladen. header und footer -Blöcke, die auf jeder Seite einer Site vorhanden sein müssen, sind ein gutes Beispiel dafür.
Blockoptionen
Wenn Sie einen Block benötigen, um ihn je nach bestimmten Umständen etwas anders aussehen oder sich etwas anders verhalten zu können, sich aber nicht so stark unterscheiden, dass er selbst ein neuer Block wird, können Sie Autoren das Hinzufügen von Blockoptionen in Klammern setzen. Diese Optionen fügen dem Block geänderte Klassen hinzu. Beispiel Columns (wide) in einer Tabellenüberschrift generiert das folgende Markup.
<div class=”columns wide”>
Blockoptionen können auch mehrere Wörter enthalten. Beispiel Columns (super wide) werden mit Bindestrichen verkettet.
<div class=”columns super-wide”>
Wenn Blockoptionen kommagetrennt sind, z. B. Columns (dark, wide), werden sie als separate Klassen hinzugefügt.
<div class=”columns dark wide”>
Automatisches Blockieren
In einem idealen Szenario wird der Großteil des Inhalts außerhalb von Blöcken verfasst, da es durch das Einfügen von Tabellen in ein Dokument schwieriger wird, zu lesen und zu bearbeiten. Umgekehrt bieten Blöcke einen großartigen Mechanismus für Entwickler, ihren Code organisiert zu halten.
Ein häufig verwendeter Mechanismus, um das Beste aus beiden Welten zu erhalten, wird als automatische Blockierung. Durch die automatische Blockierung werden Standardinhalte und Metadaten in Blöcke umgewandelt, ohne dass der Autor sie physisch erstellen muss. Die automatische Blockierung erfolgt sehr früh im Seitendekorationsprozess, bevor Blöcke geladen werden. Dies ist eine Vorgehensweise, bei der die DOM-Struktur eines Blocks programmgesteuert erstellt wird, da sie als Markup vom Server bereitgestellt würde.
Die automatische Blockierung wird häufig in Kombination mit Metadaten verwendet, insbesondere template -Eigenschaft. Wenn Seiten über eine gemeinsame Vorlage verfügen, d. h. wenn sie einen bestimmten Seitenentwurf oder eine bestimmte Funktionalität teilen, ist dies normalerweise eine gute Möglichkeit für die automatische Blockierung.
Ein gutes Beispiel ist ein Artikel-Header eines Blog-Posts. Es kann Informationen über den Autor, den Titel des Blog-Posts, ein Hero-Bild sowie das Veröffentlichungsdatum enthalten. Statt dass der Autor einen Baustein erstellt, der alle diese Informationen enthält, wird ein automatischer Block (z. B. Block "article-header") programmgesteuert zur Seite hinzugefügt, basierend auf dem <h1>, dem ersten Bild, dem Blogautor und den Metadaten für Veröffentlichungsdatum.
Auf diese Weise kann der Inhaltsautor die Informationen an seiner natürlichen Stelle und die Dokumentstruktur außerhalb eines Blocks speichern. Gleichzeitig kann der Entwickler alle Layout- und Stilinformationen in einem Block speichern.
Ein weiteres sehr häufiges Anwendungsbeispiel ist das Umbrechen von Bausteinen um Links in ein Dokument. Ein gutes Beispiel ist ein Autor, der mit einem YouTube-Video verknüpft ist, indem einfach ein Link eingefügt wird, während der Entwickler den gesamten Code für das Video in einer eingebetteten Datei beibehalten möchte embed blockieren.
Dieser Mechanismus kann auch als flexible Methode verwendet werden, um sowohl externe Anwendungen als auch interne Verweise auf Video, Inhaltsfragmente, Modelle, Formulare und andere Anwendungselemente einzuschließen.
Der Code für Ihre Projekte blockiert automatisch die Lebensdauer in buildAutoBlocks() in scripts.js.
Sehen Sie sich die folgenden Beispiele für die automatische Blockierung an.