Schritt 3: Erweitern der Navigation

Jetzt haben wir zwar eine Sidebar, aber keinen Inhalt, um Sie zu füllen. Deshalb werden wir uns jetzt um eine zweite Navigation kümmern. In der Hauptnavigation wird nämlich nur die erste Ebene der Navigation angezeigt, Unterseiten werden nicht angezeigt. In der Sidebar können wir jetzt, sofern die aktuelle Seite Unterseiten hat, ein Menü anzeigen, in dem die Unterseiten aufgelistet werden.

Dazu wählen wir das Template-Modul aus und bearbeiten die Seite »Testseite«, dann klicken wir wieder auf das Edit-Symbol vor »Setup«. Hier fügen wir zwischen temp.mainMenu und temp.footerMenu folgenden Code ein:

 

temp.subMenu = HMENU temp.subMenu.entryLevel = 1 temp.subMenu.1 = TMENU temp.subMenu.1 {   wrap = <h2>Unterseiten</h2> <ul id="subMenu"> | </ul>   NO.allWrap = <li> | </li>   ACT = 1   ACT.allWrap = <li class="current"> | </li> }

 

Was macht dieser Code? Als erstes wird in der temporären Variable subMenu ein Menü erzeugt. Mithilfen von entryLevel legen wir fest, dass das Menü nicht in der ersten Ebene des Seitenbaumes, sondern eine Ebene darunter einsetzen soll. So werden nicht die Hauptseiten, sondern deren Unterseiten angezeigt. Mit TMENU definieren wir jetzt nur noch, wie die einzelnen Menü-Elemente angezeigt werden sollen. Hier definieren wir zum Beispiel auch, dass die aktuelle Seite die Klasse »current« bekommen soll.

Bisher ist dieses Menü nur in einer temporären Variable gespeichert und wird nicht angezeigt. Deshalb müssen wir es noch an die Sidebar übergeben. Dazu ändern wir den Code für die Sidebar ein wenig:

 

temp.sidebar = COA temp.sidebar {   10 < temp.subMenu   20 < styles.content.getLeft   20.slide = -1 }

 

Jetzt speichern wir unsere Änderungen und schauen uns die Webseite an. Auf der Startseite ist nach wie vor kein Menü zu sehen — diese Seite hat ja auch keine Unterseiten — aber auf der Seite »News« wird jetzt ein Menü von Unterseiten angezeigt.

Mit etwas CSS in der Datei »\fileadmin\templates\main\css\style.css« können wir das Menü noch ein wenig verschönern:

 

#subMenu { 	list-style-type: none; 	margin: 0px; 	padding: 0px 0px 0px 5px; } #subMenu li { 	margin: 5px 0px; 	padding-left: 18px; 	 	font-size: 0.9em; 	line-height: 1.3em; 	text-indent: -18px; } #subMenu li:before { 	content: "→ "; } #subMenu li a, #subMenu li a:link, #subMenu li a:visited { 	text-decoration: none; 	font-weight: normal; 	color: #000000; } #subMenu li a:hover, #subMenu li a:active { 	text-decoration: underline; } #subMenu li.current a { 	font-weight: bold; 	text-decoration: none; }

 

Jetzt sieht die Sidebar schonmal nicht mehr so leer aus, zumindest auf Seiten, die Unterseiten haben. Überall sonst bleibt die Sidebar nach wie vor leer.

Schritt 4: Ein Kalender zeigt die wichtigen Termine

In einer Schule gibt es immer irgendwelche Termine, die Schüler und Eltern interessieren. Die Eltern wollen wissen, wann der nächste Elternabend ansteht, die Schüler wollen Klausur- und Ferientermine wissen. Das ist einer der Hauptgründe, warum Eltern und Schüler die Schulhomepage besuchen.

