Du bist hier:Start»Wissen»Webseite»Navigation

Navigation für statische Webseiten generieren

30.05.2014

Statische Webseiten sind in Zeiten von Wordpress, Joomla und Co außer Mode gekommen. Aufgrund der Komplexität und Sicherheitslücken dieser Content-Management-Systeme benutze ich trotzdem statische Webseiten. Ein Problem für statische Webseiten ist die Navigation, die für jede Seite angepaßt werden muß. Um die Navigation einer Webseite automatisch zu generieren habe ich ein kleines Ruby-Programm geschrieben, das ich hier vorstellen möchte.

Beispielprojekt

Das Beispielprojekt benutzt die gleiche Navigation wie auf dieser Webseite - oben als Menü zum Ausklappen und unten als komplette Sitemap zur Übersicht. Das Projekt habe ich nur unter dem Betriebssystem Linux getestet.

# download the demo project
wget http://torsten-traenkner.de/wissen/webseite/demoProject.tgz

# extract the project
tar xzvf demoProject.tgz

cd demoProject/
# display in the firefox webbrowser
firefox index.html &

Um zu sehen wie einfach jetzt eine neue HTML-Seite hinzugefügt werden kann, erweitern wir das Beispielprojekt um die Datei subchapter_313.html.

# in demoProject
cd demoProject/

# add a new web page
sed 's|1 1|1 3|g' sub_3/sub_31/subchapter_311.html > sub_3/sub_31/subchapter_313.html

# add this web page to the navigation index
sed -i 's|</menu>|  <entry>\n    <name>Sub Chapter 3</name>\n    <link>subchapter_313.html</link>\n  </entry>\n</menu>|g' sub_3/sub_31/.index.xml

# go through all html pages and update the navigation
find -iname '*html' -type f | xargs -i grep -H "navigationMenu" '{}' | sed 's|^\./\([^:]*\):.*|\1|' | while read filename; do ruby ../createNavigation.rb . "$filename" > /dev/shm/test.html; cp /dev/shm/test.html "$filename"; done

# display the index page in firefox again
firefox index.html &

Mit der ersten Streameditor-Anweisung wird die Webseite 311 zur Webseite 313 kopiert und im HTML-Dokument der Titel und die Überschrift geändert. Mit der zweiten sed-Anweisung wird die neue Webseite zu der Navigationsdatei .index.xml hinzugefügt. Die Ruby-Datei createNavigation.rb erzeugt eine unordered list - also eine unsortierte Liste - mit dem Navigationsmenü. Das ist die übliche Art wie heutzutage Navigationsmenüs erstellt werden. Der Stil des Navigationsmenüs wird in dem Beispielprojekt über die Datei style/general.css erzeugt. Diese CSS-Datei (Cascading Style Sheets) kann nach Belieben verändert werden. Die Datei .index.xml spielt bei dem Konzept der Navigation eine zentrale Rolle - deshalb ein kleiner Blick darauf:

<!-- .index.xml -->
<menu>
  <entry>
    <name>Sub Chapter 1</name>
    <link>subchapter_311.html</link>
  </entry>
  <entry>
    <name>Sub Chapter 2</name>
    <link>subchapter_312.html</link>
  </entry>
  <entry>
    <name>Sub Chapter 3</name>
    <link>subchapter_313.html</link>
  </entry>
</menu>

Zwischen den <link>-Tags steht der Dateiname der Webseite. Hier kann auch ein Unterverzeichnis mit Webseiten stehen. Zwischen den <name>-Tags befindet sich der Name, der in der Navigation angezeigt werden soll. Zusätzlich steht in der Datei demoProject/.index.xml noch der <defaultFile name="index.html" />. Für PHP-Projekte müßte hier <defaultFile name="index.php" /> eingetragen werden.

Das Ruby-Programm createNavigation.rb stelle ich unter der GPL Version 3 bereit. Da ich die Software nur für mich entwickelt und nicht getestet habe, erfolgt die Benutzung auf eigene Gefahr und ohne Gewähr. Viel Spaß beim Ausprobieren.

Letzte Änderung: 2014-05-30