Seiten und Layout

Ein Blog benötigt auch klassische Webseiten. So ist es z.B. in den meisten Fällen, dass ein Impressum angeboten wird und dass es eine Datenschutzerklärung gibt. Verbreitet ist auch eine “Über”-Webseite, welche das Blog, seine Thematik und ggf. den oder die Autoren vorstellt.

Ein WordPress Blog zeichnet sich unter anderem dadurch aus, dass alle seine Komponenten mit einem relativ einheitlichen Layout dargestellt werden. Ruft man einen Artikel auf, so unterscheidet er sich nicht wesentlich von der Darstellung einer Seite. Vor allem ist die Navigation der gesamten Präsenz in der Regel einheitlich.

Dies muss auch mit Hubzilla sichergestellt werden. Da z.B. die App “Artikel” genutzt wird und ich für die Dampfdruck-Presse auch die Kanalseite und die Profilseite für Besucher anbieten möchte, muss man sich Gedanken darüber machen, wie das Layout für diese App-Ansichten und die selbst erstellten Webseiten möglichst ähnlich gestaltet werden können.

Der generelle Aufbau einer Präsenz ist natürlich ein Frage des persönlichen Geschmacks. Ich habe mich bei der DDP_WP für ein Layout entschieden, welches am oberen Rand einen Navigationsbereich bietet, darunter befindet sich der eigentliche Inhaltsbereich und es gibt eine rechte Seitenleiste für weitere Informationen und weitere spezielle Navigationsmöglichkeiten (z.B. Artikelkategorien, Archive etc.). Schließlich gibt es noch einen Footer für einige Links, die auf jeder Seite zu sehen sein müssen (Impressum, Datenschutzerklärung) und ein bisserl “Firlefanz”.

Diese Struktur musste ich nun auf Hubzilla übertragen.

Die Haupt-Navigation ganz oben lässt sich, wie hier bereits erläutert, sehr gut mit einer Bootstrap-Navbar realisieren. Diese sollte und müsste aber die eigentliche Navigationsleiste von Hubzilla auf den für Blog-Besucher zugänglichen Seiten einheitlich ersetzen. Es soll ja keine Web-Präsenz werden, die irgendwie innerhalb des Sozialen Netzwerks von Hubzilla wie eine embedded Seite dargestellt wird, sondern um eine Web-Präsenz, die als solche erscheint und die lediglich intern von Hubzilla “angetrieben” wird.

Für die App-Ansichten ist das Template “doubleright” das passende für die Dampfdruck-Presse. Hier muss man nur die gewünschten Blöcke und Widgets in die rechte Seitenleiste schieben und im Quelltext die Bootstrap Navar in den Bereich “nav” eintragen. Und für die Webseiten ist das Standard-Layout derzeit am besten geeignet, wobei man dort die vorhandene linke Seitenleiste einfach leer lässt.

Der Footer-Bereich “footer” von Hubzilla ist für das beabsichtigte Layout leider ungeeignet, weil er als schwebendes Overlay und nicht über die gesamte Seitenbreite angezeigt wird. Hier wird der Footer einfach als unterstes Element in den Inhaltsbereich eingefügt.

Abweichend von der DDP_WP enthält der Footer bei der Dampfdruck-Presse unter Hubzilla (ich nenne diese künftig nur noch DDP_HZ) lediglich den Hinweis, mit welchem System sie betrieben wird. Die Links zu Impressum und Datenschutz bringe ich in einem extra Block jeweils in der Seitenleiste auf allen App-Ansichten und im Webseiten-Layout unter.

In der DDP_HZ nenne ich den Block für die Navigationsleiste “menubar”, den Block für den Footer “footer1” und den Block für eben erwähnte Seitenleisten-Menü heißt “plinks”.

Außerdem werde ich noch einen Block mit einem grafischen Statement zum Thema der Webseite erstellen, welches den Namen “statement” erhält. Und schließlich soll an oberster Stelle der rechten Seitenleiste die kurze Profilkarte des Kanals angezeigt werden.

Damit sieht das Webseiten-Layout mit dem Namen “ddpbaselayout” so aus:

[region=nav]
[block]menubar[/block]

[/region]
[region=aside]
[/region]

[region=content]
$content
[block]footer1[/block]

[/region]
[region=right_aside]
[widget=profile][/widget]
[block]plinks[/block]
[block]statement[/block]

[/region]

Nun müssen nur noch die Layouts für die in der DDP_HZ verwendeten App-Ansichten “Artikel”, “Kanal” und “Profil” entsprechend mit dem PDL-Editor angepasst werden.

Für jede Ansicht wird das Template “doubleright” ausgewählt.

Für die Artikel-Ansicht sieht das dann so aus:

Hier sind, zusätzlich zu den im Webseiten-Layout vorhandenen Elemente der rechten Seitenleiste, noch die Widgets “Articles Categories”, welches anklickbare Links zur Filterung von Kategorien bietet, und “Tag Cloud Wall” für eine Tag-Cloud der verwendeten Hashtags eingefügt.

Unter dem “Inhalt der Hauptseite” wurde der Block “footer1” eingefügt.

Der PDL-Editor erlaubt das grafische Bearbeiten der Navigationsleiste nicht. Diese ist bei Modulen grundsätzlich mit der Hubzilla-Navigationsleiste vorbelegt, muss also nicht extra angegeben werden.

Um nun aber diese Navigationsleiste mit der eigenen zu überschreiben, öffnet man im PDL-Editor den Quelltexteditor “Source” und fügt ganz oben [region=nav] [block]menubar[/block] [/region] ein:

[template]doubleright[/template]
[region=nav]
[block]menubar[/block]

[/region]
[region=aside]

[/region]
[region=content]
$content
[block]footer1[/block]

[/region]
[region=right_aside]
[widget=profile][/widget]
[widget=articles_categories][/widget]
[block]plinks[/block]
[widget=tagcloud_wall][var=limit]24[/var][/widget]
[block]statement[/block]

[/region]

Die Profil-Ansicht wird so konfiguriert:

Auch hier muss über den Quelltexteditor wieder die “menubar” in die Nav-Region eingefügt werden.

Für die Kanalansicht sieht die PDL-Datei bezüglich des Footers etwas anders aus:

Hier wurde der Block “footer1” nicht unter den Inhaltsbereich gepackt, sondern zuunterst in die rechte Seitenleiste. Der Grund dafür ist, dass es bei Kanal zunächst einmal kein “Ende” des Inhaltsbereichs gibt, unter welchem dann der Footer zu sehen wäre. Das Ende ist erst erreicht, wenn man bis zum ersten Posting des Kanals durchgescrollt hat. Das ist für einen präsenten Footer schlicht ungeeignet.

Und natürlich muss auch hier wieder der Quelltext-Editor für die Navigationsleiste bemüht werden.

Die Download-Seite für eBooks, welche ich anbiete öffnet über Links den jeweiligen öffentlich zugänglichen Ordner der kanaleigenen Cloud, wo die Dateien liegen. Damit wird also auch die Ansicht Cloud geöffnet, die ebenfalls angepasst werden muss:

Auch hier darf nicht vergessen werden, die Navigationsleiste im Quelltext-Editor hinzuzufügen.

Damit sind die Arbeiten am Layout für die DDP_HZ erst einmal abgeschlossen.