Hagen user manualHagen Benutzerhandbuch

Hagen

Hagen is a open source (lgpl) cross platform html generator (or client side cms). It supports the web developer by generating a website and writing the pages. For that purpose Hagen will automate as much tasks as it can.

You can use Hagen to write a slideshow in cooperation with slidy (http://www.w3.org/Talks/Tools/Slidy2) too. To do this look in this slideshow (slidy/).

Hagen was developed with Lazarus (http://www.lazarus.freepascal.org).

Hagen ist ein HTML-Generator / Client-Side CMS. Er unterstützt den Webentwickler beim Anlegen von Webpräsenzen und Schreiben der Seiten. Dazu automatisiert Hagen möglichst viele Aufgaben.

Hagen kann auch zusammen mit slidy (http://www.w3.org/Talks/Tools/Slidy2) zum Schreiben von Präsentationen benutzt werden. Sehen sie dazu diese Präsentation (slidy/).

Hagen wird mit Lazarus (http://www.lazarus.freepascal.org) entwickelt.

Features

  • project management
    • variables, functions and settings
    • template based and (page) divisions
    • source files (.source) for content
  • editor
    • syntax highlighting
    • Markdown
    • search over all pages
    • insert colors, images, tables and references
  • repository
    • for data exchange
    • for templates
    • user defined commands (in the menu)
  • automation
    • automate menu generating
    • internal and user defined variables and funktions
    • printing page
    • generates whole website
  • Projektverwaltung
    • Variablen, Funktionen und Einstellungen
    • Vorlagenbasiert und Seitenbereiche (Divisions)
    • Quelldateien (.source) für Inhalte
  • Editor
    • Syntaxhighlighting
    • Markdown
    • Suchen über alle Seiten
    • Einfügen von Farben, Bildern, Tabellen und Referenzen
  • Repository (Zentrale Datenablage)
    • Zum Datenaustausch
    • Als Vorlagen für die anderen Dateien im Projekt
    • Benutzerdefinierte Kommandos (im Menü)
  • Automatisierung
    • Automatische Menügenerierung
    • Interne und selbstdefinierte Variablen und Funktionen
    • Druckseite
    • Generierung der Webpräsenz

Disclaimer

This book is licenced under: CC-BY-NC-SA. It uses Javascript and Cookies to handle multiple languages.

Dieses Buch steht unter der Creative Commons (http://de.wikipedia.org/wiki/Creative_Commons)-Lizenz CC-BY-NC-SA (http://de.wikipedia.org/wiki/Creative_Commons#Die_Rechtemodule). Es benutzt Javascript (http://de.wikipedia.org/wiki/Javascript) und Cookies (http://de.wikipedia.org/wiki/HTTP_Cookie) für die Mehrsprachigkeit.

Sitemap

If you are a native english speaker feel welcome to correct my english: cis_ät_hartnick_dot_de

ProjectProjekt

Hagen divides its main windows into three divisions: in the left the project tree, in the middle the editor and in the right the log-area.

Hagen teilt sein Hauptfenster in drei Bereiche: links den Projektbaum, in der Mitte der Editor und rechts der Log-Bereich.

Project treeProjektbaum

The project tree structures and manages the project by listing the particular parts hierarchical. Typically at least the main nodes „preference.list“ (ConfigurationKonfiguration), „template.html“ (TemplatesVorlagen) and „index.source“ (SourcecodeQuellcode) exists.

Der Projektbaum strukturiert und verwaltet das Projekt, in dem er die einzelnen Teile hierarchisch darstellt. Normalerweise existieren die Hauptknoten „preference.list“ (ConfigurationKonfiguration), „template.html“ (TemplatesVorlagen) und „index.source“ (SourcecodeQuellcode).

At least the project tree looks like this:

Ein Projektbaum sieht überlicherweise folgendermaßen aus:

  • preferences.list
    • variables.list
    • variables_bigpage.list
    • autocomplete.list
  • template.html
    • stylesheet.css
    • head.div
    • menu.div
    • clip.repo
  • index.source
    • page.source

You can randomly order the nodes of the tree, because Hagen will recognizes the files by name and/or extension. However the structure of source files („.source“) will run to the structure of the generated website (for example in menu and sitemap).

All of the files listed here are specific to the project and therefore will be found in the project directory. The only exception are the „.repo“ files. These will be found in the repository directory underneath the Hagen config diectory, so they are ready to use for all projects.

Sie können die Knoten des Baumes beliebig anordnen, da Hagen die Dateien am Namen und/oder Endung erkennt. Allerdings fließt die Struktur der Quelldateien („.source“) in die Struktur der generierten Webpräsenz ein (beispielsweise in Menü und Sitemap).

Alle hier aufgeführten Dateien sind projektspezifisch und stehen deshalb im Projektverzeichnis. Eine Ausnahme dazu stellen nur die „.repo“-Dateien dar. Sie sind im Repository-Verzeichnis unterhalb des Hagen-Konfigurationsverzeichnisses abgelegt, damit sie für alle Projekte zur Verfügung stehen.

Editor

If you choose a file in the project tree with        it will open in the editor for editing. But the focus will remain in the project tree. With ENTER or ²  the focus will change to the editor.

Hagen will store the cursor position of each file in the project. So you can quickly alternate between the project files.

Wenn sie eine Datei im Projektbaum mit        auswählen, erscheint sie im Editorfenster zum Bearbeiten, der Fokus bleibt aber im Projektbaum. Mit ENTER oder ²  wechselt der Fokus beim Auswählen zum Editor.

Hagen merkt sich innerhalb des Projekts für jede Datei den Standpunkt des Cursor (Einfügemarke). So können sie schnell zwischen den Dateien wechseln.

Log

The log-area stores all the messages, if it is aktivated. To show it, you have to drag the rightmost bar to the middle.

Im Log-Bereich werden aller Meldungen gesammelt, sofern er aktiviert ist. Um ihn einzublenden, ziehen sie den Balken ganz rechts in Richtung mitte.

ConfigurationKonfiguration

hagen.config

(Won't appear in the project tree)

Global config file which are stored in different directories according to the operating system (Linux: ~/.config/Hagen / Windows: %user%\Local Settings\Application Data\Hagen). If you want to use Hagen from a usb stick, you can store this file in the same directory like Hagen itself.

At the moment Hagen will store the project directory in this file.

(Taucht nicht im Projektbaum auf)

Globale Konfigurationsdatei die je nach System in unterschiedlichen Verzeichnissen liegen kann (Linux: ~/.config/Hagen / Windows: %user%\Local Settings\Application Data\Hagen). Wenn sie Hagen von einem USB-Stick benutzen wollen, können sie diese Datei im selben Verzeichnis wie Hagen speichern.

Hier speichert Hagen im Moment nur das aktuelle Projektverzeichnis.

project.hagen

(Won't appear in the project tree)

Stores the project tree.

(Taucht nicht im Projektbaum auf)

Speichert den Projektbaum.

position.list

(Won't appear in the project tree, but you can insert it if you want)

Stores the cursor positions of the text files.

(Taucht nicht im Projektbaum auf, aber sie können es einfügen)

Speichert die Cursor-Position der Textdateien.

references.list

(Won't appear in the project tree, but you can insert it if you want)

Stores the references for internal links.

(Taucht nicht im Projektbaum auf, aber sie können es einfügen)

Speichert die Referenzen für interne Links.

preferences.list

Config file of the project.

Hagen will store here things like:

app_max=1
Starts Hagen maximized
menu_level=3
Maximum level of the menu
bigpage_name=printpage
Name of the printing page
output_dir=website
Output directory for the generated html files
images_dir=images
Images directory below „output_dir“
stylesheet_name=stylesheet.css
Name of the default stylesheet
internetbrowser=firefox
Name of the webbrowsers für Project / Show
template_name=template.html
Name of the default template
write_debug_file=1
Write debug into file „hagen_debug.log“
ref_var_name=none
Variablename the internal reference dialog will return
ref_img_name=none
Variablename the image dialog will return
ext_command1=Name:Command Param
External Commands for the menu „Command“

Lokale Konfigurationsdatei des Projektes.

Hier speichert Hagen Projektinterna wie:

app_max=1
Hagen maximiert starten.
menu_level=3
Maximale Ebene für das Menü.
bigpage_name=Druckseite
Name der Druckseite.
output_dir=website
Ausgabeverzeichnis für den generierten HTML-Quelltext.
images_dir=images
Bilderverzeichnis unterhalb von „output_dir“.
stylesheet_name=stylesheet.css
Name des Standard Stylesheet.
internetbrowser=firefox
Name des Webbrowsers für Project / Show
template_name=template.html
Name des Standard Template
write_debug_file=1
Debug in Datei „hagen_debug.log“ ausgeben.
ref_var_name=none
Variablenname den der internal reference Dialog zurückgibt
ref_img_name=none
Variablenname den der Bilderdialog zurückgibt
ext_command1=Name:Befehl Param
Externe Befehle für das Menü „Command“

variables.list

You can define variables and functions here.

  • *author*=
    Fill in your own name.
  • *pagetitle*=
    Fill in your websites name.
  • *subtitle*=
    Not used yet

You can put your own variables to these file, and use them in the source files and in the template.

  • *own_variable*=Text for these variable
  • *second_variable*=Another Text to replace

Variables will be replaced like a text processor „replace dialog“ in the text files. For that purpose a list of local variables (see SourcecodeQuellcode) and the file variables.list (in this order) will be created and then sequencially worked off. Because of this the order of the list will have a priority.

You can define variables with parameters (functions):

  • *mark*=<span class="mark"> %%0%% *</span>
    %%0%% is the position where the first parameter will be inserted. In the source code it will called with „*mark*((Parameter1))“ and in the generated html file will appear „<span class="mark"> Parameter1 </span>“.
  • *a_wiki*=<a href="http://de.wikipedia.org/wiki/%%0%%"> %%1%% </a>
    This function will be called with two parameters: *a_wiki*((MarkDown|MarkDown))

Instead of the double round brackets (()) you can use square [[]], curly {{}} or angle <<>>. It is the only way to nest functions.

Hier können sie Variablen und Funktionen definieren.

  • *author*=
    Tragen sie hier den eigenen Namen ein.
  • *pagetitle*=
    Tragen sie hier den Namen der Webpräsenz ein.
  • *subtitle*=
    zur Zeit noch nicht benutzt

Sie können auch beliebige eigene Variablen anlegen, die sie dann im Quelltext und im Template verwenden können.

  • *eigene_variable*=Text für diese Variable
  • *zweite_variable*=Noch ein ersetzender Text

Variablen werden wie bei einer Textverarbeitung durch „Suchen und Ersetzen“ in den Dateien ersetzt. Dazu wird eine Liste von lokalen Variablen (s. SourcecodeQuellcode) sowie der Datei variables.list (in dieser Reihenfolge) erstellt und dann nacheinander abgearbeitet. Damit ergibt sich eine Priorisierung der Variablen in dieser Reihenfolge.

Sie können auch Variablen mit Parametern (dann eigentlich Funktionen) definieren:

  • *mark*=<span class="mark"> %%0%% </span>
    %%0%% bezeichnet die Stelle, an der der erste Parameter eingefügt wird. Im Quelltext erfolgt der Aufruf mit „*mark*((Parameter1))“ und in der generierten HTML-Datei erscheint „<span class="mark"> Parameter1 </span>“.
  • *a_wiki*=<a href="http://de.wikipedia.org/wiki/%%0%%"> %%1%% </a>
    Hier erfolgt der Aufruf mit zwei Parametern: *a_wiki*((MarkDown|MarkDown))

Anstatt der doppelten runden Klammer (()) können sie auch doppelte eckige [[]], geschweifte {{}} oder spitze <<>> benutzen. Nur so können sie Funktionen schachteln.

variables_bigpage.list

If this file exists a bigpage (printing page) will be generated.

In this file you can overwrite varibles defined in „variables.list“. For example you can make links visible: *a_wiki*=%%1%% (http://en.wikipedia.org/wiki/%%0%%)

Wenn diese Datei existiert, wird die Bigpage (Druckseite) generiert.

Hier können sie Variablen der Datei "variables.list" überschreiben. Und so beispielsweise Links sichtbar ausdrucken: *a_wiki*=%%1%% (http://de.wikipedia.org/wiki/%%0%%)

autocomplete.list

In this file you can define expressions which the editor will replace automatically when you press Shift + Space.

Definition example:
p
=<p>|</p>

Keystrokes in the editor:
P, Shift + Space

Output in the editor:
<p>|</p>
(Cursor blinks between > and <).

Hier können Ausdrücke definieren, die der Editor nach drücken von Shift + Leertaste automatisch umwandelt.

Beispiel Definition:
p
=<p>|</p>

Eingabe im Editor:
P, Shift + Leertaste

Ausgabe im Editor:
<p>|</p>
(Der Cursor blinkt zwischen > und <).

stylesheet.css

You will use the stylesheet in the common way with selectors, properties and formats.

However Hagen will use some internal classes, you will easily find inside the source code of the generated side. The most important class is „hagen_error“ which will highlight errors in the source code.

Im Stylesheet geben sie ganz normal die Selektoren für Formatierungen an.

Allerdings verwendet Hagen einige interne Klassen, die sie am einfachsten im Quellcode der generierten Seite herausfinden. Am wichtigsten ist die Klasse „hagen_error“ die Fehler im Quelltext hervorheben soll.

.hagen_error { background-color: red; }

TemplatesVorlagen

template.html

The file „template.html“ is the skeleton for all to be generated html pages. It should be a normal html file which should work outside of Hagen.

At the postions where Hagen should show the header and menu (divs) and the content, you have to insert placeholders.

  • Content (.source-files):
    <!-- content -->
  • Content of the div(isions) (header, menu etc.):
    <!-- head -->
    <!-- menu -->
  • Own divs: <!-- name_of_the_div -->

Every placeholder should be at the beginning of his own line.

In addition you can place variables and function in the template. It is an easy way to manipulate the template from in between the source-files: for example to add things in the header.

Die Datei „template.html“ stellt das Grundgerüst für alle zu generierenden HTML- Seiten dar. Sie ist eine ganz normale HTML-Datei, die auch ohne Hagen zu einem anzeigbaren Ergebnis führen sollte.

An der Stelle, an der Hagen den Kopf, das Menü oder den Inhalt anzeigen sollte, müssen sie entsprechende Platzhalter einfügen:

  • Inhalte (Content) der Source-Dateien:
    <!-- content -->
  • Inhalte der Abschnitte (Kopf, Menü usw.):
    <!-- head -->
    <!-- menu -->
  • Eigene Abschnitte (pro eigener div-Datei):
    <!-- name_der_div-datei -->

Jeder Platzhalter sollte dabei in einer eigenen Zeile und dort ganz am Anfang stehen.

Außerdem können sie natürlich Variablen und Funktionen im Template einsetzen. So können sie über lokale Variablen aus einer Quelldatei auf das Template einwirken: zum Beispiel für Ergänzungen im Header.

name.div

A division-file with the filename „name“. It will be placed at the correspondental place in the template (s.above).

Abschnittsdatei mit dem Dateinamen „name“. Sie werden an entsprechender Stelle in die Vorlagendatei (s.o.) eingebunden.

*.repo

Hagen manages his repository in so called „.repo“-files. They are placed in the repository directory beneath the hagen conig directory, so they are avaible for all projects.

The content of these files are mostly a kind of clipboard, the name you can randomly choose. If you will use a repo file in another project, you simply have to insert it with the same name. Hagen will recognizes the existing file and will integrate it.

Hagen verwaltet seine Ablage (Repostitory) in „.repo“-Dateien. Sie sind im Repository-Verzeichnis unterhalb des Hagen-Konfigurationsverzeichnisses abgelegt, damit sie für alle Projekte zur Verfügung stehen.

Der Inhalt dieser Dateien dient meist nur der Zwischenablage, der Name ist frei wählbar. Wollen sie in einen weiteren Projekt eine Repo-Datei verwenden, fügen sie einfach im Projektbaum ihren Namen ein. Hagen erkennt selbständig, dass es die Datei schon gibt und bindet sie ein.

repo as templateals Vorlage

However you can deposite all config files (added with the extension „.repo“) as a template.

Example: „preferences.list.repo“ is a template for „preferences.list“

Equivalently this apply to files with the extension „.source“ and „.div“.

Example: „source.repo“ is a template for „new.source“

Allerdings können sie alle Konfigurationsdateien zusätzlich der Endung „.repo“ so als Vorlagen ablegen.

Beispiel: „preferences.list.repo“ ist Vorlage für „preferences.list“

Für die Dateien mit der Endung „.source“ und „.div“ gilt das entsprechend.

Beispiel: „source.repo“ ist Vorlage für „new.source“

repo for menu commandsfür Menübefehle

In the file „commands.repo“ you can store global menu commands.

In der Datei „commands.repo“ können sie globale Menübefehle speichern.

  • ext_command1=chromium:chromium-browser *dir**output**selectedashtml*
  • ext_command2=lynx:xterm -e "lynx *dir**output**selectedashtml*"

Variables: *file*, *fileashtml*, *selected*, *selectedashtml*, *dir*, *output*, *images*, */*

Other filesSonstige Dateien

Below from template.html even all other files will be deposite (css, js, php, html, …) which Hagen should copy to the website. Before they will be copied, Hagen will be replaces variables and functions too.

Unterhalb von template.html sollten auch alle anderen Dateien (css, js, php, html, …) stehen, welche Hagen zur Website kopieren soll. Auch in diesen Dateien werden die globalen Variablen erstetzt.

SourcecodeQuellcode

AreasBereiche

Hagen splits a source page in three areas:

  • Variable area
  • Marker area
  • HTML/MarkDown-area

Hagen spaltet eine Quellcode-Seite in drei Bereiche:

  • Variablen-Bereich
  • Kennzeichnungsbereich
  • HTML/MarkDown-Bereich

Variable areaVariablen-Bereich

The variable area reaches from the start of the page until the line „<!-- Insert variables before and sourcecode behind -->“. The line itself belongs already to the marker area.

In this area you can define your own variables, which only apply to the local page and not for the entire project. Local variables override globals.

Der Variablen-Bereich geht vom Anfang der Seite bis zur Zeile „<!-- Insert variables before and sourcecode behind -->“. Die Zeile selbst gehört schon zum Kennzeichnungsbereich.

Hier können sie Variablen definieren, die nicht für das gesamte Projekt, sondern nur für die lokale Seite gelten. Lokale Variablen überschreiben globale.

Marker areaKennzeichnungsbereich

The marker area starts with the line „<!-- Insert variables before and sourcecode behind -->“ and can contain the line „<!-- MarkDown -->“ too. (s. Markdown)

Der Kennzeichnungsbereich beginnt mit der Zeile „<!-- Insert variables before and sourcecode behind -->“ und kann noch die Kennzeichung „<!-- MarkDown -->“ enthalten. (s. Markdown)

HTML/MarkDown-areaBereich

Direct after the marker area starts the HTML/MarkDown-area. The whole area will be inserted in the template between the lines <!-- content --> and <!-- /content -->.

In other words: The content in this area have to be written in html and/or MarkDown. If you choose MarkDown, you can anytime place html inside, too.

Markdown files will be cached in the project dir after conversion.

Nach dem Kennzeichnungsbereich folgt direkt der HTML/MarkDown-Bereich. Alles was hier steht wird direkt in das Template zwischen <!-- content --> und <!-- /content --> eingefügt.

D.h. hier schreiben sie ihren eigenen Content (Inhalt) in Form von HTML und/oder MarkDown. Wählen sie am besten MarkDown, da sie dort auch jederzeit HTML einfügen können.

Markdown-Dateien werden nach der Konvertierung im Projektverzeichnis zwischengespeichert (gecached).

UsageBedienung

The usage of Hagen is mostly self describing, cause it is used like any ohter text editor. Hagen tries to hide all complex functions.

Die Benutztung von Hagen ist weitestgehend selbsterklärend, denn er wird wie jeder andere Texteditor bedient. Hagen versucht komplexe Funktionen zu verstecken.

MenuMenü

Project

Project / Change

Strg+O

Change project directory or create new project.

Choose any directory. If there is a previous Hagen project it will be opened. Else Hagen asks you to create a website (complete structure with Template etc.) or a simple webpage (Hagen acts only as a html editor).

For new projects Hagen will create all structures by itself. However you have to open all files once, else there will be problems by generating the website.

Projekt(verzeichnis) wechseln und/oder neu anlegen.

Wählen sie ein beliebiges Verzeichnis. Sollte dort schon ein Hagen Projekt liegen, wird es geöffnet. Sonst fragt Hagen sie, ob sie eine Webpräsenz (vollständige Stuktur mit Template usw.) oder eine einfache Seite (Hagen als HTML-Editor) anlegen möchten.

Bei neuen Projekten erzeugt Hagen alle Grundstrukturen selbständig. Allerdings müssen sie dazu alle Dateien einmal geöffnet haben. Sonst kann es beim Generieren der Webpräsenz zu Problemen kommen.

Project / Generate

F5

Create html files and generate website.

Hagen uses a multilevel system to create a website.

  • Insert divisions like header, menu etc. (.div) in „template.html“
  • Replace variables in files with the extensions .css .js .php .txt .HTM and .html and copy them to the website.
  • Generate internal variables like
    • Menu (**menu**)
    • Sitemap (**sitemap**)
    • Path of names **namepath**
    • Breadcrumb **breadcrumb**
    • Filename **filename**
    • Extension **fileext**
    • File **filenameext**
    • Pagename **pagename**
    • Filedate (letzte Änderung) **filedate**
    • Filename of the parent **parentfilename**
    • Pagename of the parent **parentpagename**
    • Link to the parent **parentlink**
    • Link to the next page **nextlink**
    • Link to the previos page **prevlink**
    • Link to the next sibling **nextsiblinglink**
    • Link to the previos sibling **prevsiblinglink**
    • Link to the child # **childlink#**
    • Link to all childs (list) **childlinks**
  • Convert „MarkDown“ in source code
  • Replace variables in source code (.source)
  • Insert source code in „template.html“

Projekt in HTML-Dateien wandeln und Website generieren.

Hagen benutzt ein mehrstufiges System, um eine Webpräsenz zu erstellen.

  • Einbetten von Bereichen wie Kopf, Menü usw. (.div) in „template.html“
  • In Dateien mit den Endungen .css .js .php .txt .HTM und .html Variablen ersetzen und in die Webpräsenz kopieren.
  • Generieren interner Variablen wie
    • Menü (**menu**)
    • Sitemap (**sitemap**)
    • Namenspfad **namepath**
    • Linkpfad (Breadcrumb) **breadcrumb**
    • Dateiname **filename**
    • Dateierweiterung **fileext**
    • Datei **filenameext**
    • Seitenname **pagename**
    • Dateidatum (letzte Änderung) **filedate**
    • Elterndateiname **parentfilename**
    • Elternseitename **parentpagename**
    • Elternlink **parentlink**
    • Nächste Seite **nextlink**
    • Vorhergehende Seite **prevlink**
    • Nächster Bruder **nextsiblinglink**
    • Vorhergehender Bruder **prevsiblinglink**
    • Kind Nummer # **childlink#**
    • Alle Kinder **childlinks**
  • Umwandeln von „MarkDown“ im Quelltext
  • Ersetzen von Variablen im Quelltext (.source)
  • Einbinden des Quelltextes in „template.html“

Project / Show

F9

Show project in webbrowser.

If a source file is choosen, this paged will be showed in the browser, else the main page.

The webbrowser is defined in the file „preferences.list“ (Windows needs a full path!).

Projekt im Webbrowser anzeigen.

Wenn eine Quelldatei ausgewählt ist, wird diese im Browser angezeit - sonst die Hauptseite.

Der Webbrowser wird in der Datei „preferences.list“ festgelegt (Windows braucht die volle Pfadangabe!).

Project / Tidy up

Tidy up the project dir. Delete no more existing files and empty the cache.

Projektverzeichniss aufräumen. Nicht mehr existierende Dateien löschen und Zwischenspeicher (Cache) leeren.

Project / Exit

Alt+F4

Exit Hagen.

Hagen beenden.

Editor

Editor / Save

Strg+S

Save editor text.

Hagen will save all changes automatically. But you can save greater changes manually.

Text im Editor speichern.

Hagen speichert alle Änderungen automatisch. Bei größeren Änderungen kann man so aber auch das Speichern erzwingen.

Editor / Cut

Strg+X

Cut text to the clipboard.

Text in die Zwischenablage ausschneiden.

Editor / Copy

Strg+C

Copy text to the clipboard.

Text in die Zwischenablage kopieren.

Editor / Paste

Strg+V

Paste text from the clipboard.

Text aus der Zwischenablage einfügen.

Editor / Find

Strg+F

Search a part of the text.

(Escapes: \:→=, \b→#8, \t→#9, \n→#10, \f→#12, \r→#13, \\→\)

Textabschnitt suchen.

(Escapes: \:→=, \b→#8, \t→#9, \n→#10, \f→#12, \r→#13, \\→\)

Editor / Find next

Strg+L

Find next.

Nächsten finden.

Editor / Replace

Strg+H

Search and replace a part of the text.

(Escapes: \:→=, \b→#8, \t→#9, \n→#10, \f→#12, \r→#13, \\→\)

Textabschnitt suchen und dann ersetzen.

(Escapes: \:→=, \b→#8, \t→#9, \n→#10, \f→#12, \r→#13, \\→\)

Editor / Insert / Color

Shift+Alt+S

Choose color in html format and insert it.

If the cursor stands on a a color, these will be choosen before.

Farbe im HTML-Format wählen und einfügen.

Wenn der Cursor auf einer Farbe steht, wird diese vorausgewählt.

Editor / Insert / Image

Shift+Alt+I

Insert link to a picture.

The variable **images** will be used as the path to the picture. It will be set bei the entry „images_dir=“ in the file „preferences.list“.

If the entry „ref_img_name=“ is set, then the link is formatted as a variable.

Verweise auf ein oder mehrere Bilder einfügen.

Für den Pfad auf das Bild wird die Variable **images** verwendet, welche durch den Eintrag „images_dir=“ in der Datei „preferences.list“ vorbelegt wird.

Wenn der Eintrag „ref_img_name=“ gesetzt ist, wird der Link als Variable eingefügt.

Editor / Insert / Reference

Shift+Alt+R

Insert link to project internal page. The correspontal file have to be choose in project list. The reference will be managed in the external file „reference.list“.

If the entry „ref_var_name=“ is set, then the link is formatted as a variable.

Verweis auf projektinterne Seite einfügen. Die entsprechende Datei muss dazu in der Projekt­liste ausgewählt sein. Die Referenzen werden in der externen Datei „reference.list“ verwaltet.

Wenn der Eintrag „ref_var_name=“ gesetzt ist, wird der Link als Variable eingefügt.

Command

Empty till you fill it!

Submenus will be filled with commands defined in commands.repo (global) and preferences.list (only for project). With the following syntax:

Leer, bis sie es füllen!

Untermenüs werden mit Befehlen gefüllt, welche in commands.repo (global) und preferences.list (projektspezifisch) definiert sind. Dazu wird folgende Syntax benutzt:

ext_comand#=menu-name:command parameters

ExamplesBeispiele

  • commands.repo:
    • ext_command1=chromium:chromium-browser *dir**output**selectedashtml*
    • ext_command2=firefox:firefox *dir**output**selectedashtml*
  • preferences.list:
    • ext_command1=ftp sync:xterm -e "sitecopy -u hagen && sleep 5"
    • ext_command2=zip source:xterm -e "/home/user1/scripts/zip_hagen.sh"

The shortcuts will be set to

Shift + F2 and so on.

Die Tastenkürzel werden auf

Shift + F2 und so weiter gesetzt.

Help

Help / Reference

Look-up tag, attrbute etc. in the html reference.

If the cursor is over an html element, Hagen tries to identify it and look it up in the reference.

Tag, Attribute usw. in der HTML-Referenz nachschlagen.

Wenn der Cursor auf einem HTML-Element steht, versucht Hagen dieses zu erkennen und die entsprechende Referenz anzuzeigen.

Help / Hagen

Show this website.

Dieses Handbuch anzeigen.

Help / Editor

Lists all the editor shortcuts.

Listet alle Befehle des Editor samt Tastenkombination auf.

Help / Variables

Lists all the automatically generated variables.

Listet alle automatisch generierten Variablen auf.

Help / About

Version and operating system.

Versions- und Betriebssysteminformation zu Hagen.

Button barSymbolleiste

Button bar projectSymbolleiste Projekt

  • Project change
    (s. Menü)
  • Project generate
    (s. Menü)
  • Project show
    (s. Menü)
  • Entry rename
    Rename entry (and file)
  • Entry insert
    Insert entry (and file)
  • Entry delete
    Delete entry (and file)
  • Entry move up
    Move entry up
  • Entry move down
    Move entry down
  • Entry move parent
    Move entry to parent
  • Entry move child
    Move entry to child
  • Project change
    (s. Menü)
  • Project generate
    (s. Menü)
  • Project show
    (s. Menü)
  • Entry rename
    Eintag (und Datei) umbenennen
  • Entry insert
    Eintag (und Datei) einfügen
  • Entry delete
    Eintag (und Datei) löschen
  • Entry move up
    Eintag nach oben verschieben
  • Entry move down
    Eintag nach unten verschieben
  • Entry move parent
    Eintag zum Vorgänger machen
  • Entry move child
    Eintag zum Kind machen

Button bar editorSymbolleiste Editor

  • ↓ (Show more options) Show „Search in all pages“ and „Replace list“
  • Editor cut
    (s. Menü)
  • Editor copy
    (s. Menü)
  • Editor paste
    (s. Menü)
  • Editor find
    (s. Menü)
  • Editor replace
    (s. Menü)
  • Editor insert Color
    (s. Menü)
  • Editor insert Image
    (s. Menü)
  • Editor insert Reference
    (s. Menü)
  • Search over all pages
    Search over all pages (Escapes: \:→=, \b→#8, \t→#9, \n→#10, \f→#12, \r→#13, \\→\)
  • Replace List
    Replace all name/value pairs (searchtext=replacetext) (Escapes: \:→=, \b→#8, \t→#9, \n→#10, \f→#12, \r→#13, \\→\)
  • ↓ (Show more options) „Search in all pages“ und „Replace List“ anzeigen
  • Editor cut
    (s. Menü)
  • Editor copy
    (s. Menü)
  • Editor paste
    (s. Menü)
  • Editor find
    (s. Menü)
  • Editor replace
    (s. Menü)
  • Editor insert Color
    (s. Menü)
  • Editor insert Image
    (s. Menü)
  • Editor insert Reference
    (s. Menü)
  • Search over all pages
    Suche über alle Seiten (Escapes: \:→=, \b→#8, \t→#9, \n→#10, \f→#12, \r→#13, \\→\)
  • Replace List
    Mehre Wertpaare (suchtext=ersetztext) ersetzen (Escapes: \:→=, \b→#8, \t→#9, \n→#10, \f→#12, \r→#13, \\→\)

Context menuKontextmenü

Context menu projectKontextmenü Project

Rename

F2/R

Rename entry and if existing the file itself.

Dateieintrag und falls vorhanden Datei selbst umbenennen.

Insert

E

Insert entry and file.

Datei einfügen.

Delete

D

Delete entry and maybe the file itself.

Dateieintrag und wenn gewünscht Datei selbst löschen.

Move up

Q

Move entry up.

Dateieintrag nach oben verschieben.

Move down

A

Move entry down.

Dateieintrag nach unten verschieben.

Move to parent

Y

Move entry to parent.

Dateieintrag zum übergeordneten Elternteil verschieben.

Move to child

X

Move entry to child.

Dateieintrag zum untergeordneten Kindteil verschieben.

Expand all

3

Expand all childs.

Alle Kindknoten aufklappen.

Expand

2

Expand direct childs.

Direkte Kindknoten aufklappen.

Collapse

1

Collapse childs.

Kindknoten einklappen.

Context menu editorKontextmenü Editor

You will find the context menu commands in the menu Editor (Cut, Copy, Past, Insert Color, Insert Image, Insert Reference) and Help (Help reference).

Die Kontextmenü Befehle finden sie alle auch im Menü Editor (Cut, Copy, Past, Insert Color, Insert Image, Insert Reference) und Help (Help reference).

Context menu logKontextmenü Log

Clear log.

Log löschen (clear).

ShortcutsTastenkürzel

You will find the editor shortcuts under Help / Editor!

Editorbefehle
BefehlTastatur
Makro an/aus
Makro abspielen
Shift+Strg+R
Shift+Strg+P
Block einrücken
Block zurückrücken
Shift+Strg+I
Shift+Strg+U
Spalten selektieren
Zeile selektieren
Normal selektieren
Shift+Strg+C
Shift+Strg+L
Shift+Strg+N
kopieren
ausschneiden
einfügen
zurücksetzen
wiederherstellen
Strg+C
Strg+X
Strg+V
Strg+Z
Shift+Alt+BkSp
Zeichen löschen
Letztes Zeichen löschen
Letztes Zeichen löschen
Wort löschen
Letztes Wort löschen
Zeile löschen
bis Zeilenende löschen
Entf
BkSp
Shift+BkSp
Strg+T
Strg+BkSp
Strg+Y
Shift+Strg+Y
Editorbefehle
BefehlTastatur
Unten
Oben
Links
Rechts
Wort Links
Wort Rechts
Zeilenende
Zeilenstart
Editor Ende
Editor Anfang
Seite Unten
Seite Oben
Seitenende
Seitenanfang
Unten
Oben
Links
Rechts
Strg+Links
Strg+Rechts
End
Home
Strg+End
Strg+Home
Bildv
Bild^
Strg+Bildv
Strg+Bild^
Editorbefehle
BefehlTastatur
Selektiere Unten
Selektiere Oben
Selektiere Links
Selektiere Rechts
Selektiere Wort Links
Selektiere Wort Rechts
Selektiere Zeilenende
Selektiere Zeilenstart
Selektiere Editor Ende
Selektiere Editor Anfang
Selektiere Seite Oben
Selektiere Seite Unten
Selektiere Seitenende
Selektiere Seitenanfang
Selektiere All
Shift+Unten
Shift+Oben
Shift+Links
Shift+Rechts
Shift+Strg+Links
Shift+Strg+Rechts
Shift+End
Shift+Home
Shift+Strg+End
Shift+Strg+Home
Shift+Bild^
Shift+Bildv
Shift+Strg+Bild^
Shift+Strg+Bildv
Strg+A
Editorbefehle
BefehlTastatur
Setze Cursor
Selektiere Wort
Selektiere Absatz
’ 
² 
³ 
Gehe zu Marker 0 - 9
Setze Marker 0 - 9
Strg+0 - 9
Shift+Strg+0 - 9
Zeile einfügen
Zeile umbrechen
Klammer suchen
Tab
Shift-Tab
Strg+N
Strg+M, Enter
Shift+Strg+B
Tab
Shift+Tab
Scrollen Unten
Scrollen Oben
Strg+Unten
Strg+Oben
ToggleModeIns

Markdown

CommonAllgemein

Hagen MarkDown is a variation of MarkDown. It allows a easy and readable creation of content without the use of html tags. Nerver the less you can mix Markdown and html.

So that Hagen has to recognize a file as markdown, in the marker area has to be a <!-- MarkDown --> right direct after the <!-- variables before --> mark. The source code will then going throw the Markdown interpreter, right before it will be inserted to the template.

The converted html file will be cached.

If you want to have greater html areas inside the Markdown page, you could switch back to html mode. (OtherAnderes)

Hagen MarkDown ist eine Abwandlung von MarkDown (http://de.wikipedia.org/wiki/MarkDown). Es erlaubt die einfache und lesbare Erstellung von Inhalten ohne die Verwendung von HTML-Tags. Allerdings kann Markdown und HTML auch gemischt werden.

Damit Hagen eine Source-Datei als MarkDown erkennt, muss im Kennzeichnungsbereich direkt nach <!-- variables before --> die Kennung <!-- MarkDown --> stehen. Dann durchläuft der Quellcode zunächst den MarkDown-Interpreter, bevor er in die Seitenvorlage eingebaut wird.

Die konvertierte HTML-Datei wird zwischengespeichert (gecached).

Wollen sie größere HTML-Bereiche in eine MarkDown-Seite einbauen, sollten in den HTML-Mode zurückschalten. (OtherAnderes)

FeaturesEigenschaften

HeadingsÜberschriften

Insert HeadingÜberschrift einfügen

Headings will be defined by a prefixed „#“-character. The number of the „#“ defines the level of the heading. „##“ effects a <h2>…</h2>.

In the sourcecode the headings appearing like that:

Überschriften werden mit einem vorangestellten „#“-Zeichen definiert. Die Anzahl der „#“ setzt die Überschriftenebene. „##“ bewirkt also ein <h2>…</h2>.

Im Quellcode sehen die Überschrifen folgendermaßen aus:

#HeadingÜberschrift 1
##HeadingÜberschrift 2
###HeadingÜberschrift 3
####HeadingÜberschrift 4
#####HeadingÜberschrift 5
######HeadingÜberschrift 6

And will apear on the webpage like that:

Und erscheinen dann so auf der Webseite:

HeadingÜberschrift 1

HeadingÜberschrift 2

HeadingÜberschrift 3

HeadingÜberschrift 4

HeadingÜberschrift 5
HeadingÜberschrift 6

HeadinglistÜberschriftenliste

To insert a heading directory, you can write a the line \\<HeadingList>. You can see an example at the top of this page.

This list should be formatted in css like this:

Um ein Verzeichnis der Überschriften einzufügen, schreiben sie in dieser Zeile \\<HeadingList>. Ein Beispiel dafür sehen sie am Anfang dieser Seite.

Außerdem sollten sie die Liste mit CSS formatieren:

a.hl2 { display:block; padding-left: 0em; }
a.hl3 { display:block; padding-left: 1em; font-size: .9em; }
a.hl4 { display:block; padding-left: 2em; font-size: .8em; }
a.hl5 { display:block; padding-left: 3em; font-size: .7em; }
a.hl6 { display:block; padding-left: 4em; font-size: .6em; }

ParagraphsAbsätze

Paragraphs will be written in Markdown, like you will do it in an texteditor. You seprate them through a blank line. A „««“ at the end of the line will do a line break.

Hint: You get the » (french questionmark open) and « (french questionmark close) under Windows with <$key:Alt+0,1,8,7 and Alt+0,1,7,1 (keypad). Under Linux you use AltGr+y and AltGr+x.

In the sourcecode the paragraphs appearing like that:

Absätze schreibt man im Markdown so, wie man sie im Texteditor schreiben würde. Man trennt sie also durch eine Leerzeile. Ein „««“ am Zeilenende sorgt für einen Zeilenumbruch.

Anmerkung: » (französisches Anführungs­zeichen auf) und « (französisches Anführungs­zeichen zu) wird unter Windows mit Alt + 0 , 1 , 8 , 7 und Alt + 0 , 1 , 7 , 1 (Ziffernblock) eingegeben. Unter Linux benutzen sie AltGr + y und AltGr + x.

Im Quellcode sehen die Absätze folgendermaßen aus:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec a diam lectus.
Sed sit amet ipsum mauris. Maecenas congue
ligula ac quam viverra nec consectetur
ante hendrerit.

Donec et mollis dolor. Praesent et diam
eget libero egestas mattis sit amet vitae
augue. Nam tincidunt congue enim, ut
porta lorem lacinia consectetur.

Donec ut libero sed arcu vehicula ultricies
a non tortor. Lorem ipsum dolor sit
amet, consectetur adipiscing elit.

And will apear on the webpage like that:

Und erscheinen dann so auf der Webseite:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ListsListen

Markdown supports ordered („.“) and unordered („-“) lists, which can be mixed and nested. Furthermore you can use definition lists („;“).

At the moment you can't mix and nest normal and definition lists.

In the sourcecode the lists appearing like that:

Markdown unterstützt geordnete („.“) und ungeordnete („-“) Listen, die auch gemischt geschachtelt werden können. Außerdem kann man Definitionslisten („;“) verwenden.

Im Moment kann man normale und Definitionslisten nicht schachteln.

Im Quellcode sehen die Listen folgendermaßen aus:

. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.- Donec a diam lectus.
.- Sed sit amet ipsum mauris.
.- Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
. Donec et mollis dolor.
. Praesent et diam eget libero egestas mattis sit amet vitae augue.
. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

;Donec :: ut libero sed arcu
       :: vehicula ultricies a non tortor
;;Lorem       :: ipsum dolor sit amet
;;Consectetur :: adipiscing elit.

And will apear on the webpage like that:

Und erscheinen dann so auf der Webseite:

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Donec a diam lectus.
    • Sed sit amet ipsum mauris.
    • Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
  2. Donec et mollis dolor.
  3. Praesent et diam eget libero egestas mattis sit amet vitae augue.
  4. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
Donec
ut libero sed arcu
vehicula ultricies a non tortor
Lorem
ipsum dolor sit amet
Consectetur
adipiscing elit.

BlockquoteZitat

Blockquote will be used vor paragraphs from other authors. It is a logical format which appearance differs from browser to browser.

In the sourcecode the blockquote appearing like that:

Blockquote (Zitat) wird für Absätze von Fremdautoren genutzt. Es ist also eine logische Formatierung, die je nach Browser anders vorformatiert wird.

Im Quellcode sehen der Blockquote folgendermaßen aus:

>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec a diam lectus.
Sed sit amet ipsum mauris. Maecenas congue
ligula ac quam viverra nec consectetur
ante hendrerit.

And will apear on the webpage like that:

Und erscheinen dann so auf der Webseite:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

TablesTabellen

Tabelle

Hagen Markdown describe only simple not nested tables. But these after all with „caption“ and „th“. You can use at least 20 table columns. More will be truncated.

In the sourcecode the tables appearing like that:

Hagen Markdown kann nur einfache, nicht geschachtelte Tabellen darstellen. Die aber immerhin mit „caption“ und „th“. Außerdem stehen bis zu 20 Tabellespalten zur Verfügung. Alles darüberhinaus wird abgeschnitten.

Im Quellcode sehen die Tabellen folgendermaßen aus:

+- table discription ----------------------------------------
|Markdown|Discription  |Remark      |Tag                    |
+============================================================
| +-     |start table  |first time  |<table>                |
|        |             |            |<caption>...           |
+------------------------------------------------------------
| +-     |start row    |next time   |<tr>...<tr>            |
+------------------------------------------------------------
| +=     |start row    |row was head|<th>...<th>            |
+------------------------------------------------------------
| |      |cellseperator|data        |<td>...<td>            |
+------------------------------------------------------------
| ||     ||column span over 2       |<th colspan="2">       |
+------------------------------------------------------------
||| ||| column span over 3          |<th colspan="3">       |
+------------------------------------------------------------
+- Tabellebeschreibung -------------------------------------
|MarkDown|Beschreibung|Bemerkung   |Tag                    |
+===========================================================
| +-     |Tabelle     |Beim ersten |<table>                |
|        |beginnen    |Mal         |<caption>...           |
+-----------------------------------------------------------
| +-     |Zeile       |Beim zweiten|<tr>...<tr>            |
|        |beginnen    |Mal         |                       |
+-----------------------------------------------------------
| +=     |Zeile       |Zeile war   |<th>...<th>            |
|        |beginnen    |Header      |                       |
+-----------------------------------------------------------
| |      |Trenner     |Normale     |<td>...<td>            |
|        |Zelle       |Zelle       |                       |
+-----------------------------------------------------------
| ||     ||2 Zellen vereinigt      |<th colspan="2">       |
+-----------------------------------------------------------
||| ||| 3 Zellen vereinigt         |<th colspan="3">       |
+-----------------------------------------------------------

And will apear on the webpage like that:

Und erscheinen dann so auf der Webseite:

table discription
MarkdownDiscriptionRemarkTag
+-start tablefirst time<table> <caption>...
+-start rownext time<tr>...<tr>
+=start rowrow was head<th>...<th>
|cellseperatordata<td>...<td>
||column span over 2<th colspan="2">
||| column span over 3<th colspan="3">
Tabellenbeschreibung
MarkDownBeschreibungBemerkungTag
+-Tabelle beginnenBeim ersten Mal<table> <caption>...
+-Zeile beginnenBeim zweiten Mal<tr>...<tr>
+=Zeile beginnenZeile war Header<th>...<th>
|Trenner ZelleNormale Zelle<td>...<td>
||2 Zellen vereinigt<td colspan="2">
||| 3 Zellen vereinigt<td colspan="3">

Head, Body, Footer

With „+(“, „+)[“, „+](“, „+)(“ und „+)“ you can insert <thead>,<tfoot> and <tbody>. In the round brackets stands Head and Body, in the square the Foot.

In the sourcecode this appears like that:

Mit „+(“, „+)[“, „+](“, „+)(“ und „+)“ können <thead>,<tfoot> und <tbody> eingefügt werden. In den runden Klammern stehen Head und Body, in den eckigen der Foot.

Im Quellcode sieht das folgendermaßen aus:

+(- THead, TFoot, TBody ---
| +(-- |Header            |
+)[========================
| +)[--|Footer            |
+](------------------------
| +](--|Body/Footer       |
+--------------------------
| +)(--|Body →            |
+--------------------------
| +)-- |← Body            |
+)-------------------------

And will apear on the webpage like that:

Und erscheinen dann so auf der Webseite:

THead, TFoot, TBody
+(--Header
+)[--Footer
+](--Body/Footer
+)(--Body →
+)--← Body

DivisionsBereiche (div)

Divisions

Divisions (<div>) insert special block formatings into the sourcecode. They are essential to modern web design like <span>. Because of that Markdown support the direct use of divisions, both with „class“ („=(classname“) and „id“ („=(#id“).

In the sourcecode the divisions appearing like that:

Bereiche (Divisions <div>) fügen spezielle Blockformatierungen in den Quelltext ein. Sie sind wie <span> im modernen Webdesign unverzichtbar. Hagen MarkDown unterstützt deshalb das direkte Einfügen von Divisions. Sowohl als „class“ („=(classname“) als auch als „id“ („=(#id“).

Im Quellcode sehen Divisions folgendermaßen aus:

=(box=====
box
=)box=====

And will apear with a CSS formating on the webpage like that:

Und erscheinen dann mit der entsprechenden CSS-Formatierung so auf der Webseite:

box

ClassesKlassen

To assign own classes to HTML tags, Hagen supports a general difinition of names of classes. If defined they will be automatically assigned to the following tags. You can define up to twenty classnames, to affect lists and tables.

In the sourcecode the divisions appearing like that:

Um HTML-Tags individuelle Klassen zuweisen zu können, unterstützt Hagen eine allgemeine Definition von Klassennamen. Diese werden automatisch den nachfolgenden Tags zugewiesen. Sie können bis zu zwanzig Klassennamen definieren, um auch Listen und Tabellen zu beeinflussen:

Im Quellcode sehen Klassen folgendermaßen aus:

=((Gray
+- Table -------------------------
=))
| Row1     | Row2     | Row3     |
+=================================
=((Red     |Green     |Blue
| Format«« | Format«« | Format«« |
| Red      | Green    | Blue     |
+---------------------------------
=((Green   |Blue      |Red
| Format«« | Format«« | Format«« |
| Green    | Blue     | Red      |
+---------------------------------
=))
||| Format: None ««              |
||| Gray is inherited from Table |
+---------------------------------

And will apear with a CSS formating on the webpage like that:

Und erscheinen dann mit der entsprechenden CSS-Formatierung so auf der Webseite:

Table
Row1Row2Row3
Format
Red
Format
Green
Format
Blue
Format
Green
Format
Blue
Format
Red
Format: None
Gray is inherited from Table

SpanningTextbereiche (span)

Spannings (<span>) insert special inline formatings into the sourcecode. They are essential to modern web design like <div>. Because of that Markdown support the direct use of spannings; but only with „classes“.

Textbereiche (Spanning <span>) fügen spezielle Inline-Formatierungen in den Quelltext ein. Sie sind wie <div> im modernen Webdesign unverzichtbar. Hagen MarkDown unterstützt deshalb das direkte Einfügen von Spannings; allerdings nur als „class“.

NormalNormaler <span>

In the sourcecode the spannings appearing like that:

Im Quellcode sehen Spannings folgendermaßen aus:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec a diam lectus. Sed
sit amet ipsum mauris. Maecenas <.mark:congue
ligula.> ac quam viverra nec consectetur
ante hendrerit.

And will apear with a CSS formating on the webpage like that:

Und erscheinen dann mit der entsprechenden CSS-Formatierung so auf der Webseite:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

SelectionAuswahl <span>

You can write several spannings in direct order by seperate them with „|“. This is especially interesting for multi-language websites, which change the active language with the css property „display:“. This site works like that!

In the sourcecode that appears like that:

Für mehrere Spannings direkt nacheinander, können sie diese mit „|“ direkt in einem Befehl schreiben. Dies ist vor allem für mehrsprachige Webseiten interessant, welche die Sprache mit der CSS-Eigenschaft „display:“ umschalten. Diese Seite arbeitet so!

Im Quellcode sieht dies folgendermaßen aus:

###<.en:English title|de:Deutscher Titel.>

And will apear with a CSS formating and JS-function on the webpage like that:

Und erscheinen dann mit der entsprechenden CSS-Formatierung und JS-Funktion so auf der Webseite:

English titleDeutscher Titel

OtherAnderes

HTML/MarkDown

SwitchUmschalten

You can switch between Markdown and html with the lines „\\(“ and „\\)“. If you are using „\\[“ and „\\]“ you will insert a <pre> too.

Mit den Zeilen „\\(“ und „\\)“ schalten sie zwischen MarkDown und HTML um. Wenn sie stattdessen „\\[“ und „\\]“ benutzen, wird außerdem ein <pre> eingefügt.

EscapeAbschalten

Markdown recognizes it elements mostly by specific characters standing at the beginning of the line. If you don't want this, you have to put a „\“ at the beginning of th line. This character will not be displayed and the line will be handeled as common text.

Hagen MarkDown erkennt seine Elemente vor allem an bestimmten Zeichen, welche an der ersten Stelle einer Zeile stehen. Um diese Erkennung abzuschalten, stellt man einfach ein „\“-Zeichen davor. Dieses wird nicht dargestellt und die folgende Zeile wird wie normaler Text behandelt.

CommentKommentar

A double „\“-Charactor (\\) at the beginning of the line is a comment.

Ein doppeltes „\“-Zeichen (\\) am Zeilenanfang stellt einen Kommentar dar.

AnchorAnker

To set an Anchor write \\#anchorname in the line.

Um einen Anker zu setzen, schreiben sie in die Zeile \\#Ankername.

Download

Download

You can use Hagen simply by copying to a local drive and start it. No installation is needed. For examle you can keep Hagen on your usb stick with your project file.

Hagen was build with Lazarus / Free Pascal and this book with Hagen :-)

Sie können Hagen einfach auf eine lokales Laufwerk kopieren und von dort starten. Eine Installation ist nicht nötig. Legen sie Hagen beispielsweise mit den Projektdaten einfach auf einen USB-Stick.

Hagen wurde mit Lazarus / Free Pascal geschrieben und dieses Buch mit Hagen :-)

Todo

  • table assistents
  • external scripts (ftp, zip, ...)
  • @import function
  • @for function
  • categories
  • user/group management
  • report more errors

Changelog

still to come!