Generator für statische Webseiten inHaskell mit Pandoc

38
Bachlorarbeit Generator für statische Webseiten in Haskell mit Pandoc Zur Erlangung des akademischen Grades eines Bachlor of Science - Informatik - Fakultät Informatik Referent: Prof. Dr. Oliver Braun Korreferent: Dipl. Math. Michael Otto eingereicht von: David Hahn Matr.-Nr. 280346 Martin-Luther-Ring 38 98574 Schmalkalden Schmalkalden, den 22. August 2012

Transcript of Generator für statische Webseiten inHaskell mit Pandoc

Page 1: Generator für statische Webseiten inHaskell mit Pandoc

Bachlorarbeit

Generator für statische Webseiten inHaskell mit Pandoc

Zur Erlangung des akademischen Grades einesBachlor of Science- Informatik -

Fakultät InformatikReferent: Prof. Dr. Oliver BraunKorreferent: Dipl. Math. Michael Otto

eingereicht von:David HahnMatr.-Nr. 280346Martin-Luther-Ring 3898574 Schmalkalden

Schmalkalden, den 22. August 2012

Page 2: Generator für statische Webseiten inHaskell mit Pandoc

Inhaltsverzeichnis

1 Einleitung 11.1 Zielsetzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Statische Webseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Grundlagen 32.1 Haskell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2 Pandoc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.3 Markdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.3.1 Kopfzeilen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.3.2 Zitate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.3.3 Betonung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.3.4 Listen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.3.5 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.3.6 Bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.3.7 Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.3.8 Inline-HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.3.9 Backslash-Maskierung . . . . . . . . . . . . . . . . . . . . . . 11

3 Vorbetrachtung 13

4 Implementierung 164.1 Datentypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.2 Main-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.3 Create-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184.4 getSiteConfig-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . 204.5 getPageConfig-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . 214.6 renderHtmlPage-Funktion . . . . . . . . . . . . . . . . . . . . . . . . 224.7 buildSite-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234.8 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

5 Anleitung zur Generierung von Webseiten 265.1 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265.2 Erstellung der Ordnerstruktur . . . . . . . . . . . . . . . . . . . . . . 265.3 Verfügbare Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . 275.4 Inhalte hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285.5 HTML-Dateien erstellen . . . . . . . . . . . . . . . . . . . . . . . . . 29

6 Zusammenfassung und Ausblick 30

David HahnII

Page 3: Generator für statische Webseiten inHaskell mit Pandoc

Inhaltsverzeichnis Fachhochschule Schmalkalden SS 2012

Eidesstattliche Erklärung 35

David HahnIII

Page 4: Generator für statische Webseiten inHaskell mit Pandoc

1 EinleitungDas Internet ist heutzutage nicht mehr wegzudenken. Es existieren mehrere hundertMillionen Webseiten im Internet. Täglich kommen neue Seiten hinzu oder verschwin-den aus dem Internet. Der allgemeine Trend geht aber in die Richtung, dass immermehr Webseiten im Internet abgerufen werden können.1 Durch die zahlreichen An-bieter und den geringen Kosten, hat nahezu jeder die Möglichkeit sich im Internetzu präsentieren. Aber nicht jeder hat die Kenntnisse eine solche Seite selber zu er-stellen. Daher soll im Rahmen dieser Bachelorarbeit ein Generator programmiertwerden, mit welchem ein Anwender mit wenig Vorkenntnissen schnell und einfacheine statische Webseite erstellen kann.

Abbildung 1.1: Anzahl der Webseiten von August 1995 bis August 20122

1.1 ZielsetzungEs soll ein Generator entstehen mit welchem es möglich ist, einfach und schnellstatische Webseiten zu erstellen. Dabei sollen keine HTML-Vorkenntnisse benötigtwerden. Die Inhalte der Webseite werden mit Markdown beschrieben. Gespeichertwerden diese in Textdateien, welche mit einem beliebigen Texteditor verändert wer-den können. Der Generator übernimmt mit Hilfe von Pandoc das Übersetzten in

1Vgl: http://www.netcraft.com2Quelle: http://www.netcraft.com

David Hahn Seite 1 von 35

Page 5: Generator für statische Webseiten inHaskell mit Pandoc

1. Einleitung Fachhochschule Schmalkalden SS 2012

HTML. Außerdem sollen verschiedene Templates zur Verfügung stehen. Über dieKommandozeilen werden die Webseiten erstellt und die HTML-Dateien erzeugt.

1.2 Statische WebseitenEs gibt zwei Arten von Webseiten: statische und dynamische. Der größte unterschiedist, dass statische Webseiten unverändert vom Server zum Benutzer übertragen wer-den. Dynamische Webseiten werden erst beim Aufruf der Seite am Webserver er-zeugt. Daher sind statische Webseiten sehr sicher und bauen sich bei Aufruf sehrschnell auf. Diese Art von Webseiten eignen sich hervorragend für Seiten, derenInhalte sich selten oder nie ändern. Denn bei jeder Änderung muss die betreffendeSeite manuell gepflegt und danach erneut auf den Webserver übertragen werden. Beidynamischen Webseiten werden die Inhalte über ein Content Management System(CMS)3 gepflegt. Ein weiterer Vorteil von statischen Webseiten ist der Preis. Einestatische Webseite kostet nicht so viel, wie eine dynamische Seite.

3Mit einem CMS können die Inhalte einer Webseite mittels einer benutzerfreundlichen Oberflächegepflegt werden. Es ermöglicht die Pflege und Aktualisierung der Inhalte durch verschiedenePersonen

David Hahn Seite 2 von 35

Page 6: Generator für statische Webseiten inHaskell mit Pandoc

2 GrundlagenIn dem Kapitel Grundlagen werden die Themengebiete die in dieser Bachelorarbeitbehandelt wurden näher beschrieben. Dabei wird auf Haskell, Pandoc und Mark-down eingegangen.

2.1 HaskellHaskell ist eine rein funktionale Programmiersprache, welche zu einer Untergruppeder deklarativen Sprachen gehört. Bei funktionalen Programmiersprachen handeltes sich um Programme, die ausschließlich aus Funktionen bestehen. Dadurch kön-nen Nebenwirkungen, wie sie aus imperativen Programmiersprachen bekannt sind,vermieden werden. Eine Nebenwirkung von imperativen Programmiersprachen, da-zu zählen zum Beispiel C++ und Java, ist der Seiteneffekt. Haskell hat aber nochweitere Vorteile: So können Funktionen höherer Ordnung verwendet werden, waseine starke Wiederverwendung von Programmteilen ermöglicht. Die Abwesenheitvon Seiteneffekten führt zur Reinheit der Sprache. Dadurch wird das Beweisen überProgrammeigenschaften erleichtert. Außerdem bietet Haskell ein starkes Typsystem,wodurch viele Fehler bereits durch den Compiler erkannt werden.1

2.2 PandocPandoc ist ein Programm zur Konvertierung von Dokumenten. Damit lassen sichTextdateien, die in einer Auszeichnungssprache2 geschrieben sind, in ein anderesFormat umwandeln. Pandoc versteht eine Reihe von verschiedenen Sprachen zurEingabe, wie zum Beispiel Markdown, HTML oder LaTeX. Zur Ausgabe stehenviele weitere Formate zur Verfügung (siehe Tabelle 2.1).Dadurch ist es möglich einen Text, der in der Auszeichnungssprache Markdown ge-schrieben wurde, als Blog in HTML zu veröffentlichen, einen Wikipedia-Artikel zuerstellen und den Text in ein Word-Dokument umzuwandeln. Dies geschieht allesmit wenigen Befehlen.

