Tutorial - Templates

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche

In diesem Tutorial erfahren Sie, wie sie DynPG Templates verwenden können, um Ihrer Webseite ein benutzerdefiniertes Aussehen zu geben. Hier lernen Sie, wie sie den Aufbau von Gruppen- und Artikellisten nach Ihren Wünschen anpassen können. Mit den Templatevariablen können Sie so ihre Webseite flexibel und ohne Einschränkungen gestalten.

Was Sie brauchen

Um dieses Tutorial erfolgreich durchzuarbeiten, empfiehlt es sich den Artikel zu Templates durchzulesen, um ein grobes Verständnis für die Template-Engine zu bekommen. Die Bedeutung der hier verwendeten Templatevariablen und viele weitere Informationen finden sie in der Template-Referenz.


Sie können sich außerdem das Archiv mit den Beispieldateien für dieses Tutorial herunterladen:

  • Dateien für das Template-Tutorial: Download


Es enthält die folgenden Dateien:

  • /templatesite enhält die Dateien für eine einfache Webseite.
    • /css/style.css: CSS Definitionen
    • index.php: die HTML-Seite inklusive einiger DynPG Definitionen
  • /custom enthält die Template-Dateien
    • articles.tpl: Template für die Artikelliste (zu Beginn leer)
    • detail.tpl: Template für die Artikeldetail-Ansicht (zu Beginn leer)
    • detail_printtext.tpl: Template für Druck-Ansicht
    • groups.tpl: Template für die Gruppenliste (zu Beginn leer)
    • home.tpl: Template für die Home-Ansicht
    • navigation-pages.tpl: Template für die Seitennavigation, falls eine Gruppen-/Artikelliste auf mehrere Seiten verteilt wird.
    • search-form.tpl: Template für das Suchformular


Der Ordner templatesite sollte in den htdocs Ordner ihres Servers kopiert werden bzw. in den Ordner, in dem Sie Webseiten normalerweise platzieren, um sie im Browser aufrufen zu können. Den Ordner custom kopieren Sie in den Template Ordner Ihrer DynPG Installation. Sie finden ihn ausgehend vom DynPG Hauptverzeichnis unter tpl/MyCMS/.

Note.png Bemerkung: Damit das Codebeispiel bei Ihnen läuft, müssen Sie in der Datei index.php noch die ID des Artikels angeben, der die dynamische Navigation enthält, damit diese in der Webseite angezeigt wird. Wie Sie eine dynamische Navigation erstellen, erfahren Sie in der Beschreibung zur Einbindung von Modulen und dem Artikel Implementation eines kompletten Hauptmenüs.

Benutzerdefiniertes Template verwenden

Haben Sie die obigen Schritte zur Einrichtung ausgeführt, befinden sich die Template-Dateien bereits im richtigen Ordner und können nun mit DynPG verwendet werden. Wir fügen dazu eine weitere Anweisung in der Webseite (Datei index.php) ein. Im div-Tag für den Inhalt wird am Anfang die folgende Anweisung ergänzt:

index.php 

...
 
<div id="inhalt">
  <?php
  $GLOBALS["DynPG"]->setupTemplate('custom');            // Custom-Template setzen
 
  $GLOBALS["DynPG"]->Write_AllGroups();
  $GLOBALS["DynPG"]->SetParam_A_PrintNavigation(TRUE);
  $GLOBALS["DynPG"]->Write_AllArticles()
  $GLOBALS["DynPG"]->SetParam_A_Anytime(FALSE);
  $GLOBALS["DynPG"]->Write_Article();
  ?>
</div>
 
...

Beachten Sie, dass der hier angegebene Templatename genau dem Namen des Ordners entspricht, den wir vorher in den Templateordner kopiert haben. Allgemein wird der Befehl setupTemplate('name'); immer in das Laden der Templatedateien aus dem Ordner unter tpl/MyCMS/name übersetzt.

Wenn Sie die Webseite nun im Browser aufrufen sollten sie die dynamische Navigation sehen, aber keine Gruppen- oder Artikellisten. Das liegt daran, dass die Templates für diese Ansichten im Moment noch leer sind. Wir werden nun in den folgenden Abschnitten des Tutorials den Inhalt dieser Dateien ergänzen.

Artikeldetail-Ansicht

Um die Einfachheit des Umgangs mit Templatevariablen zu demonstrieren, verwenden wir für die Artikeldetail-Ansicht ein sehr einfaches Template. Wir werden hier lediglich eine Variable platzieren, die uns den Inhalt des Artikels, d.h. den Inhaltstext liefert. Öffnen Sie dazu die Templatedatei für die Artikeldetail-Ansicht detail.tpl und fügen Sie dort den folgenden Code ein:

detail.tpl 

{$CONTENT}

Das ist alles. Das Template für die Artikeldetail-Ansicht ist damit fertig. Wenn Sie nun im Navigationsmenü einen Artikel aufrufen, sollten sie den Inhaltstext des Artikels sehen können.

