Yellow-CMS „mit Allem“

Yellow-CMS besticht durch seine Einfachheit bei der Einrichtung. Dabei werden drei Grundrichtungen vorgegeben. Diese lassen sich miteinander kombinieren, mit ein bisschen Individualisierung lässt sich eine komplexe Webseite erzeugen.

Die Vorgeschichte

Das Portal „https://birken-wer-der.de“ realisiert mit Yellow.Der Gewerbeverein meiner Heimatgemeinde hatte auf seiner Webseite als Ziel „Gewerbeportal“ stehen. Das stand da schon länger, mit einem veranschlagten Budget, für dass sich ein professioneller Webentwickler normalerweise keinesfalls an die Tastatur setzt. Als soziales Wesen und weil es meine (neue) Heimatstadt ist, entschloss ich mich zur Einrichtung einer Webseite „pro bono“, mit beherrschbarem Aufwand aber allem, was ein „Gewerbeportal“ ausmacht. Deshalb kam Yellow-CMS (kurz: Yellow) zum Zug. Das war recht schnell realisiert – allerdings habe ich zwischenzeitlich eine Idee, weshalb das Projekt „in sich ruhte“ (anderes Thema …).

Die Anforderung1

  • Allgemeine Informationsseiten (Yellow-Sprech: „Website“)
  • Aktuelle Meldungen (Yellow-Sprech: „Blog“)
  • Anbieterverzeichnis (Yellow-Sprech: „Wiki“)
  • Ein paar „Gimmicks“ (Yellow-Sprech: „Extensions“)

Das ist im Grunde „Peanuts“, denn Yellow kann das „out of the box“:

  1. Yellow-Basispaket herunterladen
  2. Die Extensions „blog“ und „wiki“ herunterladen
  3. Yellow nach Anleitung als „Website“ installieren
  4. Die Extensions in das Verzeichnis systemextensions kopieren.

Stand nach der Installation „bis hier hin“Eigentlich ist damit schon alles Wesentliche erledigt und es kann losgehen. Allerdings ist Anmutung der Seite mit dem Standard-Theme „Stockholm“ übersichtlich.

Die Präsentation lässt sich mittels anderer „Themes verändern. Ausgehend von einer Vorlage, die schon in die gewünschte Richtung geht, lässt sich das Aussehen der Webseite den eigenen Anforderungen anpassen. Das erfolgt über die Stilvorlagen und würde hier den Rahmen sprengen.

Ein Einstieg dafür kann der Artikel Eine Webseite mit Yellow erstellen sein.

Inhalte anbieten

In der jetzt vorliegenden Installation agiert die Webseite als „statische“ Seite, der Blog und das Wiki sind über die Menüeinträge erreichbar. Ein „Portal“ zeichnet sich jedoch durch aktuelle Mitteilungen und Verknüpfungen in die Themenbereiche aus. Natürlich gehört eine Suchfunktion ebenfalls dazu. Letzteres lässt sich mit der Extension „search“ realisieren. Doch damit fängt der Feinschliff an. Denn nach der Installation (ins „Extensions“-Verzeichnis kopieren) passiert auf der Webseite erst einmal – nichts.

Konfigurationsarbeiten

Damit die Suchfunktion aktiv wird, muss mit einen Texteditor (s. „Noch ein Editor“) die Datei systemsettingssystem.ini geöffnet werden.

Fehler in dieser Datei werden von Yellow sofort und unbarmherzig bestraft. Deshalb unbedingt einen Editor mit „Undo“ verwenden und vor größeren Änderungen eine Sicherung davon anlegen.

Aus dem Eintrag Navigation: navigation wird Navigation: navigation-search, die Datei gespeichert und mit einem Browser-Refresh (F5) erscheint eine Suchzeile.

Außerdem werden die Einträge BlogLocation: und WikiLocation: mit den richtigen Pfaden versehen. Bei der Installation der Extensions werden automatisch die Verzeichnisse „2-blog“ und „3-wiki“ erzeugt. Die Nummern geben lediglich die Reihenfolge im Menü an. Deshalb müssen die Einträge so aussehen:

BlogLocation:/blog/
WikiLocation: /wiki/

Natürlich nur, wenn die Standardvorgaben verwendet werden, die nach Bedarf und Wunsch angepasst werden können. Durch diese Anpassung funktionieren überall die Einträge für Listen, die beispielweise auch auf der Startseite angezeigt werden sollen. Dafür gibt es einige Standard-Abkürzungen:

