---
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.