Blog-Texte

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: * und 0. 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 Verzeichnis src/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.