Navigation mit BBEdit

Ich schreibe diese Webseite ganz altmodisch ohne ein CMS (wie zum Beispiel Wordpress), sondern nur mit HTML, CSS, ein bisschen JavaScript und vor allem BBEdit. Wenn man so spartanisch vorgeht, hat man einerseits viele Freiheiten und kann nach Lust und Laune experimentieren, aber dafür muss man andere Sachen, die sonst mitgeliefert werden, neu erfinden.

Das Navigationsmenü

Ich möchte oben im Navigationsmenü immer gerne anzeigen, in welchem Abschnitt der Seite man sich gerade befindet. Dafür verwende ich etwa folgenden Code:

<nav>
<ul>
<li id="home"><a href="../index.html">Start</a></li>
<li id="blog"><a href="../blog/index.html">Blog</a></li>
<li id="simonmarius"><a href="../simonmarius/timeline.html">Simon Marius</a></li>
<li id="info"><a href="../info/index.html">Info</a></li>
</ul>
</nav>

Wie man sieht, haben alle Einträge in der Liste eine eindeutige id. Um jetzt den passenden Eintrag im Navigationsmenü zu unterstreichen reicht eine einfache Deklaration in CSS:

nav li#blog a
{
    text-decoration-line: underline;
}

Entscheidend an dieser Stelle ist, dass li#blog durch li#home, li#simonmarius oder info ersetzt werden muss, je nachdem in welchen Teil der Webseite sich eine Datei befindet. D.h. jede Seite muss eine angepasste Version dieser Deklaration enthalten.

Organisation mit BBEdit

Ich möchte aber nicht in jeder Datei so eine angepasste Deklaration eintragen. Das geht nämlich immer nur solange gut, bis man da eine kleine Änderung an der Deklaration vornehmen möchte, denn dann muss man jede Datei anfassen und das Gejammere ist dementsprechend groß.

Also verwende ich den #bbinclude Mechanismus, um ein vorgefertigtes Codeschnipsel in den Kopf der HTML Datei einzubauen:

<!-- #bbinclude "head.inc" #section#="blog" -->
<style type="text/css">
nav li#blog a
{
    text-decoration-line: underline;
}
</style>
<!-- end bbinclude -->

Das funktioniert in etwa so:

Die Anweisung #bbinclude sorgt dafür, dass BBEdit an dieser Stelle den Inhalt der Datei head.inc einfügt.
Zusätzlich kann man noch Parameter angeben, hier wird #section# auf "blog" gesetzt. Das ist wichtig, weil ich hier angeben muss welcher Eintrag im Navigationsmenu unterstrichen werden soll.
Wenn man Änderungen in head.inc vorgenommen hat, dann kann kann BBEdit nun alle Dateien, die head.inc verwenden, in einem Aufwasch aktualisieren.

Die Datei head.inc sieht dafür so aus:

<style type="text/css">
nav li##section# a
{
    text-decoration-line: underline;
}
</style>

Innerhalb von head.inc wird also der Platzhalter #section# durch den oben bei #bbinclude angegeben Wert "blog" ersetzt.