1Vgl. http://www.infosun.fim.uni-passau.de/cl/lehre/funcprog05/wasistfp.html2Eine Auszeichnungssprache (englisch: Markup Language) dient zur Beschreibung des Inhaltseines Dokumentenformates. Durch eine Auszeichnungssprache können beliebigen Textelementenauf deklarative Weise Eigenschaften zugewiesen werden, wodurch deren Bedeutung ausgedrücktwerden kann.

David Hahn Seite 3 von 35

Page 7: Generator für statische Webseiten inHaskell mit Pandoc

2. Grundlagen Fachhochschule Schmalkalden SS 2012

Formatname Ausgabe Eingabemarkdown X XreStructuredText X XTextile X XHTML X XLaTeX X XHTML5 XConTeXt XWord docx XDocBook XGroff man XRTF XOpenDocument XML XODT XTexinfo XOrg-mode XEPUB XSlidy XS5 Xdzslides XBeamer XAsciiDoc XMediaWiki X

Tabelle 2.1: Von Pandoc unterstützte Formate

Da Pandoc in Haskell geschrieben wurde, steht es als Haskell-Bibliothek zu Ver-fügung. Dadurch ist es möglich, mit wenigen Befehlen aus einem Haskell-Programmein Dokument umzuwandeln. Das Befehlszeilenprogramm ist für Windows, Mac OSX und Linux verfügbar.Das folgende Beispiel zeigt eine Konvertierung von Markdown (Listing 2.2) zuHTML (Listing 2.3). Dies geschieht mit dem folgenden Befehl über das Befehls-zeilenprogramm:

pandoc -f markdown pandoc.text -t html -o pandoc.html

Die Option -f gibt dabei das Input-Format an. Danach folgt die Datei, welche kon-vertiert werden soll. Mit -t wird das Ausgabeformat festgelegt und mit -o die Aus-gabedatei.Ein Haskell-Programm, welches diese Datei umwandelt, könnte folgendermaßen aus-sehen:

David Hahn Seite 4 von 35

Page 8: Generator für statische Webseiten inHaskell mit Pandoc

2. Grundlagen Fachhochschule Schmalkalden SS 2012

Listing 2.1: Haskell-Programm zum umwandeln mit Pandocmodule Main where

import Text.Pandoc

markdownToHTML :: String → StringmarkdownToHTML string =

let markdown = readMarkdown defaultParserState stringwriteHtmlString defaultWriterOptions markdown

konvertiere :: FilePath → IO ()konvertiere datei = do

text ← readFile dateilet convertedText = markdownToHTML textwriteFile "output.html" convertedText

Der Funktion konvertiere wird der Pfad zu Datei übergeben, welche in HTML um-gewandelt soll. Zuerst wird dann der Inhalt der Datei eingelesen und mittels derFunktion markdownToHTML von Markdown in HTML konvertiert. Zuletzt wirddann der konvertierte Text in die Datei output.html geschrieben.

Listing 2.2: Ausgangsform Markdown# Pandoc

## Was ist Pandoc

Pandoc ist ein Programm zur Konvertierung von Dokumenten.Damit lassen sich Textdateien, die in einerAuszeichnungssprache geschrieben sind, in ein anderesFormat umwandeln. Pandoc wurde in [Haskell] geschrieben.

[Haskell]: http://haskell.org

Listing 2.3: Konvertiert in HTML<h1 id="pandoc">Pandoc</h1><h2 id="was-ist-pandoc">Was ist Pandoc</h2><p>Pandoc ist ein Programm zur Konvertierung von Dokumenten. Damit

lassen sich Textdateien, die in einer Auszeichnungssprachegeschrieben sind, in ein anderes Format umwandeln. Pandoc wurdein <a href="http://haskell.org">Haskell</a> geschrieben.</p>

David Hahn Seite 5 von 35

Page 9: Generator für statische Webseiten inHaskell mit Pandoc

2. Grundlagen Fachhochschule Schmalkalden SS 2012

2.3 MarkdownMarkdown ist eine vereinfachte Auszeichnungssprache die leicht lesbar und schreib-bar ist. Um dies zu gewährleisten besteht die Syntax von Markdown nur aus Zeichen,die ihrem Aussehen ihrer Bedeutung entsprechen. So sehen Listen in Markdown wieListen aus oder Zitate-Blöcke wie zitierte Textpassagen, wie sie aus E-Mails bekanntsind. E-Mails waren daher auch die größte Inspirationsquelle für die Entwicklung desMarkdowns Syntax.Im Folgenden werden die verschiedenen Möglichkeiten beschrieben mit MarkdownText auszuzeichnen. Außerdem wird der dazugehörige HTML-Code gezeigt.

2.3.1 Kopfzeilen

In Markdown gibt es zwei Arten Kopfzeilen zu definieren. So können Überschriftenmit Gleichheitszeichen (erste Ebene) und Bindestrichen (zweite Ebene) unterstri-chen werden.

Listing 2.4: Überschriften in Markdown Methode 1Dies ist ein H1===============

Dies ist ein H2---------------

Listing 2.5: Überschriften Methode 1 in HTML<h1>Dies ist ein H1</h1>

<h2>Dies ist ein H2</h2>

Mit der zweiten Möglichkeit sind bis zu sechs Ebenen möglich. Dazu werden 1-6Rauten-Zeichen vor die Überschrift gesetzt, wobei die Anzahl der Rauten-Zeichendie Ebene entspricht.

Listing 2.6: Überschriften in Markdown Methode 1# Dies ist ein H1

## Dies ist ein H2

###### Dies ist ein H6

David Hahn Seite 6 von 35

Page 10: Generator für statische Webseiten inHaskell mit Pandoc

2. Grundlagen Fachhochschule Schmalkalden SS 2012

Listing 2.7: Überschriften Methode 2 in HTML<h1>Dies ist ein H1</h1>

<h2>Dies ist ein H2</h2>

<h6>Dies ist ein H2</h6>

2.3.2 Zitate

Zitate werden in Markdown mit dem Zeichen > gekennzeichnet, wie es auch ausE-Mails bekannt ist. Dabei können Zitate verschachtelt werden. Außerdem ist esmöglich Kopfzeilen, Listen und Code-Blöcke in Zitat-Blöcken unterzubringen.

Listing 2.8: Zitate in Markdown> # Dies ist die erste Zitat-Ebene.>> > Dies ist ein verschachteltes Zitat.>> 1. Dies ist der erste Listenpunkt.> 2. Dies ist der zweite Listenpunkt.

Listing 2.9: Zitate in HTML<blockquote>

<h1>Dies ist die erste Zitat-Ebene.</h1><blockquote>

<p>Dies ist ein verschachteltes Zitat.</p></blockquote><ol style="list-style-type: decimal">

<li>Dies ist der erste Listenpunkt.</li><li>Dies ist der zweite Listenpunkt.</li>

</ol></blockquote>

2.3.3 Betonung

Um in Markdown einen Text fett oder kursiv zu schreiben, stehen die beiden Zei-chen Sternchen (*) und Unterstrich (_) zur Verfügung. Wird der Text mit einemSternchen oder Unterstrich umschlossen, wird der Text Kursiv geschrieben. Bei zweiZeichen Fett und bei drei Zeichen Fett und Kursiv.

