Rangliste

Vor einiger Zeit hat IPS Community einen Abschnitt mit Versionshinweisen (Release Notes) hinzugefügt, der IPS Kunden über vergangene und zukünftige Versionen von IPS Community Suite auf dem Laufenden halten soll. Viele haben gefragt, womit IPS diese Versionsübersicht erstellt hat? Die Antwort war klar: mit eigener Anwendung Pages, die Teil der IPS Community Suite ist. Zwar wurde alles in Release Notes unter Verwendung von Standardfunktionen erstellt, aber einige der Techniken sind nicht das, was Du in den Standardtemplates finden wirst, die IPS mit Pages ausliefert. Die Standardtemplates sind als Basis und Ausgangspunkt konzipiert worden. Der Sinn dieses Tutorials ist es daher, zu behandeln, wie IPS seine Release Notes aufgebaut hat, und einige dieser fortgeschrittenen Funktionen und Techniken durchzugehen. Das Ziel ist, dass Du die gleichen Ideen auf Deine eigene Community anwenden kannst. Für wen ist dieses Tutorial gedacht? Du solltest über ausreichendes Verständnis von PHP, HTML und ein paar einfache JavaScripts verfügen. Die Erstellung von Release Notes erfordert die Bearbeitung von Templates, Du musst also mit Code arbeiten. Wir werden in diesem Tutorial alle Funktionen von Pages behandeln, die für den Aufbau von Release Notes verwendet werden, so dass Du kein Pages-Experte sein musst. Betrachte es als einen Lernprozess: IPS hat Release Notes für eigenen Gebrauch erstellt, also sind sie nur so weit gegangen, wie es für sie nötig war. Vielleicht möchtest Du aber später noch weiter gehen und die Idee für Deinen eigenen Gebrauch weiter aufpolieren? Lass uns anfangen.

Wir haben bereits einige CSS-Klassen in die Templates eingebaut. Und jetzt können wir die Dokumentation über diese CSS-Klassen gestalten. CSS-Datei erstellen und einbinden In AdminCP gehe zu Pages -> Seitenverwaltung -> Templates und klicke auf Neu. Wähle CSS-Datei hinzufügen. Ich nenne die Datei docs und füge diese der bestehenden Gruppe CSS hinzu. Wenn wir mehrere CSS-Dateien hätten, wäre es sinnvoll an diese Stelle vielleicht eine neue Gruppe zu erstellen. Füge folgende CSS zu docs.css hinzu: Um diese CSS in die Seite für die Datenbank einzubinden, gehe in AdminCP zu Pages -> Seitenverwaltung -> Seite und öffne die Seite mit der Dokumentation zum Bearbeiten auf. Wechsele zu Registerkarte Einbinden und klicke auf CSS/Docs.css. CSS für Dokumentation einbinden Klicke auf Speichern und schaue Dir das Ergebnis im Frontend an. Du wirst feststellen, dass die Kategorien nun eingeklappt sind, so dass die einzelnen Seiten in der Navigation nicht mehr zu sehen sind. Um hier die Interaktion hinzuzufügen, musst Du noch als letzten Schritt eine JavaScript-Datei erstellen. Javascript erstellen und einbinden Gehe in AdminCP erneut zu Pages -> Seitenverwaltung -> Templates und klicke auf Neu. Wähle JavaScript-Datei hinzufügen und gebe den Namen docs ein. Auch hier belasse die Gruppe JS. Nur wenn es mehrere Dateien gebe, dann könnte man wegen Übersichtlichkeit eine Extra-Gruppe dafür erstellen. Öffne die Datei und füge folgenden Inhalt hinzu: Wie Du siehst, bedienen wir uns an dieser Stelle von dem Code, der bereits auf IPS eigenen Dokumentation verwendet wird. Das ist übrigens ein weitere Vorteil von Pages. Wenn etwas nicht funktioniert, dann kann man den Support direkt von IPS beziehen und ist nicht auf die Drittanbieter angewiesen. Als letzen Schritt wird JavaScript in die Seite für die Dokumentation eingebunden. Und zwar auf die gleiche Art und Weise wie CSS weiter oben. Gehe in AdminCP zu Pages -> Seitenverwaltung -> Seite und öffne die Seite mit der Dokumentation zum Bearbeiten auf. Wechsele zu Registerkarte Einbinden und klicke auf JS/Docs.js. Fertig. Jetzt wird nur die aktive Kategorie im Menüblock aufgeklappt und die anderen mit Klick darauf bei Bedarf erweitert. Du siehst, dass hier einiges an HTML, CSS, JavaScript und etwas PHP zusammengewürfelt wurde. Das ist eine einfache Version, die Du gerne weiterentwickeln kannst. Viel Spaß!