🌐 3. Chunk-Template & Platzhalter
Ziel dieser Seite
Diese Seite beschreibt die Verwendung des Snippets
dwdWeatherin Verbindung mit einem MODX-Chunk (Template). Sie zeigt, wie die vom Snippet erzeugten Platzhalter ([[+fc_V_E]],[[+location]]usw.) im Frontend ausgegeben werden.
Überblick
Das Snippet dwdWeather liefert Wetterdaten als Platzhalter, die du im Frontend über ein Chunk-Template einbindest.
Dieses Template (z.B. dwdWetterTPL) legt das HTML-Gerüst und die Darstellung der Werte fest.
Platzhaltergruppen
Basisinformationen
| Platzhalter | Beschreibung |
|---|---|
[[+location]] |
Stationsname |
[[+pubDate]] |
Veröffentlichungszeitpunkt |
[[+pubDateDay]] |
Wochentag der Vorhersage |
[[+coordinates]] |
Geografische Koordinaten |
Sonneninformationen
| Platzhalter | Beschreibung |
|---|---|
[[+sunrise]] |
Sonnenaufgang |
[[+sunset]] |
Sonnenuntergang |
[[+dayduration]] |
Tageslänge (in Stunden) |
Luftdruck
| Platzhalter | Beschreibung |
|---|---|
[[+pTendenz]] |
Tendenz: steigend, fallend, stabil |
[[+pDelta]] |
Änderung in hPa pro Zeitraum |
Vorhersagedaten (Indexbasiert)
Der Platzhalteraufbau folgt dem Muster [[+fc_V_E]].
| Symbol | Bedeutung | Beispiel |
|---|---|---|
| V | Vorhersage-Index (0–19) | [[+fc_0_5]] |
| E | Element-ID (0–18) | [[+fc_0_10]] → Bewölkung |
Elemente 0–18
| ID | Beschreibung |
|---|---|
| 0 | Datum |
| 1 | Uhrzeit |
| 2 | Wochentag |
| 3 | min. Temperatur |
| 4 | max. Temperatur |
| 5 | Temperatur 2 m |
| 6 | Taupunkt |
| 7 | Windrichtung |
| 8 | Windgeschwindigkeit |
| 9 | Windböe |
| 10 | Wolkendecke |
| 11 | Luftdruck |
| 12 | Niederschlag 24 h |
| 13 | Niederschlag 6 h |
| 14 | Sonnenschein |
| 15 | Sichtweite |
| 16 | Wetterbeschreibung |
| 17 | Icon-Dateiname |
| 18 | Luftfeuchtigkeit |
Beispiel: Chunk dwdWetterTPL
📦 Beispielaufbau eines Chunks (HTML-Ausgabe)
Dieser Chunk wird vom Snippet mit Wetterdaten gefüllt.
Die Darstellung kann beliebig angepasst werden.
<div class="dwd-weather">
<div class="weather-day">
<h4>[[+fc0]] [[+fc2]] [[+fc1]]</h4>
<img src="[[+fc17]]" title="[[+fc16]]" alt="">
</div>
[[+fc5:gte=`0.1`:then=`<span class="label blue">[[+fc5]]</span>`:else=`<span class="label red">[[+fc5]]</span>`]]
<br>
<small>Sonnenschein: [[+fc14]]</small><br>
<small>Wolkendecke: [[+fc10]]</small><br>
<small>Niederschlag: [[+fc13]]</small><br>
<small>Wind (Richtung): [[+fc8]] ([[+fc7]])</small><br>
<small>Max. Windböe: [[+fc9]]</small><br>
<small>Luftdruck: [[+fc11]]</small><br>
<small>Luftfeuchte: [[+fc18]]</small><br>
<small>Sichtweite: [[+fc15]]</small><br>
</div>
Darstellung mit eigenem HTML-Gerüst
Das Snippet setzt alle Werte als Platzhalter.
Du kannst daher im Chunk völlig frei gestalten – z.B. mit Tabellen, Flexbox oder Grid.
💡 Tipp
Wenn du Wetter-Icons anzeigen willst, liegen diese standardmäßig unter
assets/dwd_img/.
Der Dateiname ergibt sich aus[[+fc17]].
Kombinierte Ausgabe
Ein einfaches Gerüst für mehrere Vorhersagen:
<div class="dwd-forecast">
<h3>[[+location]] — [[+pubDateDay]] [[+pubDate]]</h3>
<div class="days">
[[+dwdWeather]]
</div>
<p><small>Sonnenaufgang: [[+sunrise]] | Sonnenuntergang: [[+sunset]] | Tageslänge: [[+dayduration]] h</small></p>
</div>
Hinweise zur Gestaltung
- Das Layout kann per CSS frei angepasst werden.
- Bei dynamischen Einbindungen (
fcAll=true) kann es sinnvoll sein, nur bestimmte Werte perT1–T4zu verwenden. - Für farbliche Kennzeichnungen können Bedingungen (
:gte,:lt,:contains, …) in den MODX-Output-Filtern genutzt werden.
🎨 Empfehlung
Nutze konsistente Klassennamen und Styles (z.B.
.dwd-weather,.label.blue,.label.red), um das Erscheinungsbild klar zu strukturieren.