Listing 2.10: Betonungen in MarkdownEinige dieser Worte sind ∗kursiv geschrieben∗Einige dieser Worte sind _ebenfalls kursiv geschrieben_

Einige dieser Worte sind ∗∗fett geschrieben∗∗

David Hahn Seite 7 von 35

Page 11: Generator für statische Webseiten inHaskell mit Pandoc

2. Grundlagen Fachhochschule Schmalkalden SS 2012

Einige dieser Worte sind __ebenfalls fett geschrieben__

Einige dieser Worte sind ∗∗∗fett und kursiv geschrieben∗∗∗Einige dieser Worte sind ___ebenfalls fett und kursiv geschrieben___

Listing 2.11: Betonungen in HTML<p>Einige dieser Worte sind <em>kursiv geschrieben</em></p><p>Einige dieser Worte sind <strong>fett geschrieben</strong></p><p>Einige dieser Worte sind <strong><em>fett und kursiv geschrieben</

em></strong></p>

2.3.4 Listen

Markdown unterstützt sortierte (nummerierte) und unsortierte (Aufzählungen) Lis-ten. Für unsortierte Listen können die Zeichen Sternchen (*), Plus (+) und Bin-destrich (-) verwendet werden. Alle drei Zeichen stellen die gleiche Liste dar. Dieeinzelnen Zeichen können sogar kombiniert werden.

Listing 2.12: Unsortierte Listen in Markdown∗ Schwarz∗ Rot∗ Gold

+ Schwarz+ Rot+ Gold

- Schwarz- Rot- Gold

Listing 2.13: Unsortierte Listen in HTML<ul>

<li>Schwarz</li><li>Rot</li><li>Gold</li>

</ul>

Um sortierte Listen darzustellen, werden Zahlen verwendet. Dabei gibt die ersteZahl die Startzahl an, alle anderen Zahlen haben keine Auswirkung.

Listing 2.14: Sortierte Listen in Markdown1. Schwarz2. Rot3. Gold

David Hahn Seite 8 von 35

Page 12: Generator für statische Webseiten inHaskell mit Pandoc

2. Grundlagen Fachhochschule Schmalkalden SS 2012

5. Schwarz2. Rot9. Gold

Listing 2.15: Sortierte Listen in HTML<ol style="list-style-type: decimal">

<li>Schwarz</li><li>Rot</li><li>Gold</li>

</ol>

<ol start="5" style="list-style-type: decimal"><li>Schwarz</li><li>Rot</li><li>Gold</li>

</ol>

2.3.5 Links

Markdown unterstützt zwei Arten von Links: Inline und Referenzen. In beiden Artenwerden eckigen Klammern benutzt, um den Link-Text zu markieren.Bei Inline-Links folgt hinter der schließenden eckigen Klammer die URL in normalenrunden Klammern. Optional kann innerhalb der runden Klammern noch ein Titelfür den Link definiert werden. Dieser wird in Anführungszeichen gesetzt.

