Eine Webseite mit Yellow erstellen

Eine Anleitung für ganz Eilige, die eine leicht erweiter- und pflegbare Webseite mit Yellow erstellen möchten.

Im Grunde ist es bereits auf der Webseite von Yellow beschrieben, ich fasse es kurz zusammen:

  • zwingende Voraussetzung prüfen: steht auf dem Webspace PHP – vorzugsweise Version 7.xx – zur Verfügung? Wenn ja →
    • Yellow herunter laden
    • Im Webspace entpacken
    • Die Weebseite aufrufen
    • Seitentyp auswählen und Administrator anlegen
  • Wer „nur mal fix eine Webseite“ braucht, ist jetzt fertig.
  • Wer das Vorhande noch ein „pimpen“ möchte, und kein blutiger Anfänger ist, kann eventuell mit der nachfolgenden, etwas unorthodoxen Anleitung sehr schnell ein ansprechendes Ergebnis erreichen.

Was man wissen muss

Wenngleich eine Webseite mit Yellow sehr schnell zum Laufen gebracht werden kann, sind für umfangreichere Individualisierungen Kenntnisse in CSS zwingend und für „special effects“ PHP-Know How unbedingt hilfreich.

Vor der nachfolgenden Schweinegallopp-Anleitung sollte die Yellow-Anleitung wenigstens mal überflogen werden.

Yellow verstehen

Yellow verwendet Markdown-Dateien für das Wesentliche der Webseiten: den Inhalt. Für die Form muss jeder Seite einen Kopfbereich als Steueranweisung enthalten. Das Minimum ist

---
title: Name der Seite
---

Der Seitentitel wird einerseits als Überschrift auf der Seite formatiert, andererseits wird daraus der Name der Datei gebildet. Sonderzeichen und Leerzeichen werden „server-sicher“ ersetzt.

Wird der Titel im Editor von Yellow geändert, wird die Datei unter diesem – neuen – Namen gespeichert. Das kann zu Doubletten führen, denn die ursprüngliche Seite bleibt unter dem bisherigen Namen im Dateisystem.

Wer es etwas komplexer und flexibler mag, kann (bzw.sollte) etwas mehr Infos spendieren:

---
title: 
published: 2017-11-09
modified: 2017-11-09
author: Norbert Simon
language: de
tag: 
description: 
Sidebar: sidebar
Template: wiki
---

Die „Magie“ steckt im verwendeten Template (die übrigen Einträge bei Unklarheit bitte in der Yello-Doku nachschlagen). Ist keins angegeben, wird automatisch default.html verwendet. Das befindet sich im Verzeichnis „system/themes/templates“. Sie enthält ein paar PHP-Befehle:

<?php $yellow->snippet("myheader") ?>
<?php $yellow->snippet("content-default") ?>
<?php $yellow->snippet("myfooter") ?>

Damit werden „Schnipsel“ aus dem Verzeichnis „system/themes/snippets“ geladen, die gemeinsam die Webseite erzeugen. Ein „Schnipsel“ kann reiner HTML-Code sein, er kann jedoch ebensogut PHP-Code enthalten, mit dem komplexere Aufgaben gelöst werden. Für die Grundaufgaben stehen ein paar Schnipsel zur Verfügung. Einige Erweiterungen („Plugins“) bringen zusätzliche Schnipsel oder Templates mit, die nach der Installation (ZIP-Datei der Erweiterung in den Ordner „system/plugins“ kopieren, der Rest läuft automatisch) im jeweiligen Verzeichnis liegen.

Grundeinstellungen der Webseite werden in der Datei „system/config/config.ini“ vorgenommen. Durch die Auswahl des „Theme“ wird eine gleichnamige CSS-Datei im Verzeichnis „system/themes/assets“ als Formatvorlage genutzt. Eine weitreichende Individualisierung der Webseite lässt sich allein durch anpassen dieser CSS-Datei erreichen.

Tipp: Für ein individuelles Layout empfehle ich einen eigenen CSS-Datei-Namen (=Theme in der „config.ini“). Das gilt gleichermaßen für individualisierte Templates und Snippets. Einfach vorhandene Dateien als Ausgangsbasis in neue Dateien mit eigenen Namen kopieren und diese dann nach Bedarf anpassen. Dann kann die integrierte Update-Funktion genutzt werden ohne dass die Änderungen verloren gehen, weil Standard-Templates/Snippets überschrieben werden.

In der config.ini müssen ein paar Kleinigkeiten angepasst werden:

  • FaviconFile: Der Name des Webseiten-Icons, das im „Assets“- Verzeichnis liegt.
  • Siteicon: Das Webseitenlogo oben auf der Webseite. Auch diese Datei muss im „Assets“-Verzeichnis liegen.

Falls Standardtexte geändert werden sollen, können die Sprachdateien im Verzeichnis „system/plugins/language-xx.txt“ bearbeitet werden.

Von geänderten Sprachdateien immer Backups anlegen – die werden bei Updates überschrieben und müssen nach einem Update manuell angepasst werden.

Nicht einfach mit dem Backup ersetzen: es könnten neue Texte nach dem Update dazu gekommen sein!

Für das eigentliche „Pimpen“ kann dann (beliebig) Zeit in die Formatvorlage investiert werden. Auch in individuellen Templates, Snippes und Style-Sheets ist es zweckmäßig, nahe am Standard zu bleiben – also z.B. die vorgegebenen Klassen und IDs der Standard-Stylesheets zu verwenden. So lassen sich ggf. Erweiterungen aus Updates einfacher nutzen.

Herangehensweise

Yellow lässt sich wunderbar mit einer XAMPP-Installation vorbereiten. Das Verzeichnis htdocs umbenennen (=Backup Webverzeichnis der Original-Installation), ein neues htdocs-Verzeichnis anlegen und dort den Inhalt des Yellow-Master-Ordners hinein – läuft. Die Yellow-Dateien können z.B. mit der Projekt-Verwaltung von PS-PAD direkt bearbeitet und erstellt werden, was im Entwicklungsmodus schneller geht, als mit dem integrierten Editor für die Content-Seiten. Das fertige Ergebnis kann einfach in ein ZIP eingepackt und im Webspace wieder ausgepackt werden – läuft.