Markup, Abschnitte, Blöcke und automatische Blockerstellung
Um Websites zu entwerfen und Funktionen zu erstellen, verwenden Entwickelnde Markup und DOM, die dynamisch aus dem Inhalt gerendert werden. Markup und DOM sind so konstruiert, dass sie eine flexible Bearbeitung und Stilanwendung ermöglichen. Gleichzeitig bieten sie vorkonfigurierte Funktionen, sodass Entwickelnde sich über einige Aspekte moderner Websites keine Gedanken machen müssen.
Dokumentstruktur
Der wichtigste Aspekt bei der Strukturierung eines Dokuments besteht darin, es für Autoren, die den Inhalt beitragen, einfach und intuitiv zu gestalten.
Dies bedeutet, dass es dringend empfohlen wird, Autoren sehr früh in den Prozess einzubeziehen. In vielen Fällen ist es empfehlenswert, Autorinnen und Autoren nur den Inhalt, der auf einer Seite angezeigt werden muss, in ein Google-Dokument oder Word-Dokument einfügen zu lassen, ohne dass sie eine Vorstellung von Blöcken und Abschnitten haben. Anschließend versuchen Sie, kleine strukturelle Änderungen vorzunehmen und Abschnitte und Blöcke nur dort einzuführen, wo dies erforderlich ist.
Ein Dokument folgt der folgenden abstrakten Struktur.
Eine Seite, die in Word oder einem Google-Dokument verfasst wurde, verwendet das wohlverstandene semantische Modell wie Überschriften, Textkörper, Listen, Bilder, Links usw. die von HTML, Markdown und Google Doc/Word gemeinsam genutzt wird. Wir nennen dies Standardinhalt. In einer idealen Situation würde man so viel des erstellten Inhalts wie möglich Standardinhalte belassen, da dies die natürliche Methode für Autoren ist, Dokumente zu behandeln.
Zusätzlich zum Standardinhalt verfügen wir über ein Konzept von (Abschnitten, die durch horizontale Regeln oder --- getrennt sind, um bestimmte Elemente einer Seite zu gruppieren. Es kann sowohl semantische als auch gestalterische 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 ein Konzept von Blöcken die als Tabelle mit einer Überschrift als erster Zeile erstellt werden, die den Blocktyp angibt. Dieses Konzept ist der einfachste Ansatz zur Komponenten-Erstellung Ihres Codes.
Abschnitte können mehrere Blöcke enthalten. Blöcke sollten nie verschachtelt werden, da dies die Verwendung für Autoren sehr schwierig macht.
DOM vs. Markup
AEM erzeugt aus den bereitgestellten Inhalten ein übersichtliches und leicht lesbares semantisches Markup. Sie können einfach mit der Funktion Quelle anzeigen darauf zugreifen und sich das Markup der Seite ansehen, die Sie gerade lesen.
Die in scripts.js verwendete JavaScript-Bibliothek wandelt das Markup in ein DOM um 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, mit dem einfach für benutzerdefinierten Projekt-Code gearbeitet werden kann, empfiehlt es sich, es als zweistufigen Prozess anzuzeigen.
Im ersten Schritt erstellen wir das Markup mit Abschnitten, Blöcken und Standardinhalten, die in etwa wie folgt aussehen.
Im zweiten Schritt wird das obige Markup um das folgende Beispiel-DOM erweitert, das dann zum Formatieren und 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.
Sie besteht hauptsächlich darin, eine Wrapper-<div> für -Blöcke und Standardinhalte einzuführen und dynamisch zusätzliche hilfreiche CSS-Klassen und Datenattribute hinzuzufügen, die vom AEM-Blocklader verwendet werden.
Abschnitte
Abschnitte sind eine Möglichkeit, Standardinhalte und -blöcke nach Autor zu gruppieren. In den meisten Fällen werden Abschnittsumbrüche aufgrund visueller Unterschiede zwischen Abschnitten eingeführt, z. B. eine andere Hintergrundfarbe für einen Teil einer Seite.
Aus Entwicklungsperspektive gibt es normalerweise nicht viel Interaktion mit Abschnitten jenseits des CSS-Stils.
Abschnitte können einen speziellen Block mit dem Namen Section Metadata enthalten, was zu Datenattributen für einen Abschnitt führt. Die Namen der Datenattribute können von den Autoren ausgewählt werden, und die einzige bekannte Metadateneigenschaft für Abschnitte ist Style, die in zusätzliche CSS-Klassen umgewandelt wird, die zum enthaltenden Abschnittselement hinzugefügt werden.
Blöcke und Standardinhalte werden immer in einen Abschnitt eingeschlossen, auch wenn der Autor keine spezifischen Abschnittsumbrüche einführt.
Standardinhalt
Es gibt eine breite Palette von Semantiken, die von Word-Dokumenten, Google Docs, Markdown und HTML gemeinsam verwendet werden. Beispielsweise 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, um diese Semantik in den Tools zu verwenden, mit denen sie vertraut sind (z. B. Word-/Google-Dokumente) und ordnet diese Markdown zu und rendert sie dann im HTML-Markup.
Alle Zuordnungen sollten für den Entwickler relativ einfach und intuitiv sein. Ein Bereich, in dem wir etwas weiter gehen als die einfachste Übersetzung, ist der Umgang mit Bildern. Anstelle eines einfachen <img>-Tags wird ein <picture>-Tag 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 WebP unterstützen, und ältere Browser, die dies nicht tun.
Bausteine
Die meisten projektspezifischen CSS- und JavaScript-Projekte befinden sich in Blöcken. Autorinnen und Autoren erstellen Blöcke in ihren Dokumenten, und Entwicklerinnen und Entwickler schreiben den entsprechenden Code, der die Blöcke mit CSS formatiert und/oder das DOM dekoriert, um das Markup eines Blocks zu nehmen und ihn 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 Blocks als auch als Dateiname für die CSS- und JavaScript-Dateien verwendet, die vom Blocklader geladen werden, wenn ein Block auf einer Seite verwendet wird. Der Blockname wird auch als CSS-Klassenname im Block verwendet, um eine intuitive Formatierung zu ermöglichen.
Der JavaScript wird als Modul (ESM) geladen und exportiert eine Standardfunktion, die im Rahmen des Blockladens ausgeführt wird.
Alle CSS-Blöcke sollten auf den Block angewendet werden, um sicherzustellen, dass es keine Nebenwirkungen für andere Teile des 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 spröde CSS-Selektoren werden nicht empfohlen. Gleichzeitig wird durch das Hinzufügen von Klassen zu jedem Element der Code komplexer und die Semantik von Elementen ignoriert.
Einer der wichtigsten Grundsätze eines Projekts ist es, die Dinge für Autoren einfach und intuitiv zu halten. Komplizierte Bausteine erschweren die Erstellung von Inhalten. Daher ist es wichtig, dass Entwicklerinnen und Entwickler die Komplexität der Übersetzung eines intuitiven Authoring-Erlebnisses in das DOM übernehmen, das für Layout- oder Anwendungslogik erforderlich ist. Es ist oft verlockend, Komplexität an den Autor zu delegieren. Stattdessen sollten Entwickler sicherstellen, dass das Erstellen von Blöcken für Autoren nicht zu umständlich wird. Autorinnen und Autoren sollten immer in der Lage sein, einen Block einfach zu kopieren und einzufügen und intuitiv zu verstehen, worum es geht.
Ein einfaches Beispiel ist der Spalten-Block. Je nachdem, wie viele Spalten in der jeweiligen vom Autor erstellten Instanz vorhanden sind, werden zusätzliche Klassen in JavaScript hinzugefügt. Dadurch kann er flexible Stile für Inhalte verwenden, die sich in zwei Spalten anstatt in drei Spalten befinden.
Blöcke können sehr einfach sein oder vollständige Anwendungskomponenten oder Widgets enthalten und dem Entwickler die Möglichkeit bieten, seine Codebasis in kleine Codeblöcke zu unterteilen, die einfach verwaltet werden können und bei Bedarf auf die Web-Seiten geladen werden können.
Der Inhalt eines Blocks wird für die vom Autor eingegebenen Zeilen und Spalten als verschachtelte <div>-Tags in das Markup gerendert. 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 Blöcke ad hoc zu ihren Seiten 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, die auf jeder Seite einer Site vorhanden sein müssen, sind ein gutes Beispiel dafür.
Blockoptionen
Wenn ein Block unter bestimmten Umständen etwas anders aussehen oder sich geringfügig anders verhalten soll, aber nicht unterschiedlich genug sein soll, um selbst zu einem neuen Block zu werden, können Sie den Blöcken Blockoptionen in Klammern hinzufügen. Mit diesen Optionen werden dem Block geänderte Klassen hinzugefügt. Beispielsweise generiert Columns (wide) in einer Tabellenkopfzeile das folgende Markup.
<div class=”columns wide”>
Blockoptionen können auch mehrere Wörter enthalten. Beispielsweise werden Columns (super wide) mit Bindestrichen verkettet.
<div class=”columns super-wide”>
Wenn Blockoptionen durch Kommas getrennt sind, z. B. Columns (dark, wide), werden sie als separate Klassen hinzugefügt.
<div class=”columns dark wide”>
Automatische Blockierung
Im Idealfall wird der Großteil des Inhalts außerhalb von Blöcken erstellt, da die Einführung von Tabellen in ein Dokument das Lesen und Bearbeiten erschwert. Umgekehrt bieten Blöcke einen großartigen Mechanismus für Entwickler, um ihren Code zu organisieren.
Ein häufig verwendeter Mechanismus, um das Beste aus beiden Welten zu erhalten, wird 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, und ist eine Praxis, die die DOM-Struktur eines Blocks programmgesteuert so erstellt, wie er als Markup vom Server kommen würde.
Die automatische Blockierung wird häufig in Kombination mit Metadaten verwendet, insbesondere in Verbindung mit der template. Wenn Seiten eine gemeinsame Vorlage haben, d. h. ein bestimmtes Seitendesign oder eine bestimmte Funktionalität gemeinsam haben, ist dies in der Regel eine gute Gelegenheit für das automatische Blockieren.
Ein gutes Beispiel ist die Artikelüberschrift eines Blogposts. Es kann Informationen über den Autor, den Titel des Blogposts, ein Hero-Bild sowie das Veröffentlichungsdatum enthalten. Anstatt den Autor einen Block zusammenstellen zu lassen, der all diese Informationen enthält, wird ein automatischer Block (z. B. Block mit der Artikelkopfzeile) programmgesteuert auf der Seite hinzugefügt, basierend auf dem <h1>, dem ersten Bild, dem Blog-Autor und den Metadaten zum Veröffentlichungsdatum.
Dadurch kann der Inhaltsautor die Informationen an ihrem natürlichen Ort, der Dokumentstruktur außerhalb eines Blocks, aufbewahren. Gleichzeitig kann der Entwickler alle Layout- und Styling-Informationen in einem Block speichern.
Ein weiteres gängiges Anwendungsbeispiel ist das Umbrechen von Blöcken um Links in einem Dokument. Ein gutes Beispiel ist ein Autor, der eine Verknüpfung zu einem YouTube-Video herstellt, indem er einfach einen Link hinzufügt. Der Entwickler möchte jedoch den gesamten Videocode inline in einen embed einbetten.
Dieser Mechanismus kann auch als flexible Möglichkeit verwendet werden, sowohl externe Anwendungen als auch interne Verweise auf Videos, Inhaltsfragmente, Modale, Formulare und andere Anwendungselemente einzuschließen.
Der Code für die automatische Blockierung Ihrer Projekte lebt in buildAutoBlocks() in Ihrem scripts.js.
Siehe die folgenden Beispiele für die automatische Blockierung.