Blog-Navigation

Anschließend habe ich die Navigationsleiste für das Blog, also die gesamte Webpräsenz erstellt. Hierfür nutze ich die Navbar von Bootstrap5. Diese bietet, wie hier bereits beschrieben, etliche Vorteile gegenüber einem selbst erstellten horizontalen Menü.

Ich habe zunächst eine Logo-Grafik für das Blog erstellt:

Diese wird in der Navbar mit dem Link zum HQ hinterlegt, um mir selbst die Möglichkeit zu geben, aus der Webpräsenz “auszubrechen” und die Hubzilla-Navigationsleiste zurück zu bekommen.

Die DDP_HZ wird folgende Webseiten enthalten:

• “impressum”
• “datenschutz”
• “kontakt”
• “aboutddp” (“Über die DDP”)
• “koffein0” (Webseite mit Links zu den einzelnen Kapiteln der Koffein-Serie)
• “fasern0” (Webseite mit Links zu den einzelnen Kapiteln der Fasern-Serie)
• “hardware” (Langlebige Hardware - Serie auf einer einzelnen Webseite)
• “liquidsteuerspck” (der Liquidsteuer-Spickzettel)
• “wlinks” (Seite mit Link-Bannern zu verschiedenen Webseiten)
• “downloads” (Seite mit Download-Links)

Die Navigationsleiste “menubar” wird neben dem grafischen Logo

• einen Link zur Artikel-Ansicht (“Home”),
• einen Link zur Kanal-Ansicht (“Kanal)”,
• einen Pulldown-Menü Eintrag mit Links zur Koffein-, Fasern- und Hardware-Serie (“DIY”),
• einen Pulldown-Menü Eintrag mit dem Link zum Liquidsteuer-Spickzettel (“Wissenswertes”),
• einen Link zur About-Seite (“Über”),
• einen Link zur Link-Banner Seite (“Mehr…”) und
• einen Link zur Profilansicht (“Profil”)

enthalten.

Im Pulldown-Menü “DIY” sind noch weitere Einträge zu Serien enthalten, die erst später folgen und derzeit zur Home-Seite führen, enthalten.

Der Quelltext für die Navigationsleiste “menubar” sieht damit wie folgt aus:

<nav class="navbar navbar-expand-sm navbar-dark" style="background-color:#2a4861;">
  <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">DIY</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="https://hub.hubzilla.hu/page/dampfdruckpresse/koffein0">Koffein</a></li>
          <li><a class="dropdown-item" href="https://hub.hubzilla.hu/page/dampfdruckpresse/fasern0">Fasern</a></li>
          <li><a class="dropdown-item" href="https://hub.hubzilla.hu/articles/dampfdruckpresse">Aromen</a></li>
          <li><a class="dropdown-item" href="https://hub.hubzilla.hu/articles/dampfdruckpresse">Selbstmischen</a></li>
          <li><a class="dropdown-item" href="https://hub.hubzilla.hu/articles/dampfdruckpresse">Keulkulator</a></li>
          <li><a class="dropdown-item" href="https://hub.hubzilla.hu/page/dampfdruckpresse/hardware">Hardware</a></li>
        </ul>
      </li>       

      <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Wissenswertes</a>
       <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="https://hub.hubzilla.hu/page/dampfdruckpresse/liquidsteuerspck">Liquidsteuer-Spickzettel</a></li>
       </ul>
      </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">Mehr...</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://hub.hubzilla.hu/profile/dampfdruckpresse">Profil</a>
      </li>
    </ul>

</nav>

Der Quelltext des Blocks “plinks”, der ein einfaches vertikales Link-Menü ist, sieht so aus:

<p>★ <a href="https://hub.hubzilla.hu/page/dampfdruckpresse/impressum">Impressum</a></p>
<p>★ <a href="https://hub.hubzilla.hu/page/dampfdruckpresse/datenschutz">Datenschutz</a></p>
<p>★ <a href="https://hub.hubzilla.hu/page/dampfdruckpresse/kontakt">Kontakt</a></p>
<p>★ <a href="https://hub.hubzilla.hu/page/dampfdruckpresse/downloads">Downloads</a></p>

Und der Quelltext des Footer-Blocks “footer1” so:

<style>
  .my-container {
    /* lokale Variable‑Überschreibung nur innerhalb dieses Containers */
    --bs-link-color: #6eb7ff;
    --bs-link-hover-color: #68acf1;
  }
</style>

<div class="my-container" style="background-color:#2a4861; padding:10px; text-align:center;">
        <p style="color:#FFFFFF;margin:0;">Powered by <a href="https://hubzilla.org">Hubzilla</a> - the Social Networking CMS</p>
</div>

Hier musste ich eine Style-Definition vornehmen, weil der Hintergrund des Footers auf dunkelstahlblaue Farbe gesetzt wurde und die Standard-Farbe für Links (es wird ja zur Hubzilla-Projektseite verlinkt) nach meine Geschmack einen zu geringen kontrast zur Hintergrundfarbe besaß. Ich habe die Link-Farben (normal und hover) auf hellere Blautöne gesetzt.