Templates nutzen

In REDAXO sind selbstverständlich die Inhalte konsequent vom Layout getrennt. Dieses Tutorial nutzt die Standard-REDAXO-Demo dazu, das Templatesystem zu beleuchten und das vorgegebene Demo-Layout zu erweitern.

Ziel des Tutorials

Um das Templatesystem besser zu verstehen, sollte man das Template der REDAXO-Demo analysieren und dann schrittweise modifizieren. Als Übung soll das Default-Template in drei Teile aufgeteilt werden (Header, Content und Footer). Danach wird ein neues Template angelegt, das diese drei Templateteile inkludiert. Das neue Template soll ein Zweispalten-Template werden, wobei man statt Spalten natürlich ebenso andere Contentbereiche wie Header, Footer, etc. steuern könnte. In REDAXO verwendet man Ctypes zur Verwaltung dieser Contentbereiche.

Voraussetzung

Es muss ein funktionsfähiger Server zur Verfügung stehen, auf dem REDAXO fehlerfrei installiert und die Standard-Demo importiert wurde.

Erste Schritte

Nach dem Import der Demo sollte man sich zunächst die Templates anschauen – dieses Tutorial betrachtet vor allem das Template “default”. In der Basis Navigation findet sich an dritter Stelle der Punkt “Templates”. Dort existieren drei vorinstallierte Templates:

id=1 default aktiv – ja id=2 Navigation: Breadcrumb aktiv – nein id=3 Navigation: Links aktiv – nein

Default Template

Im Template sind alle wesentlichen HTML-Tags enthalten, begonnen vom der Doctype-Deklaration über die Meta-Daten bis zum schließenden body-Tag. Zu Beginn fällt vor allem der eingebettete PHP-Code auf, der verschiedene Zwecke erfüllt.


// ------ DESCRIPTION/KEYWORDS
$OOStartArticle = OOArticle::getArticleById($REX['START_ARTICLE_ID'], $REX['CUR_CLANG']);
$meta_beschreibung = $OOStartArticle->getValue("art_description");
$meta_suchbegriffe = $OOStartArticle->getValue("art_keywords");

if($this->getValue("art_description") != "")
$meta_beschreibung = $this->getValue("art_description");

if($this->getValue("art_keywords") != "")
$meta_suchbegriffe = $this->getValue("art_keywords");

?>

OOArticle::getArticleById($REX['START_ARTICLE_ID'], $REX['CUR_CLANG']); steuert über das Objektorientierte Framework den Startartikel an – das Ziel ist, Metadaten wie “description” und “keywords” in den entsprechenden HTML-Metatags auszugeben.

Die nachfolgenden if-Anweisungen überschreiben die jeweilige Variable mit den Daten des aktuellen Artikels – sofern diese eingegeben wurden.

