Onepage-Demo
Long way to scroll
#
Modulbasierte Onepage-Website
Alles auf einer Seite
#
Das Prinzip einer Onepage-Website ist stets, dass der gesamte Content geparst und durchlaufen wird, um dann die Inhalte jeweils gesammelt in die Navigation und den Inhaltsbereich zu schreiben.
Löst man dies mit Modulen innerhalb eines Artikels, sind alle Sektionen schnell erreichbar, und es findet im Backend wie im Frontend alles auf einer Seite statt.
Der grundlegende Code dazu sieht so aus:
<?php
// Array für Anker initialisieren
rex::setProperty('anchors', new ArrayIterator());
// Der gesamte Seiten-Inhalt wird geparst und in eine Variable geschrieben.
// Ohne das Parsen würden die Anker-Module keine Inhalte zurückgeben
$content = $this->getArticle('1');
// Ein ANKER-MODUL erzeugt die Navigation und die Sprunganker.
// Der Ankername wird manuell eingetragen,
// könnte aber auch aus dem Navigationstitel generiert werden.
$items = array();
$items = ['anchor' => 'REX_VALUE[2]', 'title' => 'REX_VALUE[1]'];
rex::getProperty('anchors')->append($items);
// Im TEMPLATE wird aus dem durch das Modul
// erzeugten Array die Navigation zusammengesetzt.
$items = rex::getProperty('anchors')->getArrayCopy();
if (count($items) > 0) {
foreach ($items as $item) {
echo '<a href="" data-id="#'.$item['anchor'].'">'.$item['title'].'</a>';
}
}
// Jetzt nur noch den Content ausgeben
echo $content;
?>
Redaxo-Variablen
Mehr Komfort beim Ein- und Ausgabe-Code von Modulen
#
Nehmen wir das simple Beispiel einer Überschrift. Diese soll mit einem h1-Tag ausgezeichnet werden. Sofern sie leer gelassen wurde, soll auch kein h1-Tag ausgegeben werden. Dies kann man rasch mit PHP-Mitteln erledigen, aber noch einfacher geht es mit Redaxo-Variablen.
Nähere Infos zu den REDAXO-Variablen (und fast allen weiteren Themen) liefert die Doku
Das Code-Beispiel unten setzt die REX_VALUE1 in ein h1-Tag. Sofern kein Wert eingetragen wurde, erscheint ein entsprechender Hinweis für den Redakteur. Durch das Ausgabeformat html wird der Inhalt als HTML interpretiert und zurückgegeben. Wird der Parameter weggelassen, werden Steuerzeichen dagegen im Inhalt gefiltert. Mit dem Wert php wird der Inhalt als PHP interpretiert. Im Backend wird er als formatierter Quelltext zurückgegeben, im Frontend ausgeführt.
REX_VALUE[id='1' prefix='<h1>' suffix='</h1>' ifempty='<span class="error">Redakteur, bitte noch eine Überschrift eingeben!</span>' output='html']
Die Macht der Metafelder
Optionen
#
In der Demo finden sich einige Optionen, wie man die Optik der Website beeinflussen kann. Metafelder – seien es nun Artikel- oder Kategoriefelder – eignen sich hier perfekt zur Steuerung, da es ja ohnehin nur um eine Seite geht.
Preloader
#
Wer's mag
Ein Preloader kann über ein Kategorie-Metafeld hinzugeschaltet werden. Dadurch legt sich ein Layer über die die Seite, der erst ausgeblendet wird, wenn alle Inhalte geladen wurden.
Die Farbe des Preloaders wechselt passend zur gewählten Hauptfarbe.
Social Icons
#
Sprach-Metafelder?
Es sind Social Links zu Facebook und Twitter vorgesehen, weitere können leicht ergänzt werden. Diese werden an verschiedenen Stellen der Demo angezeigt, zum Beispiel zu Beginn der Off-Canvas-Navigation oder im großen Footer.
Gepflegt werden die Links bei Sprach-Metafeldern – ein sinnvoller Ort für Daten, die für die ganze Website zur Verfügung stehen sollen … erst recht, wenn diese Daten für sprachabhängig unterschiedlich sein sollen.
Navigationsstile
#
Standard und Off-Canvas
Neben der häufig genutzten horizontalen Navigation kann man alternativ eine Off-Canvas-Navigation wählen. Hier schiebt sich dann bei Klick auf das Hamburger Icon eine vertikale Navigationsleiste in die Seite.
Diese Auswahl kann für jede Seite individuell getroffen werden – natürlich auch unabhängig davon, ob man eine Onepage- oder Multipage-Website aufbauen möchte.
Footer
#
Groß und klein
Soll der Footer nur eine Zeile hoch sein oder Links in mehreren Spalten anbieten?
Beide Varianten sind jeweils als Modul vorhanden – während es bei einer normalen Website mühsam wäre, den Footer manuell auf jede Seite zu setzen, ist das bei einem Onepager gerade praktisch.
Beide Footer-Varianten haben Felder für normale Links und Akkordeon-Links, um z.B. Impressum oder Datenschutz einzublenden. Außerdem ist es möglich, in der Copyright-Zeile automatisch das aktuelle Jahresdatum anzeigen zu lassen.
Mblock
#
DIE Lösung für Submodule
Mblock ist ein unglaublich praktisches AddOn, um häufig innerhalb eines Moduls wiederkehrende Daten zu verwalten. Tabs. Akkordeons, Timelines oder Slider sind nur einige Beispiele die sich mit Mblock hervorragend realisieren lassen.
In diesen “Submodul”-Blöcken kann man alle Feldtypen verwenden, die auch in einem Modul zur Verfügung stehen. Technisch gesehen, werden alle Feldinhalte als Array in ein Datenbankfeld geschrieben.
Die Projekte und Kundenstimmen sind zwei Module dieser Demo, die die Möglichkeiten von Mblock nutzen.
Treenzeichen
#
Die Liebe zum Detail
In allen Modulen kann der Haupttitel mit einem Trennstrich ergänzt werden. Dieser Trennstrich wird unterbrochen durch ein Zeichen, das so als wiederkehrendes Ornament immer wieder auf einer Seite auftaucht – siehe z.B. in der Überschrift oben.
Da man Unicode-Zeichen verwenden kann, steht eine große Palette an Zeichen bereit.
Den Überblick verloren?
Hilfe in der Community
Die Community ist eine der Stärken von REDAXO. Du kannst frei von Konkurrenzangst Fragen stellen und musst keine Angst haben, Dich zu blamieren. Erster Anlaufpunkt für Probleme wird in den meisten Fällen das Forum sein.
With a little help from my friends
REDAXO-Community
Besuche die REDAXO-Website und insbesondere die Dokumentation. Komm in den REDAXO-Slack-Channel und tausche Dich mit anderen Entwicklern aus. Schließe Dich den FRIENDS OF REDAXO an und entwickle AddOns gemeinsam.
Die Demo in Zahlen
Fakten, Fakten, Fakten
#
3
Templates
Modul - oder Artikelbasiert
12
Module
Teils mit vielen Optionen
3852
Zeilen Code
Keine Ahnung, ob das stimmt ;-)
Pst ...
Ein kleines Gimmick
#
Eigentlich gibt es vier Templates, denn zu den drei verschiednen Ansätzen einer Onepage-Website (mit Modulen, Artikel oder Kategorien) gesellt sich – dank minimaler Erweiterungen – ein klassisches Template für mehrere Seiten, realisiert durch Kategorien.
So kann man sich entspannt zurücklehnen, wenn der Kunde seine Onpage-Website in eine mit mehreren Seiten ändern will.
Credits und so ...
Impressum
#
Hier könnte dann das Impressum stehen. Passend für einen Onepager gibt es keine eigene Seite, sondern das Impressum blendet sich am unteren Seitenende ein. Gepflegt werden diese “Footer-Einblend-Segemente” als Artikel im Root-Verzeichnis, so dass hierfür alle Module verwendet werden können.
Demo: Peter Bickel, Polarpixel
Fotos: Unsplash
Video: Bjørn Klauer, Svalbard Expedition