collections via markdown files
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Sebastian Frank
@@ -0,0 +1,82 @@
|
||||
---
|
||||
Data:
|
||||
background: /img/folder.jpg
|
||||
|
||||
slider:
|
||||
- img: /img/folder.jpg
|
||||
alt:
|
||||
opacity: 1
|
||||
|
||||
---
|
||||
|
||||
# Benutzung
|
||||
|
||||
## Ordnerstruktur
|
||||
|
||||
Das Ausgangsmaterial für die zu generierende Website wird in folgender Ordnerstruktur organisiert:
|
||||
|
||||
```plain
|
||||
DIR content
|
||||
FIL config.yml (Pfad-Konfiguration)
|
||||
DIR de (Sprache)
|
||||
DIR main (Navigationsbaum)
|
||||
DIR 01_Home (1. Ebene)
|
||||
FIL config.yml
|
||||
FIL README.md
|
||||
DIR 02_Download
|
||||
FIL README.md
|
||||
FIL bild.jpg
|
||||
FIL presse.zip
|
||||
DIR 03_Kontakt
|
||||
FIL README.md
|
||||
DIR 01_Adresse
|
||||
FIL README.md
|
||||
DIR 02_Anfahrt
|
||||
FIL README.md
|
||||
DIR 04_Impressum
|
||||
FIL README.md
|
||||
service
|
||||
DIR 01_Datenschutz
|
||||
FIL README.md
|
||||
DIR 02_AGB
|
||||
FIL README.md
|
||||
DIR 03_Impressum
|
||||
FIL README.md
|
||||
|
||||
DIR assets (kann auch abweichend benannt werden)
|
||||
DIR js
|
||||
DIR img
|
||||
DIR css
|
||||
|
||||
DIR templates
|
||||
DIR filters
|
||||
FILE myfilter.js
|
||||
FIL base.html
|
||||
FIL base_sub.html
|
||||
|
||||
FIL config.yml (globale Konfiguration, enthält andere Anweisungen als individuelle Pfad-Konfig, siehe Beispiel)
|
||||
```
|
||||
|
||||
In der Minimal-Variante sind nur die Ordner `content` und `templates` nötig.
|
||||
|
||||
---
|
||||
|
||||
### `content`
|
||||
|
||||
- enthält die Markdown-Dateien und Konfigurationen für die Navigationsstruktur und Einzelseiten
|
||||
- voranestellte Nummer mit Unterstrich wie z.B. `01_` dienen nur der Sortierung und gehen nicht in den eigentlichen Navigationspfad mit ein
|
||||
- zur Bildung des Navigationspfades werden die Verzeichnisnamen in Kleinschreibung konvertiert
|
||||
- Navigationsnamen für die Website werden aus dem Pfad gebildet, wobei `_`(Unterstriche) in Leerzeichen umgewandelt werden
|
||||
- Navigationsnamen können durch die `config.yml` überschrieben werden
|
||||
|
||||
#### Medien und Downloads
|
||||
|
||||
- Mediendateien werden neben den Inhalten in `content` abgelegt und müssen dementsprechend relativ verlinkt werden
|
||||
|
||||
### `assets`
|
||||
|
||||
- Bilder/CSS/JS die in Templates oder mehrfach in den Content-Seiten benötigt werden liegen in `assets`
|
||||
|
||||
### `templates`
|
||||
|
||||
- Template-Dateien für die Generierung der Website liegen hier
|
||||
@@ -0,0 +1,3 @@
|
||||
This:
|
||||
Data:
|
||||
teaser: Wie werden die Inhalte und Templates organisiert?
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
Template: base_doc.html
|
||||
|
||||
Data:
|
||||
background: /img/wire.jpg
|
||||
|
||||
slider:
|
||||
- img: /img/wire.jpg
|
||||
alt:
|
||||
opacity: 1
|
||||
|
||||
---
|
||||
|
||||
# Konfiguration
|
||||
|
||||
Die Konfigurationsdatein sind im YAML-Format gehalten (siehe: [Wikipedia](https://de.wikipedia.org/wiki/YAML)).
|
||||
@@ -0,0 +1,17 @@
|
||||
Die obersten Verzeichnis sich befindende Datei `config.yml` kann z.B. folgenden Inhalt haben:
|
||||
|
||||
```yaml
|
||||
Webserver:
|
||||
Type: "apache"
|
||||
|
||||
Assets:
|
||||
FromPath: "assets"
|
||||
ToPath: "assets"
|
||||
Action: "copy"
|
||||
FixTemplate:
|
||||
Find: "\\.\\./assets/"
|
||||
Replace: ""
|
||||
|
||||
OtherFiles:
|
||||
Action: "copy"
|
||||
```
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Derzeit wird hier nur der Wert `apache` unterstützt. Ist dieser Wert gesetzt werden automatische .htaccess-Dateien mit mod_rewrite-Anweisungen generiert, die eine saubere Weiterleitung bei entsprechenden Konfig-Anweisungen im `content`-Verzeichnis ermöglichen.
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
`Assets:` steuert, wie mit Bild/JS/CSS Dateien umgegangen werden soll.
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Lage des Asset-Verzeichnis unterhalb des `content`-Verzeichnis
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Zielverzeichnis im Ausgabe-Verzeichnis der fertig generierten Website
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Derzeit nur `copy`, also das Kopieren der Dateien und Unterordner ins Zielverzeichnis
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Wenn hier `Find:` (regulärer Ausdruck) und `Replace:` (Ersetzung) angeben sind, werden die gefundenden Pfadangaben in der generierten HTML-Dateien durch den korrekten relativen Pfad zum Asset-Verzeichnis ersetzt.
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
`OtherFiles:` definiert, wie mit anderen Dateien innerhalb des `content`-Verzeichnis umgegangen werden soll.
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Derzeit nur `copy`, also das Kopieren der Dateien in das entsprechende Unterverzeichnis im Ausgabe-Verzeichnis
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Im `content`-Verzeichnis, sowie in jedem Unterverzeichnis unterhalb von `content` kann sich eine `config.yml`-Datei befinden, wie aus folgendem Beispiel:
|
||||
|
||||
```yaml
|
||||
This:
|
||||
GoTo: "/de/service/impressum/"
|
||||
Navname: "Impressumsverweis"
|
||||
|
||||
```
|
||||
|
||||
oder
|
||||
|
||||
```yaml
|
||||
This:
|
||||
Navname: "FAQ's"
|
||||
Data:
|
||||
slogan: "Wer nicht fragt, bekommt keine Antwort."
|
||||
|
||||
Template: "base.html"
|
||||
|
||||
Index:
|
||||
InputFile: "README.md"
|
||||
OutputFile: "index.html"
|
||||
|
||||
Meta:
|
||||
Title: "Fragen und Antworten"
|
||||
Description: "Dies ist die Fragen und Antworten Unterseite."
|
||||
Keywords: "FAQ, Fragen, Antworten"
|
||||
|
||||
Data:
|
||||
background: "bg.jpg"
|
||||
slider:
|
||||
- img: "assets/img/slider1.jpg"
|
||||
alt: "Alternativtext 1"
|
||||
- img: "assets/img/slider2.jpg"
|
||||
alt: "Alternativtext 2"
|
||||
- img: "assets/img/slider3.jpg"
|
||||
alt: "Alternativtext 3"
|
||||
|
||||
```
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Sämtlich Werte unterhalb dieser Sektion gelten nur für den Inhalt, bzw. Navigationspunkt in dessen Ordner sich die `config.yml` befindet. Die Werte werden nicht an Unterordner wertervererbt.
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Falls der Navigationspunkt selbst keinen Inhalt darstellen soll, sondern nur weiterleiten soll, so wird hier das Weiterleitungsziel eingegeben.
|
||||
Das Ziel ist der absolute (startend mit `/`) oder relative Pfad zum Zielnavigationspunkt.
|
||||
Die Schreibweise des Pfades ist so zu verwenden, wie der Pfad nach Umschreibung und Säuberung des Pfades im Zielverzeichnis dargestellt wird.
|
||||
Aus `de/mainnav/03_Fragen und Antworten` wird also z.B. `de/mainnav/fragen-und-antworten`.
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Dieser Wert überschreibt den aus dem Ordnernamen automatisch abgeleiteten Navigationspunkt-Namen. Dies ist zum Beispiel dann nützlich, wenn Sonderzeichen im Verzeichnisnamen nicht vorkommen sollen, aber im Namen des Navigationspunkts gebraucht werden.
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Unterhalb von `Data:` können beliebige Datenstrukturen erfasst werden. Da diese Struktur unterhalb von `This:` angeordnet ist, werden auch die Daten nicht weiter an Unterordner vererbt.
|
||||
Hier können z.B. Informationen zum Navigationspunkt abgelegt werden, die im Template Zusatzinformationen darstellen (z.B. ein Slogan zu einem Navigationspunkt).
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
Unter `Title:`, `Description:` und `Keywords:` werden die typischen Metaangaben abgelegt, die im
|
||||
|
||||
```html
|
||||
<head>
|
||||
...
|
||||
</head>
|
||||
```
|
||||
|
||||
übllicherweise Verwendung finden. Die entsprechenden Platzhalter stehen im Template zur Verfügung.
|
||||
|
||||
`Meta:` vererbt seine individuellen Informationen an die Unterordner weiter, sofern diese dort nicht selbst in einer `config.yml` oder im Kopf der Markdown-Datei definiert sind.
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
Data:
|
||||
Version: "ab v1.0"
|
||||
|
||||
---
|
||||
|
||||
`Data:` an dieser Stelle kann, wie auch `Data:` unterhalb von `This:`, beliebige Daten aufnehmen. Die Daten hier allerdings werden an Unterordner weitervererbt, sofern diese nicht dort oder in der Markdown-Datei selbst festegelegt überschrieben wurden.
|
||||
@@ -0,0 +1,9 @@
|
||||
This:
|
||||
Data:
|
||||
teaser: Globale Konfiguration und individuelle Content-Einstellungen
|
||||
Collections:
|
||||
- Name: doccoll
|
||||
Directory:
|
||||
Path: "."
|
||||
MatchFilename: "^_\\d+(?P<lowdash>_*)(?P<title>.+)\\.md"
|
||||
ReverseOrder: False
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
Data:
|
||||
background: /img/write.jpg
|
||||
|
||||
slider:
|
||||
- img: /img/write.jpg
|
||||
alt:
|
||||
opacity: 1
|
||||
|
||||
---
|
||||
|
||||
# Inhalte
|
||||
|
||||
Die Inhalte der Website werden im Ordner `content` und dessen Unterordnern gespeichert.
|
||||
Texte werden dazu im Format **markdown** (siehe: [markdown.de](http://markdown.de/)) eingepflegt.
|
||||
Bilddateien und anderen Medieninhalte werden einfach direkt neben den Markdown-Dateien im Verzeichnis des jeweiligen Navigationspunktes abgelegt.
|
||||
|
||||
---
|
||||
|
||||
Jede Seite ist innerhalb der Ordnerstruktur (Navigation) standardmäßig als `README.md` gespeichert. Die Datei ist eine normale Markdown-Datei mit einem optionalen Header:
|
||||
|
||||
```markdown
|
||||
---
|
||||
Meta:
|
||||
Title: Seitentitel für die Meta-Angaben
|
||||
Keywords: Meta-Keywords
|
||||
Description: Meta-Description
|
||||
|
||||
Data: # Vererbung spielt hier keine Rolle, da Markdown-Datei letzte Ebene in der Generierung ist
|
||||
image: bild.jpg
|
||||
|
||||
---
|
||||
|
||||
# Seitentitel
|
||||
|
||||
Seiteninhalt, lorem ipsum...
|
||||
|
||||
## Überschrift 2
|
||||
|
||||
Weiterer Absatz, usw...
|
||||
```
|
||||
|
||||
## zusätzliche Konfiguration
|
||||
|
||||
Wie bereits unter [Konfiguration](../konfiguration) beschrieben, kann sich in jedem Ordner unterhalb von `content` eine `config.yml`-Datei befinden.
|
||||
Deren vererbaren Einstellungen können auch im Kopf der Markdown-Datei überschrieben werden.
|
||||
`This: -> Navname:` im Kopf zu setzen ist allerdings nicht möglich, da die Navigation bereits vor dem Verarbeiten der Markdown-Datei generiert wird.
|
||||
|
||||
Die Kopfdaten müssen mit `---` in der ersten Zeile eingeleitet werden und mit `---` auf einer einzelnen Zeile abgeschlossen werden. `---` dürfen auch nicht eingerückt sein.
|
||||
@@ -0,0 +1,3 @@
|
||||
This:
|
||||
Data:
|
||||
teaser: Website-Texte und Medien
|
||||
@@ -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
|
||||
@@ -0,0 +1,9 @@
|
||||
This:
|
||||
GoTo: ordnerstruktur
|
||||
|
||||
Data:
|
||||
|
||||
slider:
|
||||
- img: /img/gears.jpg
|
||||
alt:
|
||||
opacity: 1
|
||||
Reference in New Issue
Block a user