Im Header wird außerdem der Artikelname der jeweiligen Seite im -Tag ausgegeben:</p> <div class="app-window"> <div class="app-window-top-bar"><div class="app-window-actions"><span class="app-window-action-close"></span><span class="app-window-action-minify"></span><span class="app-window-action-fullscreen"></span></div></div> <div class="app-window-content"><pre class="line-numbers"><code class="language-php"></code></pre></div> </div> <p><code>$REX['SERVERNAME']</code> gibt den bei der Installation festgelegten Website-Namen aus, und <code>$this->getValue("name");</code>liest den Artikelnamen des jeweiligen Artikel aus. Der Titel der Startseite könnte dann etwa wie folgt aussehen: “REDAXO | Startseite”</p> <p>Man kann im Folgenden sehen, wie die oben definierten Variablen für description und keywords im HTML-Code eingesetzt werden.</p> <div class="app-window"> <div class="app-window-top-bar"><div class="app-window-actions"><span class="app-window-action-close"></span><span class="app-window-action-minify"></span><span class="app-window-action-fullscreen"></span></div></div> <div class="app-window-content"><pre class="line-numbers"><code class="language-php"><meta name="description" content="<?php print htmlspecialchars($meta_beschreibung); ?>" /></code></pre></div> </div> <p>Beim weiteren Studium des Templates fallen einige interessante Zeilen auf – im DIV “Content” wird zunächst die Brotkrümelnavigation, dann die Hauptnavigation und die schließlich Artikelausgabe eingebunden.</p> <div class="app-window"> <div class="app-window-top-bar"><div class="app-window-actions"><span class="app-window-action-close"></span><span class="app-window-action-minify"></span><span class="app-window-action-fullscreen"></span></div></div> <div class="app-window-content"><pre class="line-numbers"><code class="language-php"> <div id="main-content"> <div id="nav"> REX_TEMPLATE[2] <p class="copy">&copy; by <a href="http://www.redaxo.de">REDAXO</a></p> </div> <div id="main"> <div id="main-block"> <div id="main-teaser"> Slogan: Einfach, flexibel, sinnvoll </div> <div id="main-content-block"> REX_TEMPLATE[3] REX_ARTICLE[] </div> </div> </div> <br class="clear" /> </div> </div></code></pre></div> </div> <p>Ähnlich wie Redaxo-Module bestimmte REX_VALUE[] ausgeben können ist es auch möglich, in Redaxo-Templates weitere Templates zu inkludieren. Im Beispiel-Code gibt REX_TEMPLATE[2] das Template mit der ID = 2 “Navigation: Breadcrumb” aus, REX_TEMPLATE[3] entsprechend das Template mit der ID = 3 “Navigation: Links” und REX_ARTICLE[] alle Blöcke aller Ctypes (Spalten) des Artikels.</p> <h2>Auslagern von Header und Footer als wiederkehrende Elemente</h2> <p>Als nächsten Schritt könnte man ein neues Template anlegen mit dem Namen “header”. Damit dieses Template in der Template-Auswahl eines Artikels nicht erscheint (was sinnlos wäre, da es ja nur ein Subtemplate ist), darf man das Häkchen bei “Aktiv” nicht setzen. Den Quelltext vom Anfang bis zur Zeile <div id="main"> schneidet man nun aus und setzt ihn in das Header-Tempalte ein (Speichern nicht vergessen).</p> <p>Nun muss man im Default-Template den ausgeschnittenen Code einfach durch REX_TEMPLATE[4] ersetzen: REDAXO gibt dann an dieser Stelle den Header aus. Wichtig: darauf achten, dass die Template-ID mit der Zahl in den Klammern übereinstimmt.</p> <div class="app-window"> <div class="app-window-top-bar"><div class="app-window-actions"><span class="app-window-action-close"></span><span class="app-window-action-minify"></span><span class="app-window-action-fullscreen"></span></div></div> <div class="app-window-content"><img src="/doku/4.6/assets/4-x-tutorial-templates-01.png" alt="Auslagern von Header und Footer" class="img-responsive img-zoom" data-magnify-src="/doku/4.6/assets/4-x-tutorial-templates-01.png" /></div> </div> <p>Nachdem der Header ausgelagert ist, könnte man nochmals ein neues Template mit dem Namen “footer” anlegen. Auch dieses Template sollte man nicht “aktiv” setzen, damit es in der Template-Auswahl beim Anlegen eines Artikels nicht erscheint. Den Quelltext nach der Zeile <br class="clear" /> bis zum Ende verschiebt man ins Footer-Template. Ähnlich wie auch beim Header wird dann das neue Template mit REX_TEMPLATE[5] inkludiert.</p> <h2>Zweispalter Template</h2> <p>Wie in der Zielsetzung beschrieben legt man nun das zusätzliche Zweispalter-Template an. Es soll über zwei Spalten verfügen und ebenso wie das Default-Template mit Header und Footer ausgerüstet werden. Dazu muss man nochmals ein neues Template einfügen mit dem Namen “Zweispalter”. Dieses Template muss “Aktiv” sein, damit Redakteure es nutzen können.</p> <p>Natürlich muss man auch die Content-Spalten (ctypes) anlegen, indem man der ersten Ctype-Spalte einen Namen gibt – zum Beispiel “Hauptspalte” – und das Template abspeichert. Danach existiert ein weiteres Feld, in dem man den Namen für die zweite Spalte eingeben kann – zum Beispiel “Seitenleiste”.</p> <p>Es bleibt nur noch, die Spalten im Template anzusprechen und deren Inhalt auszugeben. Dies gelingt mit <code>REX_ARTICLE[ctype=1]</code> für den Haupt-Spalte und <code>REX_ARTICLE[ctype=2]</code> für die Seitenleiste. Das Zweispalter-Template sieht nun so aus:</p> <div class="app-window"> <div class="app-window-top-bar"><div class="app-window-actions"><span class="app-window-action-close"></span><span class="app-window-action-minify"></span><span class="app-window-action-fullscreen"></span></div></div> <div class="app-window-content"><img src="/doku/4.6/assets/4-x-tutorial-templates-01.png" alt="Zweispalter" class="img-responsive img-zoom" data-magnify-src="/doku/4.6/assets/4-x-tutorial-templates-01.png" /></div> </div> <hr /><a class="pull-right btn btn-default btn-xs" href="https://github.com/redaxo/docs/edit/4.6/tutorial-templates.md" target="_blank"><i class="icon-left fa fa-github"></i>Artikel bearbeiten</a> </article> </main> </div> </div> <footer class="global-footer"> <div class="outer-container"> <div class="global-footer-content"> <p class="copyright">© 2003-2024 by REDAXO CMS . <a href="https://www.yakamara.de">Yakamara Media GmbH & Co. KG.</a> . c/o Massif Central . Bethmannstraße 7-9 . 60311 Frankfurt</p> <nav class="nav-footer"><a href="/cms/impressum/">Impressum</a><a href="/cms/datenschutz/">Datenschutz</a></nav> </div> </div> </footer> </div> <nav class="nav-burger"> <input class="burger-state" id="burger-state" type="checkbox" /> <label class="burger-icon" for="burger-state"> <span class="burger-icon-top"></span> <span class="burger-icon-bottom"></span> </label> <label class="burger-overlay" for="burger-state"></label> <div class="burger-container"> <ul class="burger-list"> <li><a href="/cms/ueberblick/" title="CMS">CMS</a><ul><li><a href="/cms/ueberblick/" title="Überblick">Überblick</a></li><li><a href="/cms/news/" title="News">News</a></li><li><a href="/cms/lieblinge/" title="Lieblinge">Lieblinge</a></li><li><a href="/cms/team/" title="Team">Team</a></li><li><a href="/cms/lizenz/" title="Lizenz">Lizenz</a></li></ul></li><li><a href="/support/community/" title="Support">Support</a><ul><li><a href="/support/community/" title="Community">Community</a></li><li><a href="/support/agenturen/" title="Agenturen">Agenturen</a></li><li><a href="/support/slack/" title="Slack">Slack</a></li><li><a href="/support/discussions/" title="Discussions">Discussions</a></li><li><a href="/support/haeufige-fragen/" title="Häufige Fragen">Häufige Fragen</a></li><li><a href="/support/weitere-ressourcen/" title="Weitere Ressourcen">Weitere Ressourcen</a></li></ul></li><li><a href="/doku/" class="active" title="Doku">Doku</a></li><li><a href="/download/core/" title="Download">Download</a><ul><li><a href="/download/core/" title="Core">Core</a></li><li><a href="/download/addons/tags/" title="AddOns">AddOns</a></li><li><a href="/download/website-demos/" title="Website-Demos">Website-Demos</a></li></ul></li><li><a href="/slack-chat" title="Slack">Slack</a></li><li><a href="/myredaxo/login/" title="MyREDAXO">MyREDAXO</a><ul><li><a href="/myredaxo/login/" title="Login">Login</a></li><li><a href="/registrierung/" title="Registrierung">Registrierung</a></li><li><a href="/myredaxo/passwort-zuruecksetzen/" title="Passwort zurücksetzen">Passwort zurücksetzen</a></li><li><a href="/de/nutzungsbedingungen/" title="Nutzungsbedingungen">Nutzungsbedingungen</a></li></ul></li> </ul> <h3>Doku</h3><ul> <li> <p>Erste Schritte</p> <ul> <li><a href="/doku/4.6/ueber-redaxo">Über Redaxo</a></li> <li><a href="/doku/4.6/einstieg">Einstieg in Redaxo</a></li> <li><a href="/doku/4.6/sicherheitshinweise">Sicherheitshinweise</a></li> <li><a href="/doku/4.6/updatehinweise">Updatehinweise</a></li> <li><a href="/doku/4.6/demo">Die Redaxo-Demo</a></li> <li><a href="/doku/4.6/zusammenarbeit">Zusammenarbeit</a></li> </ul> </li> <li> <p>Setup</p> <ul> <li><a href="/doku/4.6/installation">Installation - Systemanforderungen, Download, Upload, Installation</a></li> <li><a href="/doku/4.6/login">Login</a></li> <li><a href="/doku/4.6/passwort-vergessen">Passwort vergessen</a></li> </ul> </li> <li> <p>Redaktion</p> <ul> <li><a href="/doku/4.6/redaktion-vorwort">Vorwort</a></li> <li><a href="/doku/4.6/strukturverwaltung">Strukturverwaltung</a> </li> <li><a href="/doku/4.6/inhaltsverwaltung">Inhaltsverwaltung</a></li> <li><a href="/doku/4.6/medienpool">Medienpool</a></li> </ul> </li> <li> <p>Entwickler & Admin</p> <ul> <li><a href="/doku/4.6/templates">Templates</a></li> <li><a href="/doku/4.6/module-aktionen">Module / Aktionen</a></li> <li><a href="/doku/4.6/benutzerverwaltung">Benutzerverwaltung</a></li> <li><a href="/doku/4.6/addons">AddOns</a></li> <li><a href="/doku/4.6/system">System</a></li> </ul> </li> <li> <p>Tutorials</p> <ul> <li><a href="/doku/4.6/tutorial-installation">Installation</a></li> <li><a href="/doku/4.6/tutorial-templates" class="active">Templates nutzen</a></li> <li><a href="/doku/4.6/tutorial-navigation">Erstellen einer Navigation</a></li> <li><a href="/doku/4.6/tutorial-modulausgaben">Modulausgaben erweitern</a> </li> <li><a href="/doku/4.6/tutorial-medienkategorie-vorselektieren">Medienkategorie vorselektieren</a></li> <li><a href="/doku/4.6/tutorial-aktionen">Aktionen - Moduleingaben überprüfen</a> </li> <li><a href="/doku/4.6/tutorial-rexsql">Datenbankzugriff - rex_sql Klasse</a></li> <li><a href="/doku/4.6/convert-iso-utf8">ISO zu UTF-8 umwandeln</a></li> <li><a href="/doku/4.6/tutorial-meta">Kategorieeigenschaften - Metainfo-Addon</a></li> </ul> </li> </ul> </div> </nav> <div style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="myredaxo-logo" viewBox="0 0 509.299 77.353"><path fill="#3D434E" d="M482.104 0c17.45 0 29.416 13.176 26.848 38.765-2.552 25.434-11.909 38.578-30.466 38.542l-15.422.047c-21.74-.064-30.664-16.996-28.305-40.51C436.992 14.572 447.997.011 464.523.011L482.104 0zm-.446 19.586-15.735.009c-6.519 0-10.344 5.909-11.752 19.54-1.569 15.176 2.85 18.776 9.409 18.631 0 0 12.034-.047 13.682-.047 7.081 0 10.621-3.845 12.146-18.533 1.481-15.277-.635-19.6-7.75-19.6"/><path fill="#3D434E" d="m391.438.531 14.183 23.392L420.616.531h24.255l-27.466 41.427 23.819 34.773H418.41l-11.531-18.139-12.074 18.139h-25.112l24.861-36.448L369.727.531z"/><path fill="#3D434E" d="M350.114 52.664h-32.456l-2.439 24.196h-19.477l4.817-47.804C302.553 11.513 312.645.35 329.533.35h15.019c17.255.058 29.14 12.2 27.277 30.683L367.1 76.86h-19.482l2.496-24.196zm-30.722-17.199h32.497l.659-6.387c.722-6.08-1.565-9.444-8.013-9.468h-14.951c-6.049.204-8.875 2.85-9.742 11.39l-.45 4.465z"/><path fill="#559ACD" d="M268.337.35c40.221 0 33.685 76.446-4.001 76.446l-40.556.001L231.497.35h36.84zm-.772 19.369h-18.554l-3.8 37.698h18.704c6.029 0 11.167-6.526 12.501-20.568.969-10.204-3.166-17.13-8.851-17.13M225.08 19.64l-36.62-.007c-4.733 0-8.07 2.678-9.695 9.58h38.773l-1.734 17.198h-38.888c.302 7.947 2.9 10.553 9.557 10.58 5.591.022 23.705.289 34.805.345l-1.993 19.462h-33.421c-19.704 0-30.603-15.364-28.096-39.865C160.415 11.063 170.775.342 188.437.342l38.572.008-1.929 19.29zM140.18 50.754l11.55 26.043h-21.2l-10.255-23.125h-18.773L99.17 76.797H79.693L87.387.355l40.234-.017c18.08 0 28.767 14.029 27.661 26.593-.873 9.902-4.504 18.039-15.102 23.823m-36.725-16.461h22.694c5.716 0 9.697-2.852 9.697-7.567 0-3.574-2.759-6.984-7.741-6.984-3.858 0-14.714-.058-23.173-.102l-1.477 14.653z"/><path fill="#3D434E" d="m8.154 76.385 2.118-23.602 6.417.024-2.118 23.555 7.498-.024 2.139-23.461 3.982-.022c1.708-.063 2.351 1.14 1.927 3.608l-1.779 19.899h7.519l2.033-22.478c.325-7.125-2.449-10.594-8.323-10.405l-26.581-.07L0 76.385h8.154zM62.818 43.479l-1.165 12.07H50.767c-1.469-.171-2.104-1.195-1.907-3.07l.721-9-7.879.023-1.017 10.946c-.311 7.14 2.436 10.633 8.239 10.476h11.67l.021.188c-.169 1.905-1.143 2.858-2.923 2.858l-17.854-.022-.699 8.789 22.895-.048c4.067-.594 6.262-2.827 6.587-6.702l2.394-26.509h-8.197z"/></symbol><symbol id="rao" viewBox="0 0 84 29"><path style="fill:#2a3542" d="M17.5.4H2.7L-.1 28.5H7l.9-8.5h6.9l3.8 8.5h7.8L22.1 19c3.9-2.1 5.2-5.1 5.6-8.8.4-4.6-3.5-9.8-10.2-9.8zM17 12.9H8.6l.5-5.4h8.5c1.8 0 2.9 1.3 2.9 2.6 0 1.8-1.4 2.8-3.5 2.8zM45.2.4h-5.5C33.5.4 29.7 4.5 29 11l-1.8 17.6h7.2l.9-8.9h11.9l-.9 8.9h7.2l1.7-16.9C55.9 4.9 51.6.4 45.2.4zm3 10.6-.2 2.4H36l.2-1.6c.3-3.1 1.4-4.1 3.6-4.2h5.5c2.3-.1 3.1 1.2 2.9 3.4zM73.7.3h-6.5c-6.1 0-10.1 5.4-11 13.6-.9 8.7 2.4 14.9 10.4 14.9h5.7c6.8 0 10.3-4.8 11.2-14.2C84.5 5.1 80.1.3 73.7.3zm2.7 14.4c-.6 5.4-1.9 6.8-4.5 6.8h-5c-2.4.1-4-1.3-3.5-6.9.5-5 1.9-7.2 4.3-7.2h5.8c2.6.1 3.4 1.7 2.9 7.3z"/></symbol><symbol id="redaxo-logo" viewBox="202.64 375.948 190 29"><path fill="#FFF" d="m220.283 376.362-14.812.006-2.832 28.14h7.17l.858-8.513h6.91l3.775 8.513h7.804l-4.252-9.587c3.902-2.129 5.238-5.124 5.56-8.77.409-4.625-3.525-9.789-10.181-9.789zm-.542 12.499h-8.354l.544-5.394c3.114.016 7.11.038 8.53.038 1.833 0 2.85 1.255 2.85 2.571 0 1.736-1.466 2.785-3.57 2.785zM238.429 393.322h14.316l.638-6.33H239.11c.598-2.541 1.827-3.527 3.569-3.527l13.481.002.71-7.101-14.199-.003c-6.501 0-10.315 3.946-11.29 13.47-.923 9.02 3.089 14.675 10.343 14.675h12.303l.733-7.164c-4.086-.021-10.754-.119-12.812-.128-2.451-.008-3.407-.968-3.519-3.894zM272.084 376.366h-13.562l-2.841 28.142 14.93-.001c13.873 0 16.278-28.141 1.473-28.141zm2.974 13.435c-.491 5.17-2.383 7.572-4.602 7.572h-6.885l1.399-13.877h6.83c2.092 0 3.614 2.55 3.258 6.305z"/><path fill="#2A3542" d="M300.14 376.366h-5.529c-6.216 0-9.932 4.109-10.666 10.567l-1.773 17.598h7.17l.897-8.907h11.947l-.919 8.907h7.172l1.74-16.87c.688-6.804-3.688-11.274-10.039-11.295zm2.943 10.575-.242 2.351h-11.963l.166-1.644c.319-3.144 1.359-4.117 3.586-4.192h5.503c2.374.009 3.216 1.247 2.95 3.485z"/><path fill="#2A3542" d="m317.4 376.433 5.222 8.611 5.52-8.611h8.929l-10.11 15.25 8.768 12.801h-8.397l-4.245-6.678-4.444 6.678h-9.245l9.151-13.417-9.139-14.634h7.99z"/><path fill="#2A3542" d="m350.776 376.237-6.472.003c-6.083 0-10.135 5.361-10.957 13.559-.868 8.657 2.417 14.89 10.42 14.913l5.678-.017c6.83.013 10.275-4.826 11.215-14.188.945-9.419-3.461-14.27-9.884-14.27zm2.689 14.426c-.562 5.407-1.865 6.823-4.471 6.823-.606 0-5.037.017-5.037.017-2.415.053-4.041-1.272-3.464-6.859.519-5.018 1.927-7.192 4.326-7.192l5.792-.003c2.62-.001 3.399 1.59 2.854 7.214z"/><path fill="#FFF" d="M370.768 397.044h-3.95c-.948 0-1.504.337-1.766 2.58-.23 1.99.404 2.5 1.353 2.5.74 0 2.439.015 3.851.007l-.264 2.609c-1.438.007-3.057-.009-3.765-.009-2.719 0-4.049-2.074-3.769-5.369.26-3.047 1.598-4.926 4.118-4.926h4.456l-.264 2.608zm21.406-.04-4.273.001c-1.096 0-1.039 1.313-.165 1.313l1.805.003c4.334 0 4.034 6.387-.342 6.387l-5.157-.008.264-2.608 4.987.008c1.005 0 .994-1.398.156-1.398l-1.713-.001c-4.362 0-4.14-6.302.334-6.302l4.367-.002-.263 2.607zm-13.135.037-.776 7.705h-2.622l.777-7.705-1.828-.017-.719 7.722h-2.619l.964-10.364 7.591.052c2.322.008 3.921 1.658 3.67 4.145l-.636 6.167h-2.622l.664-6.431c.094-.933-.279-1.27-1.078-1.274h-.766z"/><path fill="#2A3542" d="M368.855 376.15a5.295 5.295 0 0 1 5.292 5.306 5.293 5.293 0 0 1-10.584 0 5.297 5.297 0 0 1 5.292-5.306zm-2.792 8.169a3.918 3.918 0 0 0 5.599 0 4.08 4.08 0 0 0 0-5.74 3.917 3.917 0 0 0-5.599 0 4.062 4.062 0 0 0 0 5.74zm3.727-2.395 1.464 2.676h-1.8l-1.135-2.246-.274 2.246h-1.533l.788-6.397h1.923c1.574 0 2.399.935 1.938 2.395-.205.681-.687 1.127-1.371 1.326zm-1.084-.962c.539 0 .831-.221.944-.583.189-.534-.035-.864-.659-.864h-.321l-.177 1.447h.213z"/></symbol></svg></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script type="text/javascript"> docsearch({ apiKey: 'e3d6b1bd5a1798905b684a560937e94b', indexName: 'redaxo_cms', inputSelector: '.search-docs', debug: false // Set debug to true if you want to inspect the dropdown }); </script> <script src="/assets/scripts/script.js?v=1712484603"></script> </body> </html>