This commit is contained in:
Sebastian Frank
@@ -0,0 +1,375 @@
|
||||
---
|
||||
Data:
|
||||
background: /img/design.jpg
|
||||
|
||||
slider:
|
||||
- img: /img/design.jpg
|
||||
alt:
|
||||
opacity: 1
|
||||
|
||||
---
|
||||
|
||||
# Templates
|
||||
|
||||
Templates werden über das pongo2-Paket gerendert. Dieses nutzt die Template-Sprache **Django-Template**.
|
||||
|
||||
Sämtliche Template-Dateien sind im Ordner `templates` zu speichern.
|
||||
Die Endung kann frei gewählt werden. Für diese Dokumentation und auch als Grundlage für Beispiele wurde `.html` gewählt, da somit auch das Syntax-Highlighting gegeben ist.
|
||||
|
||||
## grober Überblick
|
||||
|
||||
Nachfolgend ist ein Beispiel eines Templates:
|
||||
|
||||
```django
|
||||
<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:
|
||||
|
||||
```django
|
||||
{{ Variable }}
|
||||
```
|
||||
|
||||
eingebunden. Variablen können außerdem speziell weiterverarbeitet werden. Dies geschieht mit sogenannten Filtern oder Filterfunktionen. Die Syntax dafür ist folgendermaßen:
|
||||
|
||||
```django
|
||||
{{ Variable|Filter }}
|
||||
```
|
||||
|
||||
Blockanweisungen dagegen verwenden zum Beispiel folgende Platzhalter:
|
||||
|
||||
```django
|
||||
{% if Variable %}
|
||||
...
|
||||
{% endif %}
|
||||
```
|
||||
|
||||
Eine Liste der in Django möglichen Anweisungen finden Sie unter [Django builtins](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/).
|
||||
|
||||
---
|
||||
|
||||
## mark2web Variablen
|
||||
|
||||
Der mark2web-Generator liefert für die Template-Verarbeitung Variablen für die Navigation und den Inhalt.
|
||||
|
||||
### Website-Inhalt
|
||||
|
||||
Das rohe HTML, welches aus einer Markdown-Datei generiert wird steht über folgende Variablen zur Verfügung.
|
||||
|
||||
```django
|
||||
{{ 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:
|
||||
|
||||
```markdown
|
||||
# Titel 1
|
||||
|
||||
Text 1
|
||||
|
||||
---
|
||||
|
||||
## Titel 2
|
||||
|
||||
Text 2
|
||||
```
|
||||
|
||||
wird für `{{ Body }}` folgendes HTML:
|
||||
|
||||
```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:
|
||||
|
||||
```django
|
||||
<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:
|
||||
|
||||
```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:
|
||||
|
||||
```go
|
||||
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:
|
||||
|
||||
```plain
|
||||
de
|
||||
main
|
||||
home
|
||||
leistungen
|
||||
referenzen
|
||||
service
|
||||
impressum
|
||||
en
|
||||
main
|
||||
home
|
||||
...
|
||||
```
|
||||
|
||||
Der Teasertext aus folgender `config.yml` im `content`-Verzeichnis `de/main/02_Leistungen`
|
||||
|
||||
```yaml
|
||||
This:
|
||||
Data:
|
||||
teaser: Teasertext
|
||||
```
|
||||
|
||||
welcher zum Navigationspunkt im Zielpfad *de/main/leistungen* gehört, ist über folgende Template-Variablen erreichbar:
|
||||
|
||||
```django
|
||||
{{ 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:
|
||||
|
||||
```django
|
||||
<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:
|
||||
|
||||
```django
|
||||
{{ 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:
|
||||
|
||||
```django
|
||||
{{ 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:
|
||||
|
||||
```django
|
||||
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:
|
||||
|
||||
```django
|
||||
<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
|
||||
|
||||
```django
|
||||
{{ 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
|
||||
|
||||
```django
|
||||
{{ 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.
|
||||
@@ -0,0 +1,3 @@
|
||||
This:
|
||||
Data:
|
||||
teaser: Aus Markdown wird HTML
|
||||
Reference in New Issue
Block a user