Custom Template - Artikeldetail.png

Gruppenliste

Aufbau des Templates

Im nächsten Schritt werden wir das Template für die Gruppenliste erstellen. Hier werden wir die Listenfunktion der Template-Engine nutzen. Dabei werden alle Elemente und Variablen innerhalb einer Schleife mehrmals ausgegeben, um die Liste zu erzeugen. Bei jedem Schleifendurchlauf stellt uns DynPG die Templatevariablen, wie Titel, Beschreibungstext und die URL zum Inhalt, für die jeweilige Gruppe bereit. Die Schleife wird durch <!-- RepeatedListBegin name="listing" --> eingeleitet und durch <!-- RepeatedListFinish --> beendet. Das Template hat daher den folgenden Aufbau:

groups.tpl 

// Code der vor Durchlaufen der Schleife eingefügt wird.
 
<!-- RepeatedListBegin name="listing" -->
 
  // Code in der Schleife. Hier sind die Variablen der jeweilgen Gruppe (Titel, Beschreibung. URL etc.) verfügbar.
 
<!-- RepeatedListFinish -->
 
// Code der nach Durchlaufen der Schleife eingefügt wird.

Gruppen ausgeben

Für jede Gruppe wollen wir den Titel als Überschrift anzeigen. Die Beschreibung der Gruppe soll darunter als kursiver Text erscheinen. Auf den Text folgt ein Link, der zum Inhalt der jeweiligen Gruppe verweist. Dazu verwenden wir die drei Templatevariablen {$NAME}, {$SHORTTEXT} und {$LIST_REFER_TO}. Die gesamte Gruppenliste wird von einem <div>-Tag mit dem Klassennamen gruppenliste umschlossen.

groups.tpl 

<div class="gruppenliste">
 
  <!-- RepeatedListBegin name="listing" -->
 
  <div class="gruppe">
    <h3>{$NAME}</h3>
    <p><i>{$SHORTTEXT}</i></p>
    <a href="{$LIST_REFER_TO}">Link</a>
  </div>
 
  <!-- RepeatedListFinish -->
 
</div>
Caution.png Achtung: da hier die CSS-Klassen für die Gruppenliste und die einzelnen Elemente der Liste anders benannt wurden, als in den Standardtemplates, kann der Standard-CSS-Stil von DynPG, den sie normalerweise mit $GLOBALS["DynPG"]->Write_CSS_JS_Header(); einbinden, nicht mehr verwendet werden. Sie können aber natürlich eigene CSS Definitionen für Ihre selbst angelegten Klassen (hier: div.gruppenliste und div.gruppe) erstellen.

Seitennavigation

Nachdem die Gruppenliste nun ausgegeben wird, fügen wir noch eine Seitennavigation hinzu. Diese erscheint immer dann, wenn mehr Gruppen existieren, als gemäß den Einstellungen in DynPG auf einer Seite angezeigt werden sollen. Die Liste wird dann auf mehrere Seiten verteilt. Dazu fügen wir nach der Schleife den Inhalt der Variable {$PAGES_NAVIGATION} hinzu, welche die Seitennavigation enthält, und umgeben sie mit einem div, das die Navigation zentriert in der Seite darstellt.

groups.tpl 

<div class="gruppenliste">
 
  <!-- RepeatedListBegin name="listing" -->
 
  <div class="gruppe">
    <h3>{$NAME}</h3>
    <p><i>{$SHORTTEXT}</i></p>
    <a href="{$LIST_REFER_TO}">Link</a>
  </div>
 
  <!-- RepeatedListFinish -->
 
  <div style="width:200px;margin:auto;">
    {$PAGES_NAVIGATION}
  </div>
 
</div>

Ergebnis

Eine Gruppenliste könnte dann Beispielhaft so aussehen:

Custom Template - Gruppenliste.png

Artikelliste

Alternierende Überschriften

In der Artikelliste werden wir nun ein paar weitere Funktionen der Template-Engine von DynPG nutzen. Zunächst möchten wir erreichen, das in der Liste der Titel des Artikels in einem eigenen div Element angezeigt wird. Dabei soll die CSS Klasse aller Elemente an einer ungeraden Position in der Liste den Namen "ueberschrift" bekommen und die Elemente an den geraden Positionen sollen die CSS Klasse "ueberschrift2" haben. Wir können damit interessante Designs erstellen, in denen wir zum Beispiel die Hintergrundfarben der Überschriften immer abwechseln oder andere alternierene Designs erstellen.

Um dies zu erreichen, müssen wir also an bestimmten Stellen (genauer: an jeder geraden Position in der Gruppenliste) eine 2 an den CSS-Klassennamen "ueberschrift" anhängen. Dafür können wir die folgende bedingte Anweisung verwenden, die uns bei allen geraden Listennummern die "2" liefert. Wir machen hier Gebrauch von der Möglichkeit, sämtliche Funktionen und Operatoren von PHP in den Bedingungen verwenden zu können. Dabei ist % der Modulo-Operator. 

