Die Navigation

Was wäre eine Webseite ohne eine Navigation?

Es gibt unendlich viele Wege, die Besucher durch das Angebot im Webauftritt zu leiten. Bridgetown organisiert dies in einer Komponente.

Bereits in der Demo-Seite, die nach einer frischen Installation von Bridgetown angelegt wird, ist eine super-minimalistische Navigations-Komponente enthalten.

Der Aufruf

Die Navigation wird in der Vorlage /src/_layouts/default.erb aufgerufen.

<%= render Navbar.new  site: site  %>

Es wird eine Ruby-Methode initialisiert und der Parameter site übergeben.

Über den Parameter hat die Ruby-Methode Zugriff alle Konfiguratonsdateien im Ordner src/_data.

Die Konfiguration

Dort ist die Datei nav.yml abgelegt, in der die Elemente der Navigation im YAML-Format eingetragen werden.

---
# Einstellungen für die Navigationszeile
web: /www
automation: /automation
blog: /posts

In der Console kann überprüft werden wie Bridgetown auf die Daten zugreift:
bin/bt c

> site.data.nav
{
         "web" => "/www",                                                
  "automation" => "/automation",                                         
        "blog" => "/posts"                                               
}                           
> site.data.nav.web
"/www"

Bridgetown bietet einen Methodenaufruf um auf die Elemente der Yaml-Dateien zuzugreifen. Die Daten liegen als HashWithDotAccess-Objekte vor.

> site.data.nav.class
HashWithDotAccess::Hash < ActiveSupport::HashWithIndifferentAccess

Die Komponente

Bridgetown-Komponenten befinden sich im Verzeichnis /src/_components.

Initialisierung

Die Initialisierung der Komponente könnte einfacher nicht sein:

class Navbar < Bridgetown::Component
  def initialize **args
    args.each{ | k,v | instance_variable_set( "@#{k}", v ) }
  end
end

So werden die Komponenten gererisch Initialisiert. Alle übergebenen Parameter werden als Instanzvariable gespeichert.

Ausgabe

Bridgetown liest den Inhalt der gleichnamigen erb Datei ein. Die Ausgabe folgt dieser Struktur

<nav>                       # Achtung: Pseudocode 
  <sl-bar>
     @site.data.nav.each do | title, link |  
    <sl-bar-item>
      <a href="link"> title </a>
      </sl-bar>
  end
</nav>

Es wird eine Hierarchie von HTML-Elementen aufgebaut. Auf der Ebene der Elemente werden die Inhalte aus nav.yml ausgegeben.

Wie die Elemente dargestellt werden, wird über die CSS-Eigenschaften von nav, sl-bar und sl-bar-item gesteuert.

Verwendung

In der Markdown oder HTML-Datei wird die Komponente über

<%= render Navbar.new( site: site )  %> 

in den Textfluß eingefügt.