Deshalb sollten wir als nächstes einen Kalender einbauen. Auch dafür habe ich schon eine Erweiterung »Simple Calendar« geschrieben. Begeben wir uns also ins Backend und öffnen den »Exetension Manager«. Hier wählen wir im oberen Dropdown-Menü »Import extension« und suchen hier nach der Extension »simplecalendar«. Dann downloaden und installieren wir sie wie schon die anderen Erweiterungen zuvor.

Jetzt begeben wir uns zurück zum Page-Modul und legen nach dem Impressum einen neuen Ordner an. Dazu gehen wir genau so vor, als legten wir eine neue Seite an, aber als Page-Type wählen wir »Folder«. Als Page-Title würde ich »Events« empfehlen, da wir später hier unsere Events und Termine speichern werden.

Als nächstes müssen wir den Kalender natürlich noch im Frontend anzeigen. Also legen wir eine neue Seite mit dem Titel »Kalender« an und bearbeiten sie anschließend.

In der Spalte »Normal« fügen wir jetzt das Plugin »Calendar« hinzu und wechseln zum Tab »Plugin«. Hier gibt es einige Einstellungen zu tätigen. Erstens stellen wir den View-Mode auf »Month«, dies ist die standard Monats-Ansicht des Kalenders. Den Haken bei »Reacting to GET-parameters« sollten wir nur entfernen, wenn wir das Plugin in der Sidebar platzieren. Also lassen wir es jetzt angehakt.

Auch das Feld »Calendar-Page« sollten wir leer lassen. Normalerweise müssen wir hier die Seite angeben, auf der die Hauptversion des Kalenders liegt. In unserem Fall ist dies jedoch die aktuelle Seite, deshalb können wir die Angabe weglassen.

Schließlich müssen wir im Feld »Event-Storage« noch den Ordner »Events« auswählen, damit der Kalender weiß, wo er nach Terminen suchen soll.

Schauen wir uns das Frontend jetzt im Broser an, finden wir erstmal eine neue Seite, die wir mal einfach aufrufen.

Wunderbar - der Kalender wird jetzt schon angezeigt. Als nächstes fügen wir ihn noch in die Sidebar ein, damit der Nutzer auf jeder Seite einen schnellen Überblick über die Termine bekommt. Dazu bearbeiten wir die Seite »Testseite«. Hier fügen wir in der linken Spalte über dem RSS-Feed-Plugin den Kalender hinzu. Doch diesmal sind die Einstellungen etwas anders.

Zum Einen wählen wir als View-Mode »Month (simplified)« aus, zum Anderen müssen wir diesmal als Calendar-Page die gerade erstellte Seite »Kalender« angeben. Klickt der Nutzer in dem Sidebar-Kalender auf einen Link, um etwa zur Tagesansicht zu kommen, landet er automatisch auf der hier definierten Seite.

Wichtig ist auch, dass wir unbedingt den Haken bei »Reacting to GET-parameters« entfernen. Wenn Sie Lust haben können Sie den Haken erstmal aktiv lassen und im Frontend schauen, wie sich der Sidebar-Kalender verhält wenn wir auf der Seite »Kalender« durch den Kalender navigieren. Dann wissen Sie, warum wir den Haken hier nicht setzen sollten.

Schließlich geben wir als Event-Storage wieder den Ordner »Events« an und speichern unsere Änderungen.

Wieder im Frontend sehen wir jetzt auf jeder Seite einen Mini-Kalender in der Sidebar.

Um den Kalender mit Terminen zu füllen, öffnen wir das List-Modul und wählen den Event-Ordner aus. Hier können wir mit einem Klick auf das Hinzufügen-Icon in der oberen Leiste neue Elemente einfügen. Hier wählen wir jetzt »Event« unter Simple Calendar und landen in einem neuen Eingabefeld. Ich denke, die Optionen hier sind recht eindeutig und selbsterklärend, aber Sie können auch gerne im Handbuch nachschlagen, da werden alle Felder genau erklärt.