Wie werden die Inhalte und Templates organisiert?
mehr lesen »
grober Überblick
Nachfolgend ist ein Beispiel eines Templates:
<html>
<meta>
<meta charset="UTF-8">
<title>{{ Meta.Title }}</title>
<meta name="description" content="{{ Meta.Description }}" />
<meta name="keywords" content="{{ Meta.Keywords }}" />
<link rel="stylesheet" type="text/css" href="../assets/css/main.css">
</meta>
<body>
{% block header %}
<header>
<div class="langSelect">
{% for nav in NavSlice %}
<a href="{{ nav.GoTo }}" {% if nav.Active %}class="active"{% endif %}>
<img src="../assets/img/{{ nav.Navname }}.png" alt="{{ nav.Navname }}" style="height: 20px;">
</a>
{% endfor %}
</div>
<div id="logoDiv"><img src="../assets/img/logo.png"></div>
<div id="mainNavDiv" class="nav">
<table border="0" style="width: 100%">
<tr>
<td>
<div><b>main Level 1 ...</b></div>
<ul>
{% for nav in NavActive.0.SubMap.main.SubSlice %}
<li {% if nav.Active %}class="active"{% endif %}>
<a href="{{ nav.GoTo }}" title="{{ nav.This.Data.hoverText }}">
{{ nav.Navname }}
</a>
{% if nav.SubSlice %}
<ul>
{% for nav2 in nav.SubSlice %}
<li {% if nav2.Active %}class="active"{% endif %}>
<a href="{{ nav2.GoTo }}" title="{{ nav2.This.Data.hoverText }}">
{{ nav2.Navname }}
</a>
</li>
{% endfor %}
</ul
{% endif %}
</li>
{% endfor %}
</ul>
</td>
<td>
<div><b>main/service Level 2</b></div>
<ul>
{% for nav in NavActive.2.SubSlice %}
<li {% if nav.Active %}class="active"{% endif %}>
<a href="{{ nav.GoTo }}" title="{{ nav.This.Data.hoverText }}">
{{ nav.Navname }}
</a>
</li>
{% endfor %}
</ul>
</td>
</tr>
</table>
</div>
</header>
{% endblock %}
{% block breadcrumb %}
<div id="breadcrumb">
{% for nav in NavActive %}
<a href="{{ nav.GoTo }}" title="{{ nav.This.Data.hoverText }}">
{{ nav.Navname }}
</a>
{% endfor %}
</div>
{% endblock %}
{% block content %}
<div id="content">
{{ Body }}
</div>
{% endblock %}
{% block footer %}
<footer class="nav">
<div><b>service Level 1</b></div>
<ul>
{% for nav in NavActive.0.SubMap.service.SubSlice %}
<li {% if nav.Active %}class="active"{% endif %}>
<a href="{{ nav.GoTo }}" title="{{ nav.This.Data.hoverText }}">
{{ nav.Navname }}</a>
</li>
{% endfor %}
</ul>
</footer>
{% endblock %}
</body>
</html>
Wie im Beispiel zu sehen ist, werden einfache Variables über:
{{ Variable }}
eingebunden. Variablen können außerdem speziell weiterverarbeitet werden. Dies geschieht mit sogenannten Filtern oder Filterfunktionen. Die Syntax dafür ist folgendermaßen:
{{ Variable|Filter }}
Blockanweisungen dagegen verwenden zum Beispiel folgende Platzhalter:
{% if Variable %}
...
{% endif %}
Eine Liste der in Django möglichen Anweisungen finden Sie unter Django builtins.
mark2web Variablen
Der mark2web-Generator liefert für die Template-Verarbeitung Variablen für die Navigation und den Inhalt.
Website-Inhalte
Das rohe HTML, welches aus einer Markdown-Datei generiert wird steht über folgende Variablen zur Verfügung.
{{ Body }} = komplettes HTML aus der Markdown-Datei
{{ BodyParts.0 }} = erster HTML-Block
{{ BodyParts.1 }} = zweiter HTML-Block
usw.
Ist die Markdown-Datei durch --- auf einer Zeile (nach den Kopfdaten) geteilt, stehen die Einzelteile im Slice/Array {{ BodyParts }} zur Verfügung.
Aus folgender Markdown-Datei README.md in einem content-Unterverzeichnis:
# Titel 1
Text 1
---
## Titel 2
Text 2
wird für {{ Body }} folgendes HTML:
<h1>Titel 1</h1>
<p>Text 1</p>
<hr>
<h2>Titel 2</h2>
<p>Text 2</p>
BodyParts erklärt sich an folgendem Template:
<table>
<tr>
{% for part in BodyParts %}
<td>
{{ part }}
</td>
{% endfor %}
</tr>
</table>
Aus dem Template wird nach dem Rendern mit obiger Markdown-Datei also folgendes HTML:
<table>
<tr>
<td>
<h1>Titel 1</h1>
<p>Text 1</p>
</td>
<td>
<h2>Titel 2</h2>
<p>Text 2</p>
</td>
</tr>
</table>
Die Einrückungen im HTML wurden für die bessere Lesbarkeit angepasst. Wie zu sehen ist, wird --- in {{ Body }} laut Markdown-Syntax zu <br>. In {{ BodyParts.N }} ist es jedoch nicht enthalten, da es hier nur zur Trennung des Dokuments dient.
Navigation
Jedes Navigationselement steht intern in folgender go-Struktur zur Verfügung:
type navElement struct {
Navname string
GoTo string
Active bool
Data interface{}
This ThisPathConfig
SubMap *map[string]*navElement
SubSlice *[]*navElement
}
Diese erste Navigationsebene wird mit seinen Unternavigationspunkten zum einen auf die Variable {{ NavMap }} in Form einer Map (assoziatives Array) mit dem umgeformten Namen (wie im Zielverzeichnis) abgebildet.
Außerdem steht die erste Navigationsebene als Liste, bzw. Slice (Array) über die Variable {{ NavSlice }} zur verfügung.
Wird z.B. folgende Navigation als Zielverzeichnis-Struktur angenommen:
de
main
home
leistungen
referenzen
service
impressum
en
main
home
...
Der Teasertext aus folgender config.yml im content-Verzeichnis de/main/02_Leistungen
This:
Data:
teaser: Teasertext
welcher zum Navigationspunkt im Zielpfad de/main/leistungen gehört, ist über folgende Template-Variablen erreichbar:
{{ NavMap.de.SubMap.main.SubMap.leistungen.This.Data.teaser }}
oder
{{ NavSlice.0.SubSlice.0.SubSlice.1.This.Data.teaser}}
oder auch eine Kombination
{{ NavMap.de.SubMap.main.SubSlice.1.This.Data.teaser }}
Natürlich wird diese Variable in der Form so nie verwendet, sondern soll nur den Aufbau der Struktur verdeutlichen. Üblicherweise werden Schleifenblöcke verwendet um die Navigationsbäume auszugeben, wie z.B. eine Liste als Sprachwähler, wenn man annimmt, dass die erste Navigationsebene die Website-Sprache ist:
<ul>
{% for lang in NavMap %}
<li {% if lang.Active %}class="active"{% endif %}>
<a href="{{ lang.GoTo }}">{{ lang.Navname }}</a>
</li>
{% endfor %}
</ul>
Wie im Beispiel zu sehen ist, wird das aktive Navigationselement mit class="active" über die Variable Active aus der Struktur markiert.
aktiver Navigationspfad
Der aktive Navigationspfad ist über eine weitere vorbelegte Variable zu erfahren:
{{ NavActive }}
Ähnlich wie {{ NavSlice }} oder {{ ...SubSlice }} ist dies ein Slice/Array welches als Elemnte Navigationselemente aus oben angegebener Struktur enthält.
Im Gegensatz zu {{ NavSlice }} besteht die Liste nicht aus Elementen einer Ebene, sonder aus allen aktiven Elemtenten in des aktuellen Pfads.
Geht man also wieder vom obigen Beispiel aus und der aktive Pfad ist de/main/leistungen, so würden folgendes zutreffen:
{{ NavActive.0 }} ist das Navigationselement für "de"
{{ NavActive.1 }} ist das Navigationselement für "main"
{{ NavActive.2 }} ist das Navigationselement für "Leistungen"
Somit lassen sich leicht Pfade anzeigen, bzw. Breadcrumbs in die Website einbinden, wie im folgenden Beispiel:
aktiver Pfad:
{% for nav in NavActive %}
<a href="{{ nav.GoTo }}" title="{{ nav.This.Data.hoverText }}">{{ nav.Navname }}</a>
{% endfor %}
Ebenso lässt sich bei mehrsprachigen Seite immer die richte Hauptnavigation zur aktuelle Sprache laden:
<h3>Hauptnavigation</h3>
<ul>
{% for nav in NavActive.0.SubMap.main.SubSlice %}
<li {% if nav.Active %}class="active"{% endif %}>
<a href="{{ nav.GoTo }}" title="{{ nav.This.Data.hoverText }}">
{{ nav.Navname }}
</a>
{% if nav.SubSlice %}
<ul>
{% for nav2 in nav.SubSlice %}
<li {% if nav2.Active %}class="active"{% endif %}>
<a href="{{ nav2.GoTo }}" title="{{ nav2.This.Data.hoverText }}">
{{ nav2.Navname }}
</a>
</li>
{% endfor %}
</ul
{% endif %}
</li>
{% endfor %}
</ul>
Meta-Angaben
Über die Variablen
{{ Meta.Title }}
{{ Meta.Description }}
{{ Meta.Keywords }}
stehen die üblichen Meta-Angaben für die Verwendung im <head> Tag zur Verfügung.
weitere Daten
Die Variablen
{{ This.Navname }}
{{ This.Data }}
{{ Data }}
stehen ebenfalls zur Verfügung und spiegeln die Daten aus den Konfig-Dateien config.yml und den Kopfdaten der Markdown-Datei wieder.
Dokumentation
Ordnerstruktur
Konfiguration
Globale Konfiguration und individuelle Content-Einstellungen
mehr lesen »Inhalte
Website-Texte und Medien
mehr lesen »Templates
Aus Markdown wird HTML
mehr lesen »