Listing 2.16: Inline-Links in MarkdownDies ist ein [Beispiel](http://beispiel.com/).Dies ist ein [Beispiel](http://beispiel.com/ "Optionaler Titel").

Listing 2.17: Inline-Links in HTML<p>Dies ist ein <a href="http://beispiel.com/">Beispiel</a>. Dies ist

ein <a href="http://beispiel.com/" title="Optionaler Titel">Beispiel</a>.</p>

Bei Referenz-Links wird statt der URL in runden Klammern, ein beliebiger Bezeich-ner in eckigen Klammern geschrieben. Irgendwo im Dokument wird dann der Linkdefiniert. Diese Variante ist vorteilhaft, wenn der Link mehrmals im Dokument be-nutzt wird.

Listing 2.18: Referenz-Links in MarkdownDies ist ein [Beispiel][bsp]. Die URLs werden irgendwo im[Dokument][doc] definiert.

David Hahn Seite 9 von 35

Page 13: Generator für statische Webseiten inHaskell mit Pandoc

2. Grundlagen Fachhochschule Schmalkalden SS 2012

[bsp]: http://beispiel.com/ "Optionaler Titel"[doc]: http://document.com/

Listing 2.19: Referenz-Links in HTML<p>Dies ist ein <a href="http://beispiel.com/" title="Optionaler

Titel">Beispiel</a>. Die URLs werden irgendwo im <a href="http://document.com/">Dokument</a> definiert.</p>

2.3.6 Bilder

Die Syntax für Bilder ist der für Links ziemlich ähnlich. Es wird lediglich ein Aus-führungszeichen vorangestellt.

Listing 2.20: Bilder in Markdown![Alternativer Text](/pfad/zum/bild.jpg)![Alternativer Text](/pfad/zum/bild.jpg "Optionaler Titel")

![Alternativer Text][bild]

[bild]: /pfad/zum/bild.jpg "Optionaler Titel"

Listing 2.21: Bilder in HTML<p><img src="/pfad/zum/bild.jpg" alt="Alternativer Text" /></p><p><img src="/pfad/zum/bild.jpg" title="Optionaler Titel" alt="

Alternativer Text" /></p>

<p><img src="/pfad/zum/bild.jpg" title="Optionaler Titel" alt="Alternativer Text" /></p>

2.3.7 Code

Um einen Code-Bereich zu markieren, wird er mit Backtick-Zeichen ()̀ umschlos-sen. In Code-Bereichen werden das kaufmännische Und so wie spitze Klammern alsHTML-Entitiy kodiert.

Listing 2.22: Code in MarkdownIn Markdown wird ‘Code‘ mit dem Backtick-Zeichen definiert.

Listing 2.23: Code in HTML<p>In Markdown wird <code>Code</code> mit dem Backtick-Zeichen

definiert.</p>

David Hahn Seite 10 von 35

Page 14: Generator für statische Webseiten inHaskell mit Pandoc

2. Grundlagen Fachhochschule Schmalkalden SS 2012

2.3.8 Inline-HTML

Da nicht jede Formatierung in Markdown machbar ist, kann einfach HTML verwen-det werden. Dabei ist es nicht nötig HTML zu markieren. Es kann einfach in denText geschrieben werden.Um zum Beispiel eine Tabelle in einen Markdown-Text einzubauen, werden einfachdie HTML-Tags benutzt:

Listing 2.24: Inline-Html in MarkdownDies ist ein normaler Absatz.

<table><tr>

<td>Foo</td></tr>

</table>

Dies ist noch ein normaler Absatz.

Dabei ist zu beachten, das bei Block-Elemente wie z.B. <div>, <table>, <pre> usw.der umgebende Inhalt durch leere Zeilen getrennt ist. Außerdem wird die MarkdownSyntax innerhalb dieser Elemente nicht interpretiert.Anders sieht das bei Inline-HTML-Tags wie z.B. <span> oder <cite> aus. Diesekönnen überall in einem Markdown Text verwendet werden. Im Gegensatz zu Block-Tags wird die Markdown Syntax innerhalb von Inline-Tags interpretiert.

2.3.9 Backslash-Maskierung

Um Zeichen zu schreiben die sonst eine bestimmte Bedeutung in der MarkdownSyntax haben, gibt es die Möglichkeit der Backslash-Maskierung. Um ein Wort mitSternchen zu umgeben, statt es kursiv zu schreiben, werden Backslashes vor dieSternchen gestellt.

Listing 2.25: Beispiel Backslash-Maskierung in Markdown\∗Von Sternchen umgeben\∗

Markdown bietet diese Möglichkeit für folgende Zeichen:

Listing 2.26: Backslash-Maskierung in Markdown\ Backslash‘ Backtick∗ Sternchen_ Unterstrich{} Geschweifte Klammern

David Hahn Seite 11 von 35

Page 15: Generator für statische Webseiten inHaskell mit Pandoc

2. Grundlagen Fachhochschule Schmalkalden SS 2012

[] Eckige Klammern() Runde Klammern# Raute. Punkt! Ausrufezeichen

David Hahn Seite 12 von 35

Page 16: Generator für statische Webseiten inHaskell mit Pandoc

3 VorbetrachtungDa eine Webseite nicht nur aus dem Inhalt besteht, sondern auch aus anderen Be-reichen wie einem Header, der Navigation, einer Fußzeile, sowie einem Template,müssen diese Bereiche auch von Benutzer definiert werden können. So wird es ei-ne allgemeine Konfigurationsdatei geben, in welcher folgende Metainformationen1

hinterlegt werden können:• author• year• website_title• website_slogan• description• keywords

Anhand von Platzhaltern sollen die hinterlegten Metainformationen author, year,website_title und website_slogan in das Template eingefügt werden (Abb. 3.1). DieMetainformationen description und keywords sind dagegen keine sichtbaren Infor-mationen.

Listing 3.1: Beispiel für die allgemeine Konfigurationsdateiauthor: David Hahndate: 2012website_title: Beispielseitewebsite_slogan: Generiert mit StatiGendescription: Eine Beispielseite die mit StatiGen generiert wurde.keywords: statigen, david, hahn, fh schmalkalden, fh, schmalkalden

Der Inhalt jeder einzelnen Seite wird in eine extra Datei gespeichert. Dieser wirddann bei den Platzhalter {content:} eingefügt (Abb. 3.1). Zusätzlich hat jede die-ser Datei eine eigene Konfigurationsdatei, in welcher folgende Metainformationenhinterlegt werden:• title• in_menu• order

1Metainformationen sind strukturierte Daten, die Informationen über andere Daten enthalten.Diese sind maschinell lesbar und auswertbar. Metainformationen bei einer technischen Zeich-nung sind zum Beispiel: Name des Konstrukteurs, Bauteilnummer, Zeichnungsnummer, Versi-onsnummer, Datum.

David Hahn Seite 13 von 35

Page 17: Generator für statische Webseiten inHaskell mit Pandoc

3. Vorbetrachtung Fachhochschule Schmalkalden SS 2012

Die Metainformation title legt den Titel der Seite fest. Dieser taucht dann in derNavigation auf. Mit true oder false kann bei in_menu festgelegt werden, ob dieseSeite überhaupt in der Navigation angezeigt werden soll. Bei order wird angegeben,an welcher Position die Seite in der Navigation angezeigt werden soll.

Listing 3.2: Beispiel für die Konfigurationsdatei einer Seitetitle: Aboutin_menu: trueorder: 3

Die folgende Abbildung zeigt die Platzhalter, welche für den einzelnen Metainfor-mationen und dem Inhalt genutzt werden. Die Platzierung kann von Template zuTemplate unterschiedlich sein. Das Template einer Webseite wird in keiner Konfigu-rationsdatei hinterlegt, sondern beim Erstellen einer neuen Webseite vom Benutzerangegeben.

Abbildung 3.1: Platzhalter für Metainformationen und Inahlt

Jedes Webseiten-Projekt besteht aus einer bestimmten Ordner- und Dateistruktur(Abb. 3.2). Das Stammverzeichnis jedes Projektes bekommt den Namen, welcherbeim Erstellen der Webseite angegeben wird. Dieses Verzeichnis enthält neben den

David Hahn Seite 14 von 35

Page 18: Generator für statische Webseiten inHaskell mit Pandoc

3. Vorbetrachtung Fachhochschule Schmalkalden SS 2012

beiden Ordnern output und src, auch die allgemeine Konfigurationsdatei config.conf.In dem Ordner output werden nach dem die Webseite fertig ist, die HTML-Dateienund alle erforderlichen Bilder gespeichert. Im Ordner src befinden sich mit den bei-den Dateien default.template und default.css das ausgewählte Template. Außerdemwerden hier auch die einzelnen Seiten mit ihren Konfigurationsdateien gespeichert.Die Dateien mit der Endung .page enthalten den Inahlt der einzelnen Seiten unddie mit der Endung .conf sind die Konfigurationsdateien. Im Ordner images werdenalle benötigten Bilder abgespeichert.

Abbildung 3.2: Ordnerstruktur eines Webseiten-Projektes

David Hahn Seite 15 von 35

Page 19: Generator für statische Webseiten inHaskell mit Pandoc

4 ImplementierungIn diesem Kapitel werden ausgewählte Funktionen näher beschrieben. Der kompletteCode ist auf GitHub1 verfügbar.

4.1 DatentypenFür den Generator wurden die drei Datentypen Site, Page und NavEntry angelegt.In Haskell werden eigene Datentypen mit dem Schlüsselwort data definiert. Hinterdem Schlüsselwort wird der Name des neuen Typs angegeben. Danach folgen dieKonstruktoren, wobei diese auf verschiedene Arten angegeben werden können.In der hier angewandten Variante wird für jeden Feldtyp ein Name angegeben. Da-durch werden automatisch Funktionen erzeugt, um auf ein Feld in dem Datentypzuzugreifen.

Listing 4.1: Datentyp Sitedata Site = Site {

siteAuthor :: String, siteDate :: String, siteTitle :: String, siteSlogan :: String, siteDescription :: String, siteKeywords :: String} deriving (Show)

Der Datentyp Site beinhaltet die sechs Felder siteAuthor, siteDate, siteTitle, si-teSlogan, siteDescription und siteKeywords, welche alle vom Typ String sind. DerDatentyp stellt quasi das Grundgerüst der Webseite dar, denn hier werden alle In-formationen der config.conf -Datei gespeichert.

Listing 4.2: Datentyp Pagedata Page = Page {

, pageTitle :: String, pageInMenu :: Bool, pageNav :: NavEntry, pageContent :: FilePath} deriving (Show)

1https://github.com/pads-fhs/hawebgen

David Hahn Seite 16 von 35

Page 20: Generator für statische Webseiten inHaskell mit Pandoc

4. Implementierung Fachhochschule Schmalkalden SS 2012

In dem Feld pageTitle wird der Titel der Seite als String gespeichert. Ob die Seite inder Navigation angezeigt werden soll, wird mit true oder false in dem Feld pageIn-Menu hinterlegt. Das Feld pageNav enthält weiter Informationen über den Eintragin der Navigation und in pageContent wird der Pfad zur Datei gespeichert, welcheden Inhalt enthält, der auf der Seite angezeigt werden soll.

Listing 4.3: Datentyp NavEntrydata NavEntry = NavEntry {

navOrder :: Integer, navTitle :: String, navUrl :: String} deriving (Show, Eq, Ord)

Der letzte eigene Datentyp ist NavEntry. In navOrder wird die Zahl gespeichert, anwelche Position der Eintrag in der Navigation auftauchen soll. navTitle beinhaltetden Titel, der in der Navigation angezeigt wird und navUrl die Seite, auf welcheverlinkt werden soll.

4.2 Main-FunktionDas Programm wird mit dem Befehl StatiGen über die Kommandozeile aufgerufen.Dabei können verschiedene Parameter angegeben werden, wodurch das Programmunterschiedliche Funktionen aufruft. Zur Verfügung stehen create, settemplate, add-page und build. Wird StatiGen ohne Parameter aufgerufen, wird die gleiche Funktionwie mit build gestartet.Das Listing 4.4 zeigt den Quellcode der Funktion main, welcher weiter unten be-schrieben wird.

Listing 4.4: Main-Funktionmain :: IO ()main = do

args ← getArgscase args of

["create",site] → create site "default" » exitWithExitSuccess

["create",site,template] → create site template » exitWithExitSuccess

["settemplate",template] → setTemplate template » exitWithExitSuccess

["addpage",name] → addPage name » exitWithExitSuccess

["build"] → buildSite » exitWith ExitSuccess[] → buildSite » exitWith ExitSuccess

Die Paramater create, settemplate und addpage erwarten dabei noch weitere Para-

David Hahn Seite 17 von 35

Page 21: Generator für statische Webseiten inHaskell mit Pandoc

4. Implementierung Fachhochschule Schmalkalden SS 2012

meter. create kann mit einem oder zwei zusätzlichen Parametern aufgerufen werden.Der erste zusätzliche Parameter ist der Name der neuen Webseite. Wird kein zweiterParameter mit angegeben wird das Default-Template für die neue Webseite genutzt.Optional kann der Name des Templates angegeben werden, welches genutzt werdensoll.Sobald eine Funktion durchgelaufen ist, wird das Programm erfolgreich beendet.

4.3 Create-FunktionDie Create-Funktion erstellt die Ordnerstruktur und alle notwendigen Dateien. Da-bei erwartet die Funktion zwei Parameter. Der erste Paramater ist der Name derWebseite. Mit diesem Namen wird ein neuer Ordner erstellt, in welchem alle Da-ten für die Webseite gespeichert werden. Der zweite Parameter ist der Name desTemplates, was für die neue Webseite genutzt werden soll.Die Funktion überprüft zuerst ob es bereits einen Ordner mit dem übergebenenNamen gibt. Ist dies der Fall, wird die Funktion mit einer Fehlermeldung beendet.Im zweiten Schritt wird überprüft, ob es ein Template mit dem übergebenen Namefür das Template gibt. Gibt es ein solches Template nicht, wird die Funktion miteiner Fehlermeldung beendet. Als nächstes werden alle erforderlichen Ordner erstelltund das Template in den src Ordner kopiert. Außerdem wird noch eine Beispielseitein diesen Ordner kopiert. Zum Schluss wird die config.conf -Datei geschrieben undmit Beispieldaten gefüllt.

Abbildung 4.1: Programmablaufplan Create-Funktion

David Hahn Seite 18 von 35

Page 22: Generator für statische Webseiten inHaskell mit Pandoc

4. Implementierung Fachhochschule Schmalkalden SS 2012

Das Listing 4.5 zeigt den Quellcode der Funktion create, welcher weiter unten be-schrieben wird.

Listing 4.5: Main-Funktioncreate :: FilePath → String → IO ()create site template = do

existsDir ← doesDirectoryExist sitewhen existsDir $ do

hPutStrLn stderr $ "Eine Webite mit dem Namen " ++ site ++ "existiert bereits."

exitWith $ ExitFailure 2

templateDir ← getDataFileName "templates"existsTemplate ← doesDirectoryExist (templateDir </> template)when (existsTemplate == False) $ do

hPutStrLn stderr $ "Eine Template mit dem Namen " ++ template ++" existiert nicht."

exitWith $ ExitFailure 3

createDirectoryIfMissing True sitecreateDirectoryIfMissing True (site</>"output")

templateContent ← liftM (filter (/=".") . map (makeRelative (templateDir </> template))) $ getDirectoryContentsRecursive (templateDir </> template)

forM_ templateContent $ \file → dolet dest = site </> "src" </> filecreateDirectoryIfMissing True $ takeDirectory destcopyFile ((templateDir </> template) </> file) dest

emptyPage ← liftM (filter (/=".") . map (makeRelative (templateDir</> "emptyPage"))) $ getDirectoryContentsRecursive (templateDir </> "emptyPage")

forM_ emptyPage $ \file → dolet dest = site </> "src" </> filecreateDirectoryIfMissing True $ takeDirectory destcopyFile ((templateDir </> "emptyPage") </> file) dest

writeFile (site</>"config.conf") "author: Dein Name\nyear: 2012\nwebsite_title: Titel der Webseite\nwebsite_slogan: Slogan derWebseite\ndescription: Beschreibung\nkeywords: Keyw"orter"

Als erstes wird mit doesDirectoryExist überprüft, ob es bereits einen Ordner mit demübergebenen Namen gibt. Gibt es einen solchen Ordner wird True in die VariableexistsDir geschrieben, ansonsten False. Existiert bereits ein Ordner mit dem Namen,die Variable existsDir ist also True, wird eine Fehlermeldung ausgegeben und dieFunktion beendet.Als nächstes wird der Dateipfad zu dem Speicherort der Templates eingelesen. Diesgeschieht mit der Funktion getDataFileName. Danach wird überprüft ob auch ein

David Hahn Seite 19 von 35

Page 23: Generator für statische Webseiten inHaskell mit Pandoc

4. Implementierung Fachhochschule Schmalkalden SS 2012

Template mit dem Namen existiert. Dies geschieht wieder mit der Funktion does-DirectoryExist. Sollte das Template nicht vorhanden sein, wird eine Fehlermeldungausgegeben und die Funktion beendet.Waren beide Abfragen erfolgreich wird das Stammverzeichnis angelegt und in diesemder output-Ordner erstellt. Dabei legt die Funktion createDirectoryIfMissing alleÜberordner an, falls diese noch nicht existieren.Sind alle Ordner erstellt wird das Template kopiert. Zunächst wird mit der FunktiongetDirectoryContentsRecursive alle Dateien, die sich in dem ausgewählten Template-Ordner befinden ausgelesen. Dabei werden auch die Dateien berücksichtigt, die ineinem Unterordner liegen. Anschließend werden die relativen Dateipfade in einerListe in die Variable templateContent gespeichert. Mit der Funktion forM_ wirdnun jeder einzelner Eintrag dieser Liste durchgegangen, wobei der Eintrag in dietemporäre Variable file geschrieben wird. copyFile kopiert jede Datei in den srcOrdner der neuen Webseite. Die Funktion forM_ ist ähnlich der Foreach-Anweisungaus anderen Programmiersprachen.Danach wird mit dem gleichem Muster die Beispielseite in den src Ordner kopiert.Mit der Funktion writeFile wird zum Schluss die Datei config.conf in dem Stamm-verzeichnis erzeugt und mit Beispieldaten gefüllt.

4.4 getSiteConfig-FunktionDie Funktion getSiteConfig liest die in der Datei config.conf hinterlegten Informa-tionen ein und speichert sie in den Datentyp Site. Um die Daten aus der Dateiauszulesen wurde die Bibliothek Data.ConfigFile benutzt. Die Funktion erwartet alsParameter den Namen der Konfigurationsdatei.Das Listing 4.6 zeigt den Quellcode der Funktion getSiteConfig, welcher weiter untenbeschrieben wird.

Listing 4.6: getSiteConfig-FunktiongetSiteConfig :: FilePath → IO SitegetSiteConfig conf = do

existsConfig ← doesFileExist confwhen (existsConfig == False) $ do

hPutStrLn stderr $ "Die Seite konnte nicht gebaut werden, dakeine Config.conf Datei vorhanden ist!"

exitWith $ ExitFailure 3

contents ← readFile conflet site = do

c ← readstring emptyCP contentsauthor ← get c "DEFAULT" "author"date ← get c "DEFAULT" "year"title ← get c "DEFAULT" "website_title"slogan ← get c "DEFAULT" "website_slogan"description ← get c "DEFAULT" "description"

David Hahn Seite 20 von 35

Page 24: Generator für statische Webseiten inHaskell mit Pandoc

4. Implementierung Fachhochschule Schmalkalden SS 2012

keywords ← get c "DEFAULT" "keywords"return Site { siteAuthor = author

, siteDate = date, siteTitle = title, siteSlogan = slogan, siteDescription = description, siteKeywords = keywords}

case site ofLeft cperr → error $ show cperrRight site → return site

Zuerst wird mit doesFileExist überprüft ob es die Datei config.conf überhaupt gibt.Ist dies nicht der Fall, wird die Funktion mit einer Fehlermeldung abgebrochen.Existiert die Datei, wird sie mit readFile eingelesen und deren Inhalt in die Variablecontents gespeichert.Nun kommt die Bibliothek Data.ConfigFile zum Einsatz. Die einzelnen Informatio-nen werden zunächst ausgelesen und in temporären Variablen zwischengespeichert.Im Anschluss werden alle Variablen in den Datentyp Site gespeichert und zurückgegeben.

4.5 getPageConfig-FunktionDie getPageConfig-Funktion ist dafür da, die Konfigurationsdateien der einzelnenSeiten einzulesen und in den Datentyp Page zu speichern. Auch hier kommt dieBibliothek Data.ConfigFile zum Einsatz. Die Funktion erwartet als Parameter denNamen der Konfigurationsdatei.Das Listing 4.7 zeigt den Quellcode der Funktion getPageConfig, welcher weiter un-ten beschrieben wird.

Listing 4.7: getPageConfig-FunktiongetPageConfig :: FilePath → IO PagegetPageConfig conf = do

content ← getFirstElement $ split "." confcontents ← readFile ("src" </> conf)let page = do

c ← readstring emptyCP contentstitle ← get c "DEFAULT" "title"inMenu ← get c "DEFAULT" "in_menu"order ← get c "DEFAULT" "order"let nav = NavEntry { navOrder = order

, navTitle = title, navUrl = content++".html"}

return Page { pageTitle = title, pageInMenu = inMenu, pageNav = nav

David Hahn Seite 21 von 35

Page 25: Generator für statische Webseiten inHaskell mit Pandoc

4. Implementierung Fachhochschule Schmalkalden SS 2012

, pageContent = content++".page"}

case page ofLeft cperr → error $ show cperrRight page → return page

Zunächst wird der Name der .conf-Datei bei dem Punkt getrennt und der ersteTeil ausgelesen und in die Variable content gespeichert. Dies entspricht dann nurdem Namen der Konfigurationsdateien ohne die Dateiendung, Dies ist notwendigum damit später auf die zugehörige .page-Datei zugreifen zu können.Im Anschluss wird die .conf-Datei eingelesen und in die Variable contents gespei-chert. Nun wird mit Hilfe der Bibliothek Data.ConfigFile die Metainformationenausgelesen und in temporären Variablen zwischengespeichert. Zusätzlich wird einNavEntry erzeugt, welches alle relevanten Informationen für den Navigationseintragbeinhaltet. Im Anschluss werden alle Variablen in den Datentyp Page gespeichertund zurück gegeben.

4.6 renderHtmlPage-FunktionDie Funktion renderHtmlPage-Funktion ersetzt im Template die Platzhalter mit denrichtigen Daten und erzeugt daraus eine HTML-Datei. Übergeben wird der Funktionvier Parameter. Der erste Parameter ist vom Datentyp Site, welche die Informationender allgemeinen Konfigurationsdatei enthält. Im zweiten Parameter befindet sichdas Template als String. Die Navigation ist im dritten Parameter enthalten und dervierte Parameter enthält die Seite, welche umgewandelt werden soll.Das Listing 4.8 zeigt den Quellcode der Funktion renderHtmlPage, welcher weiterunten beschrieben wird.

Listing 4.8: renderHtmlPage-FunktionrenderHtmlPage :: Site → [Char] → [Char] → Page → IO ()renderHtmlPage site template navigation page = do

content ← readFile ("src" </> (pageContent page))let contentHtml = markdownToHTML contentlet siteWithContent = replace template "{content:}" contentHtmllet siteWithPageTitle = replace siteWithContent "{title:}" (

pageTitle page)let siteWithSiteDescription = replace siteWithPageTitle "{

description:}" (siteDescription site)let siteWithSitesiteKeywords = replace siteWithSiteDescription "{

keywords:}" (siteKeywords site)let siteWithSiteTitle = replace siteWithSitesiteKeywords "{

website_title:}" (siteTitle site)let siteWithSlogan = replace siteWithSiteTitle "{website_slogan:}"

