Das Hubzilla-Blog verfeinert
So sah die erste Version meines Blogs Dampfdruck-Presse mit Hubzilla aus:
Inzwischen sie das Blog so aus:
Da hat sich also so einiges getan und ich möchte hier zeigen, wie man ein Blog mit den CMS-Fähigkeiten von Hubzilla so konfigurieren kann, dass der Unterbau, nämlich Hubzilla, vor den Besuchern insofern verborgen wird, dass sie keinen direkten Zugriff auf die Hubzilla-Oberfläche bekommen.
Der erste Punkt ist die Menüleiste. Diese war zuvor als einfaches horizontales HTML-Menü erstellt worden.
Nun ist es so, dass Hubzilla selbst in seiner Darstellung auf dem HTML-Framework Bootstrap5 basiert. Dieses ist also schon für jeden Kanal vorhanden und sorgt für die Gestaltung der Seiten von Hubzilla. Und so bietet es sich an, Bootstrap5 auch für die Gestaltung des Blogs zu nutzen.
Also habe ich die bisherige Menüleiste durch eine Bootstrap-Navigationsleiste ersetzt:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="https://hub.hubzilla.hu/hq">
<img src="https://hub.hubzilla.hu/cloud/dampfdruckpresse/misc/navlogo.png" alt="Avatar Logo">
</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://hub.hubzilla.hu/articles/dampfdruckpresse">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://hub.hubzilla.hu/channel/dampfdruckpresse">Kanal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://hub.hubzilla.hu/page/dampfdruckpresse/diys">DIY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://hub.hubzilla.hu/page/dampfdruckpresse/wissenswert">Wissenswertes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://hub.hubzilla.hu/page/dampfdruckpresse/aboutddp">Über</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://hub.hubzilla.hu/page/dampfdruckpresse/wlinks">Links</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://hub.hubzilla.hu/profile/dampfdruckpresse">Profil</a>
</li>
</ul>
</nav>
Diese Navigationsleiste nun einfach über dem Inhaltsbereich einzubauen sieht aber auch nicht besonders schick aus und es bleibt dann trotzdem die Hubzilla-Navigationsleiste ganz oben vorhanden, über welche Besucher auch System-Apps nutzen können.
Die eigene Navigationsleiste wäre besser untergebracht, wenn sie die hubzilla-eigene ersetzen könnte.
Und das ist auch einfach zu realisieren.
Im Layout für die Webseiten des Blog muss der Block mit der Navigationsleiste in die Region “nav” eingefügt werden:
[region=banner]
[widget=cover_photo][/widget]
[/region]
[region=nav]
[block]menubar[/block]
[/region]
[region=aside]
[widget=fullprofile][/widget]
[widget=common_friends][/widget]
[block]plinks[/block]
[block]statement[/block]
[/region]
[region=content]
$content
[block]footer1[/block]
[/region]
[region=right_aside]
[/region]
Damit wird die Navigationsleiste von Hubzilla auf allen eigenen Webseiten (Impressum, Datenschutz, Wissenswertes etc.) durch die eigene ersetzt.
Der Kern des Blogs ist aber die App “Artikel”. Und auf System-Apps wirkt sich unser Webseiten-Layout nicht aus. Betroffen sind bei der Dampfdruck-Presse die Module “Artikel”, “Kanal” und “Profil”, die über die Navigationsleiste für Besucher erreichbar sind.
Um in diesen Modulen die Navigationsleiste durch die eigene zu ersetzen, muss man den PDL-Editor bemühen. Dort wählt man das entsprechende Modul und muss dort die Quelltext-Ansicht öffnen.
Ich habe für die Dampfdruck-Presse dort einfach ganz oben im Quelltext
[region=nav]
[block]menubar[/block]
[/region]
eingetragen und das jeweils mit “APPLY” übernommen.
Nun erscheint auch bei den Hubzilla-Apps nur noch die eigene Navigationsleiste und der Unterbau bleibt dem Besucher damit verborgen.
Für mich als Betreiber ergibt sich aber ein kleiner Nachteil. Sobald ich z.B. die App “Artikel” aufrufe, um einen neuen Artikel zu erstellen, wird natürlich auch bei mir nur die neue Navigationsleiste angezeigt und ich kann nicht ohne weiteres zu anderen Hubzilla-Anwendungen zurückkehren. Ich bin durch die Leiste quasi auch “gefangen”.
Dafür gibt es aber auch eine Lösung. Ich habe das DDP-Logo in der Navbar einfach mit dem Link zum HQ hinterlegt (ist oben im Quelltext auch schon zu sehen). Damit gelange ich über einen quasi “unsichtbaren” Link wieder zu einer App, welche die Navigationsleiste von Hubzilla ausweist. Besucher hingegen, die zufällig auf das Logo klicken, landen auf einer leeren Hubzilla-Seite mit der Möglichkeit sich einzuloggen oder über das App-Menü die System-Apps auszuwählen. Die HQ Ansicht seht halt nur eingeloggten Nutzern zur Verfügung.
Das Blog wirkt jetzt mehr wie aus einem Guß und dass der Motor “Hubzilla” heißt, ist nur noch aus dem selbst erstellten Footer ersichtlich:
