Implementation eines kompletten Hauptmenüs
Dieser Artikel ist Teil einer Reihe von Artikeln über die dynamische Navigation von DynPG
Dynamisches Navigationsmenü und Inhaltsanzeige | Der Navigationskontext | Implementation eines kompletten Hauptmenüs | Anpassen des Navigationsmenüs | Moduldokumentation: Dynamische Navigation | Einführungsartikel ...
zurück zu Kategorie:Integration in eine Webseite
In diesem Artikel werden wir eine Webseite mit einem dynamischen Navigationsmenü und einer Inhaltsanzeige erstellen.
Inhaltsverzeichnis
Das Grundgerüst
Als erstes benötigen wir eine neue Datei index.php mit einem HTML-Grundgerüst. Außerdem erstellen wir eine CSS-Datei namens style.css mit der wir das Aussehen des Menüs anpassen werden. Das Grundgerüst, in dem wir zunächst erst einmal nur DynPG einbinden, könnte wie folgt aussehen:
<?php require '../dynpg/getcontent.php'; //DynPG-Funktionalität einbinden $GLOBALS["DynPG"]->SetParam_PathToRoot('../dynpg/'); //DynPG-Pfad setzen ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head> <title>Seite mit dynamischen Navigationsmenü</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css" /> <!--eigene style.css einbinden--> </head> <body> <h1>Seite mit dynamischen Navigationsmenü</h1> <div id="navigation"> <!-- hier kommt die dynamische Navigation hin --> </div> <div id="inhalt"> <!-- hier kommt die Inhaltsanzeige hin --> </div> </body> </html>
In den Spalten navigation und inhalt sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden.
Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, der die dynamische Navigation enthält. Die Schritte hierzu können Sie ggf. im Artikel zum Einbinden von DynPG Modulen nachlesen. Navigieren Sie im Backend zu diesem Artikel und merken Sie sich die ID. Diese werden wir im folgenden Snippet brauchen. Gehen wir also wieder in unsere index.php und fügen im div navigation folgendes ein:
<div id="navigation"> <?php $GLOBALS["DynPG"]->SetParam_A_Anytime(true); // dynamische Navigation immer anzeigen $GLOBALS["DynPG"]->SetParam_A_Article(1); // Artikelnummer der dynamischen Navigation $GLOBALS["DynPG"]->SetParam_A_ArticleHeader(false); // Artikelkopf (Titel, Lead-Bild und Lead-Text) ausblenden $GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(false); // Kategorienavigation (Gruppe > Untergruppe > Artikel) ausblenden $GLOBALS["DynPG"]->SetParam_A_PrintNavigation(false); // Drucken-Link ausblenden $GLOBALS["DynPG"]->Write_Article(); // dynamische Navigation ausgeben ?> </div>
 Achtung:
|
Sie müssen in Zeile 2 den Parameterwert durch die ID des Artikels ersetzen, der die dynamische Navigation enthält. |
In der ersten Zeile weisen wir DynPG an, dass der folgenden Artikel immer angezeigt werden soll, da es sich sich um das Navigationsmenü der Webseite handelt. In der zweiten Zeile muss ID durch die ID des Artikels ersetzt werden, der die dynamische Navigation enthält. Die folgenden Zeilen verändern die Ansicht so, dass wirklich nur die Navigation angezeigt wird und sonst nichts.
Erstellen der Inhaltsanzeige
Nun müssen wir uns noch um die Darstellung der Listen und Artikel kümmern. Dazu fügen wir in der Spalte inhalt folgendes ein:
<div id="inhalt"> <?php $GLOBALS["DynPG"]->Write_AllGroups(); // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext) $GLOBALS["DynPG"]->SetParam_AA_Maxview(10); // Maximal zehn Einträge in Artikellisten anzeigen $GLOBALS["DynPG"]->Write_AllArticles(); // Artikelliste-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext) $GLOBALS["DynPG"]->SetParam_A_Anytime(false); // Parameter wieder auf false setzen (wurde bei der Navigation auf true gesetzt) $GLOBALS["DynPG"]->Write_Article(); // Artikel-Detailansicht ausgeben ?> </div>
Hier werden alle drei Ansichten erzeugt und einige Parameter gesetzt. Zeile 2 gibt z.B. an wie lang eine Artikelliste sein darf, bevor sie der Übersicht halber auf mehreren Seiten dargestellt werden (wobei automatisch eine Seitennavigation im unteren Bereich der Webseite angezeigt wird).
Beachten Sie, dass wir die Parameter $GLOBALS["DynPG"]->SetParam_AG_Anytime(false) und $GLOBALS["DynPG"]->SetParam_AA_Anytime(false) nicht setzen, da diese bereits standardmäßig den Wert false haben. Dadurch zeigen die Gruppen- und Artikelliste den Inhalt abhängig vom Navigationskontext an. Wir müssen hier aber die Funktion $GLOBALS["DynPG"]->SetParam_A_Anytime(false) aufrufen, da wir diesen Parameter für die Artikel-Detailansicht zuvor beim Einbinden der Navigation auf true gesetzt haben. Dadurch werden nun alle drei Sichten abhängig vom Navigationskontext angezeigt.
Anpassen des Layouts mittels CSS
Im Syle Sheet werden wir nun folgende Angaben machen:
/* Navigation */ div#navigation{ /* Angaben für ein zweispaltiges Layout */ float: left; width:150pt; margin-left:5pt; margin-right:5pt; border:1px solid black; } /* Inhalt */ div#inhalt { /* Angaben für ein zweispaltiges Layout */ margin-left:165pt; margin-right:5pt; } /* In allen divs innerhalb des Navigationsmenüs wird der Inhalt um 10 pt nach rechts verschoben. Durch die Verschachtelung von divs innerhalb des Menüs erhalten wir so eine Einrückung gemäß der Hierarchie-Ebene. */ div#course_categories_menu div { padding-left:10pt; } /* Alle Links innerhalb des Navigationsmenüs */ div#course_categories_menu a { text-decoration:none; }
Ausgabe
Nun kann die Seite bereits angezeigt werden und sieht dann folgendermaßen aus. Natürlich variiert diese Ansicht je nachdem welche Gruppen und Artikel Sie im Backend erstellt haben.