(siteSlogan site)let siteWithDate = replace siteWithSlogan "{year:}" (siteDate site)let siteWithAuthor = replace siteWithDate "{author:}" (siteAuthor

site)

David Hahn Seite 22 von 35

Page 26: Generator für statische Webseiten inHaskell mit Pandoc

4. Implementierung Fachhochschule Schmalkalden SS 2012

let completeSite = replace siteWithAuthor "{menu:}" $setCurrentSiteInNavigation navigation page

let path = navUrl $ pageNav pagewriteFile ("output" </> path) completeSite

Zuerst wird die zugehörige .page-Datei eingelesen und anschließend mit der FunktionmarkdownToHTML in HTML umgewandelt. Im Anschluss wird mit der Funktionreplace Schritt für Schritt alle Platzhalter im Template mit den richtigen Datengefüllt. Und zum Schluss wird die fertige HTML-Seite mit der Funktion writeFilein dem Ordner output gespeichert.

4.7 buildSite-FunktionDie buildSite-Funktion sorgt dafür, dass alle HTML-Seiten erstellt werden und imoutput Ordner gespeichert werden.Das Listing 4.9 zeigt den Quellcode der Funktion buildSite, welcher weiter untenbeschrieben wird.

Listing 4.9: buildSite-FunktionbuildSite :: IO ()buildSite = do

