Der Blog wird mit Markdown formatiert. Die Texte sind gut lesbar und können mit jedem Editor erstellt werden. Frontmatter stellt ein einfaches Interface für beschreibende Inhalte und variable Bestandteile bereit. So werden bereits auf dieser Ebene Form und Inhalt getrennt.
Die Markup-Sprache Markdown ist der Quasi-Standard für die Erstellung von Texten im Internet. Selbst Wordpress-Artikel können in dieser Art und Weise verfasst werden.
Eine Migration von Texten von einem System in ein anderes ist generell mit wenig Aufwand möglich. Das größte Problem der Konvertierung von stellt das Auslesen der Daten aus der Datenbank dar. Jekyll, Hugo, Gatsby oder Larvendel-Datenquellen können in der Regel direkt in Bridgetown weiterverwendet werden.
Die Markup-Syntax
Es gilt
- Überschriften:
# , ##, ###, ####
am Beginn einer Zeile - Listen:
*
und0.
am Anfang einer Zeile - Kursiv:
_
wort_
stellt den Inhalt kursiv dar - Fettgedruckt:
**
wort**
oder__
wort__
- Absätze werden durch Leerzeilen getrennt
- Harter Zeilenumbruch: Zwei Leerzeichen am Ende eine Zeile
- Bilder:
<%= render Image.new file: 'dateiname' %>.
Die Image-Datei landen im Verzeichnissrc/images
- Links:
[Name](adresse)
erzeugt einen Linkeintrag. Adresse ist entweder ein externer Link oder ein interner Verweis, dann im Format/blog/link
oder/link
- Tabellen:
| name | name |
, gefolgt von| --- | --- |
. Diese sind jedoch nicht responsive.
Zusätzlich können Absätze mit {:.xxyy}
formatiert werden. xxyyy
ist die Bezeichnung einer CSS-Klasse. Mehrere Klassen werden mit einem Punkt verbunden:
{:.has-text-weight-medium.is-size-5.has-text-centered.my-10}
. Die Formatierung steht entweder vor oder hinter dem Absatz.
Individuelle Anpassungen sind über die Definition von Templates möglich.
Frontmatter
Oberhalb der Texte findet sich ein Abschnitt zur übergeordneten Formatierung und Einordnung des Beitrags in den Webauftritt. Beispielsweise wird der Seitentitel auch für die Navigation benutzt. Templates haben Zugriff auf die Variablen des Frontmatter-Bereichs.
Der Frontmatter-Bereich dieser Seite ist selbsterklärend:
---
layout: post
title: Die Blog-Syntax
category: html
preamble: |-
Der Blog wird mit Markdown formatiert. Frontmatter dient zur Einordung im Webauftritt.
---
Der Frontmatter-Bereich kann für sporadisch verändernde Inhalte verwendet werden.
Im Falle des Falles wird das Frontmatter aktualisiert. Der Text selbst kann statisch bleiben.
Die Frontmatter-Variablen können via <%= resource.data.variable %>
in den Text eingefügt werden.