{{page.vorname}} setzt den Wert vorname aus dem Frontmatter einer Seite einvorname: "Harry"
nachname: "Potter"
---
<p>
Der Name ist {{ page.nachname }},
<em>{{ page.vorname }}</em> {{ page.nachname }}.
</p>
Was war nochmal Frontmatter?
Den Daten-Bereich über dem HTML-Code
- als Aufzählungszeichen notiert#each ermöglicht die Iteration über Listen#each-Blocks wird für jedes Element der Liste einmal ausgeführt#each-Bereich ohne Präfix zur Verfügungthisdinge:
- Hase
- Katze
- 🐈
- true
- Hase
- 13
- 💩
---
<h1>Auflistung von Dingen</h1>
<ol>
{{#each page.dinge }}
<li>Ding: {{ this }}</li>
{{/each}}
</ol>Warum sind die Dinge in der Ausgabe nummeriert?
<ol> sorgt für Nummerierung.
- eingerückt werden.-Notation zur Verfügung. natürlich this stehenpersonen:
- name: Bibi Blocksberg
job: Hexe
- name: Kartoffelbrei
job: Besen
---
<ul>
{{#each page.personen}}
<li><q>{{ this.name }}</q> ist von Beruf <emph>{{ this.job }}</emph></li>
{{/each}}
</ul>
YAML-Schreibweise im FrontmatterSQL sehr viel bequemerJSON-SchreibweiseJSON-Objekt ist auch ein gültiges YAML-Objekt{ "name": "Bibi Blocksberg", "job": "Hexe", "age": 9 }[1, 2, 3, "ganz viele", ["unter", "liste"], { "ein": "objekt"} ]{
"personen": [
{
"hobbies": ["lesen", "schwimmen", "reiten"],
"name": "Thomas"
},
{
"name": "Annika",
"hobbies": ["Xbox", "PC"]
}
]
}
---
{{#each page.personen}}
<p>
Mein Name ist {{ this.name }} und meine Hobbies sind
<ul>
{{#each this.hobbies }}
<li>{{ this }}</li>
{{/each}}
</ul>
</p>
{{/each}}this taucht zweimal mit verschiedenen Bedeutungen auf{
"numbers": [
[1,2,3,4,5,6],
[2,4,6,8,10,12],
[3,6,9,12,15,18],
[4,8,12,16,20,24],
[5,10,15,20,25,30]
]
}
---
<table border="1">
{{#each page.numbers}}
<tr>
{{#each this}}
<td>
{{ this }}
</td>
{{/each}}
</tr>
{{/each}}
</table>this kann auf den aktuellen Kontext zugegriffen werdenthis.page.wert schreiben könneneach) eröffnen einen neuen Kontextif) hingegen nicht../ kann auf den Kontext der übergeordneten Ebene zugegriffen werden{
"name": "Hagrid",
"tiere": [
"Spinne", "Flubberwürmer", "Hippogreif",
"Niffler", "Knallrümpfige Kröter"
]
}
---
<ul>
{{#each page.tiere}}
<li>{{../page.name}} stellte vor: {{ this }}</li>
{{/each}}
</ul>
SQL-Abfragen funktioniert wie gewohntchapter: >
SELECT *
FROM chapter;
---
<ul>
{{#each page.chapter}}
<li>{{ this.caption }}</li>
{{/each}}
</ul>
chapter: >
SELECT *
FROM chapter;
---
<table>
<tr>
<th>ID</th>
<th>Überschrift</th>
</tr>
{{#each page.chapter}}
<tr>
<td>{{ this.chapter_id }}</td>
<td>{{ this.caption }}</td>
</tr>
{{/each}}
</table>
if-Block{{#name}} eingeleitet und mit {{/name}} geschlossen#-Zeichen kennzeichnet einen öffnenden Blockname des Blocks muss beim Öffnen und Schließen identisch seinif-Block: Angabe eines Wahrheitswertesfalse0"" (leere Zeichenkette)[] (leere Liste)true, Strings mit Inhalt, Zahlen ≠ 0, …if-Block{
"vorname": "Hermine",
"nachname": "Granger",
"weiblich": true,
"geburtsjahr": 1979
}
---
<ul>
<li>Vorname: {{ page.vorname }}</li>
<li>Nachname: {{ page.nachname }}</li>
{{#if page.weiblich}}
<li>Geschlecht: Weiblich</li>
{{/if }}
{{#if page.männlich}}
<li>Geschlecht: Männlich</li>
{{/if}}
<li>Geburtsjahr: {{ page.geburtsjahr }}</li>
</ul>if-Block: Redundanz vermeidenif-Blocks nur einmalige Angabe notwendig{
"vorname": "Ronald Bilius",
"nachname": "Weasley",
"männlich": true,
"geburtsjahr": 1980
}
---
<ul>
<li>Vorname: {{ page.vorname }}</li>
<li>Nachname: {{ page.nachname }}</li>
<li>
Geschlecht:
{{#if page.weiblich}}
Weiblich
{{/if }}
{{#if page.männlich}}
Männlich
{{/if}}
</li>
<li>Geburtsjahr: {{ page.geburtsjahr }}</li>
</ul>if-Block: Doppelte Geschlechter{
"vorname": "Kim",
"nachname": "Sheringham",
"weiblich": true,
"männlich": true,
"geburtsjahr": 1979
}
---
<ul>
<li>Vorname: {{ page.vorname }}</li>
<li>Nachname: {{ page.nachname }}</li>
<li>
Geschlecht:
{{#if page.weiblich}}
Weiblich
{{/if }}
{{#if page.männlich}}
Männlich
{{/if}}
</li>
<li>Geburtsjahr: {{ page.geburtsjahr }}</li>
</ul>else-Blockif-Block kann optional ein else-Block definiert werdenif-Block eben nicht ausgeführt wurde{
"vorname": "Firenze",
"nachname": "(Zentaur)",
"geburtsjahr": "unbekannt"
}
---
<ul>
<li>Vorname: {{ page.vorname }}</li>
<li>Nachname: {{ page.nachname }}</li>
<li>
Geschlecht:
{{#if page.weiblich}}
Weiblich
{{else}}
Nicht weiblich (Männlich?)
{{/if}}
</li>
<li>Geburtsjahr: {{ page.geburtsjahr }}</li>
</ul>{
"personen": [{
"name": "Pippilotta Viktualia Rollgardina Pfefferminz Efraimstochter Langstrumpf",
"hobbies": ["Pferde heben", "Limonade brauen", "reiten"]
}, {
"name": "Fräulein Prysselius",
"hobbies": []
}
]
}
---
{{#each page.personen}}
<p>
Mein Name ist {{ this.name }} und
{{#if this.hobbies }}
meine Hobbies sind
<ul>
{{#each this.hobbies }}
<li>{{ this }}</li>
{{/each}}
</ul>
{{ else }}
ich habe keine Hobbies.
{{/ if }}
</p>
{{/each}}URL-ParameterURL Query ParameterURL können mittels des Query-Teils (eingeleitet durch ?) beliebige Paramter übergeben werdenname=wert-Paaren/suche?begriff=mist/kapitel?nummer=4& getrennt/suche?begriff=mist&seit=2009/kapitel?nummer=4&tageszeit=abendURL Query Parameter mit request.getrequest-Objekt bietet auf jeder Seite Zugriff auf BenutzereingabenGET steht für URL-ParameterHier sollte das Kapitel mit der ID {{ request.get.kapitel }} stehen.GET-Parameter müssen nicht zwingend vorhanden seinif ist sinnvoll{{# if request.get.kapitel }}
Hier sollte das Kapitel mit der ID {{ request.get.kapitel }} stehen.
{{ else }}
Hey, es muss schon ein Kapitel angegeben werden!
{{/ if }}Welche potenziell validen, aber von einem if als “falsch” deklarierten, Werte könnte ein Benutzer angeben?
Den leeren String und die Zahl 0
URL Query Parameter in SQL-AbfragenURL-Parameter auch aus SQL möglichSQL-Syntax: :platzhalter, also ein Doppelpunkt gefolgt vom Namen des PlatzhaltersSQL-Syntax um Abfragen zu parametrisierenfhw-web-Framework: Alle URL-Parameter stehen in jeder Abfrage zur Verfügungrequest.get nicht nötigchapter: >
SELECT *
FROM chapter
WHERE chapter_id = :kapitel;
---
Das Kapitel mit der ID {{ page.chapter.chapter_id }}
heißt "{{ page.chapter.caption }}".
HTML-Benutzereingaben<form>-Elementmethod-AttributHTTP-Verben GET und POST mit unterschiedlicher Semantikaction-AttributURL<input type="text"> für Tastatureingabentype-Attributes für bestimmte Eingaben spezialisiert werdennamevalue<input type="submit">value-Attribut beeinflusst werdenmethod="GET"URLaction definiert und soll in diesem Fall die Werte einfach nur ausgeben/form: Nimmt beliebige Parameter entgegen und zeigt Sie in JSON-Darstellung anquery-Objekt stehen für GET-Parameterbody-Objekt stehen für POST-Parameter{ "template": "html" }
---
<form method="GET" action="/form">
<p>
Ihr Name:
<input type="text" name="username">
</p>
<p>
Ihre Kreditkartennummer:
<input type="text">
</p>
<input type="submit" name="accept" value="Name setzen!">
<input type="submit" name="decline" value="Bestimmt nicht!!">
</form>
type="hidden"name und value müssen wie gehabt angegeben werden{ "template": "html" }
---
<form method="GET" action="/form">
<p>
Ihr Name:
<input type="text" name="username">
</p>
<input type="hidden" name="secret" value="2">
<input type="submit" name="accept" value="Name übertragen">
</form>