existsWebsite ← checkWebsitewhen (existsWebsite == False) $ do

hPutStrLn stderr $ "Es konnte keine Website gefunden werden!"exitWith $ ExitFailure 1

config ← getSiteConfig "config.conf"template ← getTemplate

content ← getDirectoryContents "src"let content’ = filter (\f → let ext = takeExtension f in ext == ".

conf") $ filter (‘notElem‘ ["..","."]) contentpages ← mapM getPageConfig content’navigation ← getNavigation pagesforM_ pages $ \page → do

renderHtmlPage config template navigation page

existsCss ← doesFileExist ("src" </> "default.css")when existsCss $ do

copyFile ("src" </> "default.css") ("output" </> "default.css")

existsImages ← doesDirectoryExist ("src" </> "images")when existsCss $ do

templateContent ← liftM (filter (/=".") . map (makeRelative ("src" </> "images"))) $ getDirectoryContentsRecursive ("src" </> "images")

forM_ templateContent $ \file → dolet dest = "output" </> "images" </> file

David Hahn Seite 23 von 35

Page 27: Generator für statische Webseiten inHaskell mit Pandoc

4. Implementierung Fachhochschule Schmalkalden SS 2012

createDirectoryIfMissing True $ takeDirectory destcopyFile ("src" </> "images" </> file) dest

Zunächst wird mit der Funktion checkWebsite überprüft, ob sich der Benutzer auchin einem Stammverzeichnis einer Webseite befindet. Dabei wird geprüft ob es dieDatei config.conf und den Ordner src gibt. Ist dies nicht der Fall wird die Funktionmit einer Fehlermeldung abgebrochen. Danach wird mit getSiteConfig die Konfigu-rationsdatei und mit getTemplate das Template eingelesen.Im Anschluss werden alle Dateien in dem Ordner src ermittelt und nach den Da-teien mit der Endung .conf gefiltert. Jede dieser Dateien wird mit der FunktiongetPageConfig eingelesen und in den Datentyp Page gespeichert. Sind alle Datei-en eingelesen wird mittels getNavigation die Navigation erstellt. Die Funktion gibteinen String zurück, welcher einer HTML-Liste mit den Navigationseinträgen ent-spricht. Danach wird mit der Funktion renderHtmlPage für jede .conf-Datei eineHTML-Datei erzeugt und im Ordner output gespeichert.Sind alle HTML-Dateien erstellt, werden die restlichen benötigten Dateien aus demOrder src kopiert. Dazu zählen eine .css-Datei, wenn sie vorhanden ist, und derkomplette Ordner images.

4.8 NavigationDie Navigation der Webseite wird mit den drei Funktionen getNavigation, getNa-vEntries und buildNavigation erstellt. Zum Schluss wird eine HTML-Liste zurück-gegeben, wobei jeder Listeneintrag einem Eintrag in der Navigation entspricht.Das Listing 4.10 zeigt den Quellcode der Funktion getNavigation, welcher weiterunten beschrieben wird.

Listing 4.10: getNavigation-FunktiongetNavigation :: Monad m ⇒ [Page] → m [Char]getNavigation pages = do

navEntries ← mapM getNavEntries $ filter (\page → pageInMenu page== True) pages

let navEntriesWithOrder = quickSort navEntriesnavi ← mapM buildNavigation navEntriesWithOrderreturn (concat navi)

Zunächst werden aus den übergebenen Seiten alle Seiten rausgefiltert, die in der Na-vigation angezeigt werden sollen. Im Anschluss wird von diesen Seiten der NavEntryEintrag ausgelesen. Diese werden dann sortiert und der Funktion buildNavigationübergeben.Das Listing 4.11 zeigt den Quellcode der Funktion getNavEntries, welcher weiterunten beschrieben wird.

David Hahn Seite 24 von 35

Page 28: Generator für statische Webseiten inHaskell mit Pandoc

4. Implementierung Fachhochschule Schmalkalden SS 2012

Listing 4.11: getNavEntries-FunktiongetNavEntries :: Monad m ⇒ Page → m NavEntrygetNavEntries page = do

let nav = pageNav pagereturn nav

Die Funktion getNavEntries liest mit Hilfe der Funktion pageNav den NavEntryEintrag der übergebenen Seite aus und gibt diesen zurück.Das Listing 4.12 zeigt den Quellcode der Funktion buildNavigation, welcher weiterunten beschrieben wird.

Listing 4.12: buildNavigation-FunktionbuildNavigation :: Monad m ⇒ NavEntry → m [Char]buildNavigation entry = do

let entryHtml = "<li><a href=\""++(navUrl entry)++"\">"++(navTitleentry)++"</a></li>"

return entryHtml

Mit der Funktion buildNavigation wird der Listeneintrag der Seite für die Naviga-tion erstellt. Dazu wird mit der Funktion navUrl die URL aus dem übergebenenNavEntry ausgelesen, zu welcher Seite dieser Eintrag verlinken soll. Und mit derFunktion navTitle wird der Titel ausgelesen, welcher in der Navigation angezeigtwird.

David Hahn Seite 25 von 35

Page 29: Generator für statische Webseiten inHaskell mit Pandoc

5 Anleitung zur Generierung vonWebseiten

Im folgenden Kapitel wird beschrieben, wie die entwickelte Software anzuwenden istund welche Befehle zu Verfügung stehen.

5.1 InstallationStatiGen kann mit den folgenden Befehlen installiert werden:

Listing 5.1: Installation von StatiGenrunhaskell Setup configure --userrunhaskell Setup buildrunhaskell Setuo install

5.2 Erstellung der OrdnerstrukturAls erstes muss ein Ordner erstellt werden, in welchen alle Dateien der neuen Web-seite gespeichert werden. Dafür steht der Befehl StatiGen create website_name zuVerfügung. Damit wird der Ordner website_name angelegt, welcher alle erforderli-chen Ordner und Dateien enthält. Der Name ist dabei frei wählbar. Als Templatewird hier das Default-Template gewählt. Optional kann das gewünschte Templatenoch mit angegeben werden. Dann lautet der Befehl wir folgt: StatiGen create web-site_name template_name.

Listing 5.2: Erstellung der Ordnerstruktur$ StatiGen create sample$ StatiGen create sample andreas00

Das Template der Webseite kann im Nachhinein mit dem Befehl StatiGen settem-plate template_name geändert werden.

Listing 5.3: Ändern des Templates$ StatiGen settemplate andreas08

David Hahn Seite 26 von 35

Page 30: Generator für statische Webseiten inHaskell mit Pandoc

5. Anleitung zur Generierung von WebseitenFachhochschule Schmalkalden SS 2012

5.3 Verfügbare TemplatesDerzeit stehen die vier Templates default, andreas00, andreas01 und andreas08 zuVerfügung, welche in den folgenden Abbildungen dargestellt werden. Die Templateswurden von Andreas Viklund erstellt und sind kostenlos verfügbar. Runtergeladenwerden können sie unter http://andreasviklund.com/templates/.

Abbildung 5.1: Layout: default

Abbildung 5.2: Layout: andreas00

David Hahn Seite 27 von 35

Page 31: Generator für statische Webseiten inHaskell mit Pandoc

5. Anleitung zur Generierung von WebseitenFachhochschule Schmalkalden SS 2012

Abbildung 5.3: Layout: andreas01

Abbildung 5.4: Layout: andreas08

5.4 Inhalte hinzufügenMit dem Befehl create wurde bereits eine Beispielseite angelegt. Diese befindet sichin dem Unterordner src. Dort werden auch alle weiteren Seiten hinzugefügt. JedeSeite besteht aus einer .page-Datei und einer .conf-Datei. In der .page-Datei wirdder Inhalt mit Hilfe von Markdown beschrieben. In die .conf-Datei kommen dieMetainformationen title, in_menu und order. Angelegt werden können neue Seitenentweder mit dem Befehl StatiGen addpage name oder manuell mit einem beliebigenTexteditor. Die .conf-Datei und die .page-Datei müssen den gleichen Namen haben.

Listing 5.4: Neue Seite hinzufügen$ StatiGen addpage about

David Hahn Seite 28 von 35

Page 32: Generator für statische Webseiten inHaskell mit Pandoc

5. Anleitung zur Generierung von WebseitenFachhochschule Schmalkalden SS 2012

Außerdem sollte in der allgemeine Konfigurationsdatei config.conf die Metainforma-tionen author, year, website_title, website_slogan, description und keywords ange-passt werden.

5.5 HTML-Dateien erstellenSind alle Seiten erstellt und mit Inhalt gefüllt, können die HTML-Dateien erstelltwerden. Dafür stehen die beiden Befehle StatiGen und StatiGen build zur Verfü-gung, wobei es keinen unterscheid zwischen den beiden Befehlen gibt. Die fertigeWebseite wird denn in dem Ordern output gespeichert und kann so auf den Webser-ver übertragen werden.

Listing 5.5: HTML-Dateien erstellen$ StatiGen$ StatiGen build

David Hahn Seite 29 von 35

Page 33: Generator für statische Webseiten inHaskell mit Pandoc

6 Zusammenfassung und AusblickIm Rahmen dieser Arbeit wurde ein Generator entwickelt und programmiert umeinfach und schnell statische Webseiten zu erstellen. Dabei wurden alle Anforderun-gen erfüllt. Insgesamt stehen vier verschiedene Templates zu Verfügung aus denender Benutzer wählen kann. Gespeichert wird der Inhalt der einzelnen Seiten in ei-ner Page-Datei die mit jedem beliebigen Texteditor geöffnet und verändert werdenkann. Zu jeder Page-Datei gehört eine Conf-Datei, welche Informationen wie Seiten-titel oder ob sie in der Navigation auftauchen soll enthält.Der Generator kann jedoch noch weiterentwickelt werden. So ist es zurzeit noch nichtmöglich, ein eigenes Template zu benutzten. Ebenfalls interessant wäre eine Imple-mentierung von Galerien. Der Benutzer könnte zum Beispiel in einer .conf-Dateiangeben um welchen Typ es sich bei dieser Seite handelt. Je nach Typ stehen dannverschiedene Metainformationen zu Verfügung. Bei einer Galerie könnte dann nurder Ordner angegeben werden, in welchem sich die Bilder befinden. Der Generatorübernimmt dann die Erstellung der Galerie.Die Arbeit hat aber auch gezeigt wie gut die Kombination Markdown und Pan-doc ist. Dadurch das Pandoc alle gängigen Formate unterstützt, ist es einfach einenMarkdown-Text in verschiedene Formate umzuwandeln. So werde ich auch weiterhinMarkdown mit Pandoc benutzen und testen ob es damit auch möglich ist Dokumen-tationen zu erstellen.

David Hahn Seite 30 von 35

Page 34: Generator für statische Webseiten inHaskell mit Pandoc

Abbildungsverzeichnis

1.1 Anzahl der Webseiten von August 1995 bis August 2012 . . . . . . . 1

3.1 Platzhalter für Metainformationen und Inahlt . . . . . . . . . . . . . 143.2 Ordnerstruktur eines Webseiten-Projektes . . . . . . . . . . . . . . . 15

4.1 Programmablaufplan Create-Funktion . . . . . . . . . . . . . . . . . . 18

5.1 Layout: default . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275.2 Layout: andreas00 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275.3 Layout: andreas01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285.4 Layout: andreas08 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

David Hahn31

Page 35: Generator für statische Webseiten inHaskell mit Pandoc

Tabellenverzeichnis

2.1 Von Pandoc unterstützte Formate . . . . . . . . . . . . . . . . . . . . 4

David Hahn32

Page 36: Generator für statische Webseiten inHaskell mit Pandoc

Listings

2.1 Haskell-Programm zum umwandeln mit Pandoc . . . . . . . . . . . . 52.2 Ausgangsform Markdown . . . . . . . . . . . . . . . . . . . . . . . . . 52.3 Konvertiert in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.4 Überschriften in Markdown Methode 1 . . . . . . . . . . . . . . . . . 62.5 Überschriften Methode 1 in HTML . . . . . . . . . . . . . . . . . . . 62.6 Überschriften in Markdown Methode 1 . . . . . . . . . . . . . . . . . 62.7 Überschriften Methode 2 in HTML . . . . . . . . . . . . . . . . . . . 72.8 Zitate in Markdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.9 Zitate in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.10 Betonungen in Markdown . . . . . . . . . . . . . . . . . . . . . . . . 72.11 Betonungen in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 82.12 Unsortierte Listen in Markdown . . . . . . . . . . . . . . . . . . . . . 82.13 Unsortierte Listen in HTML . . . . . . . . . . . . . . . . . . . . . . . 82.14 Sortierte Listen in Markdown . . . . . . . . . . . . . . . . . . . . . . 82.15 Sortierte Listen in HTML . . . . . . . . . . . . . . . . . . . . . . . . 92.16 Inline-Links in Markdown . . . . . . . . . . . . . . . . . . . . . . . . 92.17 Inline-Links in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 92.18 Referenz-Links in Markdown . . . . . . . . . . . . . . . . . . . . . . . 92.19 Referenz-Links in HTML . . . . . . . . . . . . . . . . . . . . . . . . . 102.20 Bilder in Markdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.21 Bilder in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.22 Code in Markdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.23 Code in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.24 Inline-Html in Markdown . . . . . . . . . . . . . . . . . . . . . . . . 112.25 Beispiel Backslash-Maskierung in Markdown . . . . . . . . . . . . . . 112.26 Backslash-Maskierung in Markdown . . . . . . . . . . . . . . . . . . . 11

3.1 Beispiel für die allgemeine Konfigurationsdatei . . . . . . . . . . . . . 133.2 Beispiel für die Konfigurationsdatei einer Seite . . . . . . . . . . . . . 14

4.1 Datentyp Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.2 Datentyp Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.3 Datentyp NavEntry . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.4 Main-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.5 Main-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194.6 getSiteConfig-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . 204.7 getPageConfig-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . 214.8 renderHtmlPage-Funktion . . . . . . . . . . . . . . . . . . . . . . . . 224.9 buildSite-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

David Hahn33

Page 37: Generator für statische Webseiten inHaskell mit Pandoc

Listings Fachhochschule Schmalkalden SS 2012

4.10 getNavigation-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . 244.11 getNavEntries-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . 254.12 buildNavigation-Funktion . . . . . . . . . . . . . . . . . . . . . . . . 25

5.1 Installation von StatiGen . . . . . . . . . . . . . . . . . . . . . . . . . 265.2 Erstellung der Ordnerstruktur . . . . . . . . . . . . . . . . . . . . . . 265.3 Ändern des Templates . . . . . . . . . . . . . . . . . . . . . . . . . . 265.4 Neue Seite hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . 285.5 HTML-Dateien erstellen . . . . . . . . . . . . . . . . . . . . . . . . . 29

David Hahn34

Page 38: Generator für statische Webseiten inHaskell mit Pandoc

Eidesstattliche ErklärungIch versichere an Eides Statt durch meine eigenhändige Unterschrift, dass ich dievorliegende Arbeit selbstständig und ohne fremde Hilfe angefertigt habe. Alle Stel-len, die wörtlich oder dem Sinn nach auf Publikationen oder Vorträgen andererAutoren beruhen, sind als solche kenntlich gemacht. Ich versichere außerdem, dassich keine andere als die angegebene Literatur verwendet habe. Diese Versicherungbezieht sich auch auf alle in der Arbeit enthaltenen Zeichnungen, Skizzen, bildlichenDarstellungen und dergleichen.

Die Arbeit wurde bisher keiner anderen Prüfungsbehörde vorgelegt und auch nochnicht veröffentlicht.

Schmalkalden,den 22. August 2012

Ort, Datum David Hahn

David Hahn35