Navigationsleiste ersetzen

Wenn Sie den Besuchern/Nutzern Ihrer Web-Präsenz Zugriff auf Hubzilla-Apps, wie z.B. die Artikel App einräumen, dann befindet sich am oberen Bildschirmrand die Navigationsleiste, wie si von Hubzilla erzeugt wird.

Das bedeutet, dass bei Redbasic links oben zwei Links zum Einloggen und Registrieren vorhanden sind. Auf der rechten Seite werden Apps, die für Besucher nutzbar sind, als Icons angezeigt, sofern Sie diese an die Navigationsleiste angepinnt haben, sowie das Symbol “⋮”, über welches Besucher das App-Menü mit den System-Apps nutzen können.

Einerseits signalisiert diese Optik dem Besucher, dass es sich um eine Präsenz handelt, die mit Hubzilla betrieben wird (sofern er dies erkennt), andererseits können Sie nicht wirklich beeinflussen, auf welche Seiten er besser keinen schnellen Zugriff haben sollte.

Betreiben Sie mit Hubzilla also beispielsweise eine Seite, die auch über einen Blog-Bereich verfügt, so bietet es sich an, für das Blog die App Artikel zu nutzen. Haben Sie auf Ihrer Landingpage und den anderen Webseiten Ihrer Präsenz nun im Bereich “nav” eine Bootstrap-Navbar integriert, können Sie einen Link zur Artikel-App dort einfügen. Leider ist es dann so, dass Ihre spezielle Navigationsleiste nach dem Öffnen der Aktikel-App nicht mehr angezeigt wird, sondern die Navigationsleiste von Hubzilla selbst (wie oben beschrieben).

Das ist einerseits ein Bruch in der Benutzerführung und andererseits auch damit verbunden, dass der Besucher damit auf Bereiche stößt, welche Sie für Ihn im direkten Zugriff nicht vorgesehen haben.

Deshalb sollten Sie in einem solchen Anwendungsfall die Standard-Navigationsleiste in der App “Artikel” durch ihre eigene ersetzen.

Das ist auch kein großer Aufwand. ich erkläre Ihnen jetzt, wie das ganz einfach umzusetzen ist und Sie dabei eine kleine Unzulänglichkeit in der Darstellung auch gleich umschiffen können.

Zuerst erstellen wir uns eine Navigationsleiste z.B. mit dem Namen “main_menu”

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="https://klacker.org/page/tutorial01/home"><img src="https://klacker.org/cloud/tutorial01/misc/tutlogo.png" alt="Logo" height="30" class="d-inline-block align-text-top"></a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item"><a class="nav-link text-white" href="https://klacker.org/page/tutorial01/home">Home</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="https://klacker.org/articles/tutorial01">Artikel</a></li>
      </ul>
    </div>
  </div>
</nav>

Diese Navigationsleiste fügen wir auch in das Layout “basis-layout1” für unsere Homepage in den nav-Bereich ein.

[region=nav]
[block]main_menu[/block]

[/region]
[region=aside]

[/region]
[region=content]
$content

[/region]
[region=right_aside]

[/region]

Nun erscheint die Navigationsleiste, wenn wir unsere Beispiel-Homepage aufrufen.

Damit diese Navigationsleiste nun auch in der App “Artikel” erscheint, müssen wir das Modul für diese App im PDL-Editor abändern. Nebenbei räumen wir auch (vorerst) die Seitenleisten auf.

Wir rufen den PDL-Editor auf und wählen im Menüpunkt “MODULES” das Modul “articles”. Weil ich es schön “aufgeräumt” haben möchte, sollen auch die Widgets “Album” (das wir kürzlich hinzugefügt haben, um es auszuprobieren), “Profile” (welches die Profilkarte anzeigt) und “Notifications” (zeigt Benachrichtigungen der Kanalaktivitäten an) entfernt werden. Dafür genügt ein Klick auf den jeweiligen Remove-Button. Das Widget “Articles Categories” lassen wir drin, denn das ist eine sinnvolle Angelegenheit zum Auffinden und Navigieren durch die Artikel.

Nun fällt auf, dass es in der GUI des PDL-Editors gar keinen Bereich für die Navigationsleiste gibt. Wir können den Standard aber trotzdem überschreiben. Dafür wählen wir im Menü den Punkt “SOURCE”, mit welchem sich der Quelltext-Editor für die Layout-Definition öffnet. Hier fügen wir ganz oben folgendes ein:

[region=nav]
[block]main_menu[/block]

[/region]

Ein Klick auf “APPLY” und die App “Artikel” sieht nun so aus:

Unzulänglichkeit Nr. 1 umschiffen

Wenn Sie nun als eingeloggter Kanalbesitzer auf die Webseite oder die App “Artikel” wechseln, sind Sie quasi auch in der Welt der eigenen Navigationsleiste “gefangen”. Es fehlt dort der Zugriff auf die angepinnten Apps und das App-Menü, so dass Sie nicht einfach schnell beispielsweise zum PDL-Editor wechseln können, um da noch mehr anzupassen. Das, was der Sinn der Sache für nicht eingeloggte Besucher ist, fällt uns hier also selbst auf die Füße.

Aber das ist kein Problem. Wir nutzen einfach den Block unserer Menüleiste und hinterlegen das Logo mit dem Link zum “HQ” (es geht auch jede andere Ansicht, die nur eingeloggten Nutzern zur Verfügung steht, HQ bietet sich aber an):

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="https://klacker.org/hq"><img src="https://klacker.org/cloud/tutorial01/misc/tutlogo.png" alt="Logo" height="30" class="d-inline-block align-text-top"></a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item"><a class="nav-link text-white" href="https://klacker.org/page/tutorial01/home">Home</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="https://klacker.org/articles/tutorial01">Artikel</a></li>
      </ul>
    </div>
  </div>
</nav>

Hier ist in der vierten Zeile nun als Ziel-URL für das Logo-Bild der Link zum HQ hinterlegt.

Wenn wir nun selbst, als eingeloggter Kanalbesitzer auf die Logo-Grafik klicken, landen wir beim HQ mit der üblichen Hubzilla-Navigationsleiste.

Besucher hingegen landen auf einer leeren Seite, denn sie verfügen ja über kein “HQ”.

Unzulänglichkeit Nr. 2 umschiffen

Je nachdem wie sie Ihr Theme konfiguriert haben, kann es sein, dass der Inhaltsbereich der Artikel-App “zu weit oben” ansetzt. Damit wird er dann oben teilweise abgeschnitten, was optisch nicht wirklich professionell aussieht.

Eingeloggt:

Nicht eingeloggter Besucher:

Dieses Problem lässt sich beseitigen, indem wir in der nav-Region direkt unter den Block mit der Navigationsleiste einen zusätzlichen Abstandhalter-Block mit der Hintergrundfarbe einfügen.

Block “nav-spacer”:

<style>
.spacer { 
  background-color: var(--hz-body-bg);
}
</style>
<div class="spacer">
 
</div>

nav-Region in der PDL-Datei des Moduls “articles”:

[region=nav]
[block]main_menu[/block]
[block]nav-spacer[/block]

[/region]

Nun wird es korrekt dargestellt.

Eingeloggt:

Nicht eingeloggter Besucher: