Hallo, Besucher der Thread wurde 495 aufgerufen und enthält 0 Antworten

letzter Beitrag von Belarus am

[FAQ / Tutorial] Templates

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,


    viele kennen das Problem, dass es mit einfachen HTML nicht möglich ist z.B. die letzten Forenbeiträge, die letzten Artikel, etc. auszulesen und damit an sein Ziel zu kommen. In diesem Fall kommen Templates bzw. die Abfrage(n) per Template ins Spiel. Doch wie funktioniert das mit Templates? Wie und wo werden Templates eingefügt? Diese und weitere Fragen zu Templates möchte ich hier in diesem Tutorial einmal genauer erklären und zudem auch anhand einiger Beispiele erklären wie mit Templates gearbeitet wird.

    Warnung!

    Bei Unachtsamkeit, falscher Anwendung und gar kleinsten Flüchtigkeitsfehlern, können Eingriffe in Templates zu einen Fatal Error führen und damit eure Seite außer Gefecht setzen! Es wird entsprechend dringend geraten vor jedem Eingriff ein Backup zu machen! Sollten für das arbeiten mit Templates keine Grundkenntnisse vorhanden sein, so wird vor dem (be)arbeiten mit Templates ausdrücklich abgeraten und empfohlen einen Entwickler Deines Vertrauens aufzusuchen oder es in einen der vielen Marktplätze als Auftragsarbeit in Auftrag zu geben.

    Box oder Template?

    Die Woltlab Suite bietet bereits Standardgemäß die Option diverse Inhalte in Boxen oder Seiten darzustellen. Die Boxen können bekanntermaßen, genauso wie auch die Seiten, mit dem WYSIWYG-Editor, per HTML-Code oder auch per Template-Scripting erstellt werden. Die erstellten Boxen können zudem individuell auf diversen Seiten an verschiedenen Stellen eingebunden werden. Doch nicht immer lässt sich eine Box an einer Stelle so darstellen wie es den eigenen Wünschen entspricht. Ein Beispiel dazu wäre u.a. eine Top Bar. Auch ist es nicht möglich, dass Standard Woltlab Menü zu erweitern ohne auf Templates zurück zu greifen oder aber schlicht weg ein eigenes Menü an Stelle des Woltlab Menüs einzufügen. In solchen Fällen wird man um Templates nicht drum herum kommen. Kurz um ist natürlich vieles auch mit den erstellen von Seiten oder Boxen möglich, doch in gewissen Punkten, führt ein Weg an einen Template nicht vorbei.

    Unterschiede zwischen Templates und Templategruppen

    Templates unterscheiden sich Grundsätzlich in zwei Arten. Einmal zu den Standard-Woltlab Templates welche zur Core oder der Apps (Forum, Blog, Filebase,etc.) und derer die zu den genutzten Style gehören. Um diese Templates voneinander zu unterscheiden werden die Templates in so genannte Template-Gruppen aufgeteilt. Wird zum Beispiel der Style "MeinStyle" installiert, so bestehen im folgenden nach der Installation zwei Template-Gruppen. Dies wären in diesen Beispiel dann die Templategruppen: "Standardtemplates" für die Core und den Apps und "MeinStyle Templates" für den installierten Style. Sollten jedoch mehrere Styles installiert sein, so kann die Anzahl der Templategruppen natürlich auch abweichend sein. Installierte Styles die hingegen nur auf den Standard-Style aufbauen und damit keine Template-Veränderungen vornehmen müssen entsprechend nicht zwingend auch eine neue Templategruppe besitzen, da der Style in solch einen Fall nur per CSS erstellt wurde.

    Was ist ein Template?

    Ein Template, welches sich in diesem Fall ausschließlich auf die Woltlab Templates bezieht, besteht aus dem von Woltlab genutzten und Smarty ähnlichen Code, so wie aber auch aus einfachen HTML und Javascript, in welchen Funktionen der Core oder den Apps abgerufen oder ausgeführt werden (können). Ferner dienen Templates aber auch dazu, den Code der Core und den Apps voneinander aufzusplitten und somit übersichtlicher zu gestalten. Ähnlich geschieht dies auch bei vielen anderen Webseiten. Als Beispiel nehmen wir eine 3-teilige Webseite, welche aus einen Header, dem Content und dem Footer besteht. Anstatt auf jeder Seite den Code vollständig im Quellcode der einzelnen Seiten zu intrigieren, werden dazu die einzelne Elemente (Header und Footer) vom Content getrennt und mittels include eingebunden. Was bei einer herkömmlichen Webseite mittels PHP mit <?php include('header.php') ?> geschieht, geschieht hier mit mit dem Smarty ähnlichen Code {include file='header'}.

    Wie ist ein Template aufgebaut?

    Templates können klein wie auch groß sein, leicht wie auch schwer verständlich (kommt auf die eigene Erfahrungen an) sein und auch mit mehr oder weniger Funktionen daherkommen. Um es der Verständlichkeit halber einmal all denjenigen zu zeigen wie so ein einfaches Template aussieht, hier nun ein kleines Beispiel dazu:

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Wie im Quellcode zu erkennen beginnt dieser mit einer {if} (Im übersetzen: "Wenn") Abfrage. Innerhalb dieser Abfrage, also noch vor dem schließenden }-Tag, folgt die Anweisung $__wcf->isLandingPage() mit welcher auf die Core Startseite verwiesen wird. Folge dessen folgt dann der eigentliche Quellcode, bevor dann mit {/if} die if-Abfrage geschlossen wird. Funktion dieses minimalistischen Templates ist der, dass der Text innerhalb des <p>-Tags nur auf der Startseite angezeigt wird. Im kurzen und auf klar Deutsch würde dies letztlich nichts mehr bedeuten als: "Wenn Startseite , dann Text anzeigen". Das was hier als Beispiel mit einen Text im <p>-Tag geschildert wurde, kann natürlich auch jedenx-beliebigen HTML-Code enthalten wie z.B. ein Slider, ein DIV-Container, uvm. Letztlich ist dies jedoch nur ein kleines Beispiel, denn Templates können auch sehr viel Umfangreicher sein.


    Da lediglich der Woltlab Suite Core Quellcode unter GNU-LGPL Lizenz zugänglich ist, jedoch die Quellcodes der Apps wie das Forum, der Filebase, etc. proprietär sind, werden hier nur Codebeispiele der Core selbst als Beispiele aufgeführt!


    Wie o.g. können Templates auch sehr Umfangreich sein. Als Beispiel dazu nehmen wir die Artikel-Templates und schauen uns dazu zwei Templates genauer an. In dem Template articleList.tpl finden wir ab der Zeile 86 folgenden Quellcode:

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    In diesem u.a. auch sehr langen Quellcode des articleList-Templates werden abseits des hier gezeigten Quellcodes zuvor die Navigation, die Sidebar und auch am Ende nach dem hier gezeigten Quellcode-Beispiels der Footer eingebunden. Dies ist jedoch nur das Grundgerüst, welches durch einbinden weiterer Templates die komplett dargestellte Seite, wie sie ein jener Benutzer sehen würde, darstellen würde. Bleiben wir aber hier im Beispiel nur bei den Artikel-Templates. In dem o.g. Quellcode wird in der 3ten Zeile mit {include file='articleListItems'} an gleicher Stelle das Template articleListItems.tpl eingebunden, welches letztlich für das anzeigen der einzelnen Artikeln verantwortlich ist:

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Mit der geöffneten foreach-Schleife ({foreach from=$objects item='article' name='articles'}) wird hier eine Anweisung zum durchlaufen von mehreren Elementen innerhalb des Templates getätigt. Diese Elemente wären, wie im articleListItems.tpl zu sehen ist, viele {if}-Anweisungen, welche u.a. für das sammeln von Informationen wie das vorhanden sein von Badges, den Artikeltitel, die Beschreibung, etc. zuständig sind und dann letztlich nach dem einlesen ausgegeben werden. Dies geschieht z.B. in Zeile 30 des Quellcodes:

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Hier wird leicht verständlich mit {$article->getTitle()  der Titel und mit {@$article->getFormattedTeaser()  die Beschreibung des Artikels ausgegeben. Deutlich zu erkennen ist dabei die Ummantelung mit HTML-Code und den CSS-Klassen, mit welcher die Artikel dann auf der Seite ausgegeben und entsprechend dem Style angepasst werden (können).

    Wie erstelle ich ein Template?

    Vorab sollte sich hier jeder Gedanken machen, ob die eigenen Templates in einer gesonderten eigenen Templategruppe erstellt werden oder nicht. Der Vorteil bei einer eigenen Templategruppe hat natürlich den großen Vorteil, dass eigene Templates so von den Standard-Templates und derer vom genutzten Style getrennt wären. Der Nachteil ist jedoch, dass Templates in einer eigenen Templategruppe nicht beim exportieren eines Styles mit im Export mit aufgenommen werden würden. Entsprechend dem sollten eigene Templates in der Templategruppe des Styles eingefügt werden. Kleiner Tip: Um die eigenen Templates im späteren von dem Style abhängigen Templates unterscheiden zu können empfiehlt es sich die eigenen Templates zu kennzeichnen. Als Beispiel: my_Template oder my_header, etc. Sollte jedoch ein Code innerhalb eines bestehenden Templates eingefügt werden, so empfiehlt es sich dieses immer zu kommentieren. Dies geschieht innerhalb eines HTML-Codes mit <!-- Mein Kommentar -->, innerhalb des Template-Scripting mit {* Mein Kommentar *} oder innerhalb einer CSS Anweisung mit /* Mein Kommentar */. Um nun ein Template anzulegen gehe folgendermaßen vor:

    1. Gehe zu Anpassungen Templates
    2. Klicke nun auf + Template hinzufügen
    3. Wähle oben die Templategruppe aus in welcher das Template erstellt werden soll
      (Bemerke den Hinweis im o.g. Absatz zur Wahl der Templategruppe)
    4. Vergebe Dein Template einen Namen / Titel
      (Bemerke auch hier den Hinweis im o.g. Absatz zur Wahl des Template Names / Titels)
    5. Füge Dein Code ein und speicher das Template ab. Fertig!

    Dein Template wird nun in der ausgewählten Templategruppe mit aufgeführt und kann nun an der gewünschten Stelle eingefügt werden und damit wären wir beim nächsten Schritt, wie ein Template eingefügt wird.

    Wie füge ich ein Template ein?

    Bevor das eigene Template eingefügt werden kann, sollte sich natürlich darüber in klaren sein wo genau das eigene Template eingefügt werden soll. Nehmen wir als Beispiel einmal die Top Bar welche über den Standard Woltlab Menü eingebunden wird. In diesem Fall wäre dies im Header und somit das header-Template (header.tpl). Nach dem typischen Meta-Angaben im head-Bereich sehen wir ab Zeile 30 folgenden Quellcode:

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Um nun beim Beispiel der Top Bar zu bleiben, müsste diese nun überhalb des Woltlab Menüs angezeigt werden, welches sich im pageHeader Template wiederfindet. Entsprechend dem müsste das eigene Template (in diesem Fall die Top Bar) noch vor dem Woltlab Menü, also vor Zeile 35 und damit vor {include file='pageHeader'} eingebunden (includiert) werden. Dieses geschieht mit {include file='my_Template'} und damit müsste das header-Template nun so aussehen:

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Warnung!

    Beachte beim includieren von Templates stets die korrekte Schreibweise des eigens erstellten Templates. Selbst kleine Schreibfehler führen zu einen Fatal Error!


    Nach abspeichern dessen, würde nun der Inhalt des eigenen Templates auf der Seite angezeigt werden. Zu beachten wäre allerdings, dass der Quellcode im eigenen Template natürlich noch per CSS angepasst werden müsste. Da dieses jedoch ein anderes Thema ist, wird entsprechend an dieser Stelle nicht näher auf das Thema CSS eingegangen. Wer möchte kann jedoch die Top Bar als Beispiel nehmen und dieses lokal oder im Testboard ausprobieren.

    Warum wird mein Template nicht angezeigt?

    Wenn das eigens erstellte Template nicht angezeigt wird, so kann dieses mehrere Ursachen haben. Um diesen auf den Grund nutze folgende Punkte um die Fehlerquelle zu lokalisieren und entsprechend abzuändern:

    1. Wurde das Template in die richtige Templategruppe erstellt?
    2. Wurde das Template aus der richtigen Templategruppe eingebunden (includiert)?
    3. Wurde das richtige Template eingebunden?
    4. Wurde das include des Template ggfls. auskommentiert ({* {include file='my_Template'} *})?
    5. Wurde ein Quellcode im Template geschrieben?
    6. Wurde der Quellcode per CSS ggfls. ausgeblendet (display: none;)?

    Template Beispiele

    ... folgt ...


    ... to be continued ;)


    Dieses Thema ist noch unvollständig und wird in den kommenden Tagen weiter geführt.

    Vielen Dank für Dein/Euer Verständnis!

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!