Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | fluid_templates [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== Fluid Templates ====== | ||
+ | '' | ||
+ | |||
+ | ===== Beispiel für ein Basis Fluid Template ===== | ||
+ | |||
+ | Im Prinzip reicht ein '' | ||
+ | * Header | ||
+ | * Main | ||
+ | * Footer | ||
+ | besteht. | ||
+ | |||
+ | <header id=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | [...Hier der Header...] | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | <main id=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | [...Hier der Inhalt...] | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | <footer id=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | [...Hier der Footer...] | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Die Inhalte der drei Bereiche sind mit einer ID versehen, damit sie per CSS [[css_beispiele|bearbeitet werden können]]. | ||
+ | |||
+ | ===== Fluid Template mit Section ===== | ||
+ | |||
+ | In den meisten Fällen wird man den gesamten Inhalt der Webseite nicht über ein einziges Basis Template darstellen, sondern dieses in einzelne Teilbereiche gliedern. Der Inhaltsbereich wird in einer '' | ||
+ | |||
+ | < | ||
+ | <main id=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | [...Hier der Inhalt 1...] | ||
+ | </ | ||
+ | </ | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | [...Hier der Inhalt 2...] | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | ===== IBK Blog ===== | ||
+ | |||
+ | Der Blog der Internetagentur Irma Berscheid-Kimeridze. | ||
+ | Dies ist das **Template** für die '' | ||
+ | Die Darstellung entspricht im Layout nicht der genauen Source des Templates, die Einbindung eines zweispaltigen Layouts mit Bootstrap Styles wurde der Übersichtlichkeit halber weggelassen. | ||
+ | Bei vielen Einbindungen von Partials wurden übergebene Werte weggelassen, | ||
+ | |||
+ | ==== Einbindung des Layouts ==== | ||
+ | |||
+ | |||
+ | < | ||
+ | |||
+ | ==== Beginn des Bereichs Main zur Darstellung ==== | ||
+ | |||
+ | < | ||
+ | |||
+ | ==== Erste Spalte mit Darstellung der Liste ==== | ||
+ | |||
+ | **Wichtige Elemente hier:** | ||
+ | * Einbindung von Partials ([[fluid_partials|BlogList]]) | ||
+ | * Übergabe von Objekten mit Daten | ||
+ | * Abfrage von Conditions mit if / else Beziehung | ||
+ | |||
+ | ## Liste aller Beiträge im Blog | ||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | | ||
+ | ## Links im Button Layout zur Weiterschaltung | ||
+ | <div class=" | ||
+ | <f:if condition=" | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | </ | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | </ | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== Zweite Spalte mit Tags und Informationen ==== | ||
+ | |||
+ | **Wichtige Elemente hier:** | ||
+ | * Conditions mit Vergleichsparametern | ||
+ | * for / each Schleife | ||
+ | * Generierung von Links mit Übergabe von Parametern | ||
+ | |||
+ | <div class=" | ||
+ | | ||
+ | ## Wolke mit Suchbegriffen unterschiedlicher Gewichtung | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | <f:for each=" | ||
+ | < | ||
+ | {tag.name} | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | ## Verfügbare Kategorien | ||
+ | <f:if condition=" | ||
+ | <f:for each=" | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | < | ||
+ | {kategoriehead.name} ({kategoriehead.counter}) | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | {kategoriehead.name} ({kategoriehead.counter}) | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | ## Verfügbare Tags | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | <f:for each=" | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | < | ||
+ | {tag.name} ({tag.counter}) | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | {tag.name} ({tag.counter}) | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | </ | ||
+ | ==== Ende des Bereichs Main zur Darstellung ==== | ||
+ | |||
+ | </ | ||
+ | | ||
+ | |||
+ |