{$# ( {$LIST_INDEX} % 2 == 0) #}2{$# END #}

Wir fügen diesen Ausdruck nun an der entsprechenden Stelle in das Template ein und ergänzen einige HTML-Definitionen für den groben Aufbau der Artikelliste:

articles.tpl 

<h2>Artikelliste</h2>
 
<div class="artikelliste">
 
  <!-- RepeatedListBegin name="listing" -->
 
  <div class="artikel">
    <div class="ueberschrift{$# ( {$LIST_INDEX} % 2 == 0) #}2{$# END #}">
      <b>{$TITLE}</b>
    </div>
  </div>
 
  <!-- RepeatedListFinish -->
 
</div>

Artikelinfomationen

Anschließend wollen wir in der Artikelliste unter dem Titel den Leadtext und den Link zum Artikeltext des jeweiligen Artikels anzeigen. Falls der Artikel bereits einmal modifiziert wurde, soll zudem der Autor und Zeitpunkt der letzten Änderung ausgeben werden. Um festzustellen, ob ein Artikel modifiziert wurde, führen wir einen Vergleich der entsprechenden Templatevariable {$MODIFIER_NAME} durch. Ist diese nicht leer, so wurde der Artikel modifiziert und die Information soll angezeigt werden. Die Bedingung sieht wie folgt aus: 

{$# ('{$MODIFIER_NAME}' != '') #}
  <i>zuletzt bearbeitet von {$MODIFIER_NAME} am {$CHANGED}</i>
{$# END #}

Wir fügen nun die Templatevariablen für den Leadtext und Link sowie diese Anweisung in unser Template ein.

articles.tpl 

<div class="artikelliste">
 
  <!-- RepeatedListBegin name="listing" -->
 
  <div class="artikel">
    <div class="ueberschrift{$# ( {$LIST_INDEX} % 2 == 0) #}2{$# END #}">
      <b>{$TITLE}</b>
    </div>
 
    <div class="artikelvorschau">
      {$# ('{$MODIFIER_NAME}' != '') #}
        <i>zuletzt bearbeitet von {$MODIFIER_NAME} am {$CHANGED}</i>
      {$# END #}
 
      <p>{$LEAD}</p>
 
      <a href="{$LIST_REFER_TO}">Link</a>
    </div>
  </div>
 
  <!-- RepeatedListFinish -->
 
</div>

Drucken-Link und Seitennavigation

Nun werden wir noch einen Link einfügen, mit dem der Artikel gedruckt werden kann. Wir werden dazu zuerst prüfen, ob der Drucken-Link durch die entsprechende DynPG-Funktion $GLOBALS["DynPG"]->SetParam_A_PrintNavigation(ANZEIGE); aktiviert wurde. Für den Test verwenden wir die Templatevariable {$COND_SEGM_PRINTNAV}, welche den Wert TRUE bekommt, wenn diese Funktion mit dem Parameter TRUE aufgerufen wurde. Ist dies der Fall, so wird der Drucken-Link ausgegeben. In jedem Fall fügen wir wie schon bei der Gruppenliste am Ende die Seitennavigation hinzu.

articles.tpl 

<div class="artikelliste">
 
  <!-- RepeatedListBegin name="listing" -->
 
  <div class="artikel">
    <div class="ueberschrift{$# ( {$LIST_INDEX} % 2 == 0) #}2{$# END #}">
      <b>{$TITLE}</b>
    </div>
 
    <div class="artikelvorschau">
      {$# ('{$MODIFIER_NAME}' != '') #}
        <i>zuletzt bearbeitet von {$MODIFIER_NAME} am {$CHANGED}</i>
      {$# END #}
 
      <p>{$LEAD}</p>
 
      <a href="{$LIST_REFER_TO}">Link</a>
    </div>
  </div>
 
  <!-- RepeatedListFinish -->
 
  {$# ({$COND_SEGM_PRINTNAV}) #}
    <br/>
    <a href="{$PRINT_HREF}" title="{$LANG_AA_PRINT}" target="_blank">{$LANG_AA_PRINT}</a>
  {$# END #}
 
  <div style="width:200px;margin:auto;">
    {$PAGES_NAVIGATION}
  </div>
</div>
Caution.png Achtung: um ähnliche Funktionen wie SetParam_A_PdfNavigation(); oder SetParam_A_RecommendNavigation(); weiterhin verwenden zu können, müssen Sie in ähnlicher Weise bedingte Anweisungen für die entsprechenden Templatevariablen (hier z.B.: {$COND_SEGM_PDFNAV} und {$COND_SEGM_RECOMMENDNAV}) erstellen. Diese Funktionen sind bereits in den Standardtemplates im Ordner tpl/MyCMS/default implementiert und können von dort kopiert werden.

Ergebnis

Die Artikelliste könnte nun zum Beispiel folgendermaßen aussehen:

Custom Template - Artikelliste.png
Von „http://wiki-de.dynpg.org/wiki_de/index.php?title=Tutorial_-_Templates&oldid=3433“