Funktion Abkürzung
Wiki-Tags [wikitags]
Aktuellste Änderungen Wiki [wikichanges]
Blog-Tags [blogtags]
Aktuellste Blog-Einträge [blogchanges]

Damit lassen sich auf der Startseite ohne weitere Aufwand wesentliche Informationen zusammenziehen. Für die Anzeige von Blog- oder Wiki-Artikeln, wie auf den jeweiligen Einstiegsseiten dieser Bereiche, ist jedoch etwas mehr Aufwand nötig.

Artikel-Teaser für die Startseite

Zuerst wird dafür die Datei „default.html“ aus dem Layouts-Verzeichnis mit dem Text-Editor geöffnet und als „start.html“ gespeichert. Dort kann nun der gewünschte PHP-Code eingefügt werden, damit die aktuellsten Blog- und/oder Wiki-Einträge auf der Homepage angezeigt werden. Dieser muss dann lediglich noch das „Layout: start“ zugewiesen werden.

Statt wenig sagendem „Code-Grab“ kann hier eine Demo-Version (ZIP, im Wurzelverzeichnis der Web-Adresse entpacken) mit den beschriebenen Anpassungen heruntergeladen werden (inklusive. „Banner-Klick“, s. nächster Abschnitt).
Die Benutzerdaten lauten (E-Mail) „demo@demo.de“ und (Passwort) „demodemo“.

„Der Rest“ ist primär das Anpassen der Stilvorlage an die eigenen Wünsche. Dafür empfiehlt sich ein eigener Dateiname, der natürlich in die system.ini eingetragen werden muss. So wird verhindert, dass die Änderungen bei einem Theme-Update versehentlich überschrieben werden („Aktualisierung erzwingen“).

Banner-Klick

Ich möchte per Klick auf das Seitenbanner auf die Startseite führen. Ausgehend von den Standard-Themen, die für Yellow angeboten werden, lässt sich das mit einer kleinen Modifikation der Navigations-Elemente (Ordner „Layouts“) erreichen:

<div class="navigation-banner"></div>

ändern in

<a title="Zur Startseite" href="<?php echo $this->yellow->page->base."/" ?>" class="navigation-banner"></a>

Der PHP-Code fügt die Adresse der „Homepage“ als Link ein. Weil der PHP-Code dabei berücksichtigt, ob der Besucher eventuell gerade im Bearbeitungsmodus ist, klappt der Link immer. Ein „/“ als Referenz würde funktionieren, jedoch wurde dann gegebenenfalls der Bearbeitungsmodus verlassen.

Der Link wird mit etwas CSS „gepimpt“ (ergänzt in der Datei bern.css, im Verzeichnis resources, nachdem das Thema „Bern“ installiert wurde):

.navigation-banner {display: block;position:relative;clear:both;height:10vmax;min-height:3rem; max-height:7rem;background-image:url(bern-banner.jpg);background-repeat:no-repeat;background-size:contain;background-position:center center;margin:0 2vmin;}

Das Hintergrundbild des Links (hier: „bern-banner.jpg“, das muss im resources-Verzeichnis liegen!) wird auf eine definierte Größe gebracht – womit der Link zwangsläufig die gleiche größe bekommt. Dass er „leer“ ist, spielt dabei keine Rolle.

Die „Gimmicks“

Das erstelle Portal verfügt über einige weitere Ergänzungen, die es als Extensions bei Yellow oder in meinem Git-Hub gibt. Das sind

Extension Funktion
adr* Strukturierte Darstellung von Adress-Daten
cmail* E-Mail-Versand mit Daten für den Spam-Filter (White-Listing)
ext* Links auf externe Webeiten in einem neuen Fenster
format* Erzeugen mehrerer Spalten auf einer Seite.
gallery Darstellung von Bildern in einer Galerie
imgpop* Anzeige skalierter Bilder mittels CSS (ohne Javascript) → sehr schlank, kein externer Link
ontime* Zeitgesteuerte Anzeige von Nachrichten

* in meinem Git-Hub-Repository verfügbar.

Und noch einige mehr, die z.Z. noch in der Erprobung sind.


  1. Die hier formulierten Anforderungen lassen sich zweifellos auch anders mit Yellow-CMS lösen. Meine Überlegungen – warum so – würden hier den Rahmen sprengen. Wer Alternativ-Vorschläge einbringen möchte, kann dies gern via per E-Mail tun. Bei hinreichender „Schöpfungshöhe“ ergänze ich diesen Beitrag gern. ↩︎