Eleventy Präsentations-Template

Eine einfache Vorlage für automatisch ablaufende Präsentationen mit Eleventy, Nunjucks, JavaScript und CSS.

Die Vorlage eignet sich besonders für Präsentationen, die aus mehreren Zeitleisten, Bildergalerien und einzelnen Großbildern bestehen und anschließend automatisch wieder von vorne beginnen.

Ziel der Vorlage

Die Vorlage soll als Ausgangspunkt für neue Projekte dienen.

Dabei ist die Struktur bewusst einfach gehalten:

• Daten werden getrennt von der Darstellung gepflegt.
• Bilder liegen in einem eigenen Verzeichnis.
• Nunjucks erzeugt aus den Daten die Präsentationsansichten.
• JavaScript steuert den automatischen Ablauf.
• CSS bestimmt die Gestaltung.
• Eleventy übernimmt den Bau der fertigen Website.

Die Vorlage ist damit sowohl für neue Projekte als auch zum Lernen und Nachschlagen gedacht.

---

Projektstruktur

projekt/
│
├── src/
│   ├── _data/
│   │   ├── meilensteine.js
│   │   ├── jahre.js
│   │   ├── 20jahre.js
│   │   └── veranstaltungen.js
│   │
│   ├── static/
│   │   └── bilder/
│   │
│   ├── css/
│   │   └── style.css
│   │
│   └── index.njk
│
├── .eleventy.js
├── .gitignore
├── package.json
└── README.md

_data/

Hier liegen die Datenquellen der Präsentation.

In der Vorlage sind vier unterschiedliche Datenbereiche vorgesehen:

• meilensteine.js – thematische Inhalte
• jahre.js – chronologische Inhalte
• 20jahre.js – weiterer chronologischer Abschnitt
• veranstaltungen.js – aktuelle Veranstaltungen

Die Dateien enthalten JavaScript-Arrays mit den jeweiligen Titeln, Vorschaubildern und Galeriebildern.

Die Daten können verändert werden, ohne die eigentliche Präsentationslogik in index.njk ändern zu müssen.

static/bilder/

Hier können lokale Bilder für die Präsentation abgelegt werden.

Eleventy kopiert diesen Ordner beim Build automatisch nach:

public/bilder/

Für Experimente können anstelle lokaler Bilder auch externe Bild-URLs verwendet werden.

css/

Hier befindet sich die Gestaltung der Präsentation.

Die CSS-Dateien werden beim Build unverändert nach:

public/css/

kopiert.

index.njk

Dies ist die eigentliche Präsentationsvorlage.

Hier werden unter anderem erzeugt:

• Deckblatt
• Zeitleisten
• Bildergalerien
• Einzelbild-Durchlauf
• Schlussbild

Außerdem befindet sich am Ende der Datei das JavaScript, das die automatische Reihenfolge und die Anzeigedauer steuert.

.eleventy.js

Hier wird Eleventy konfiguriert.

Die Vorlage verwendet:

src/ → public/

und kopiert Bilder und CSS als statische Dateien.

Als Template-Sprache wird Nunjucks verwendet.

---

Voraussetzungen

Benötigt werden:

• Node.js
• npm

Die verwendete Eleventy-Version ist in package.json festgelegt.

---

Installation

Nach dem Klonen des Projekts:

npm install

Dadurch werden die benötigten Abhängigkeiten installiert.

---

Lokale Entwicklung

Für die Entwicklung kann der integrierte Eleventy-Server gestartet werden:

npm run dev

Eleventy startet anschließend einen lokalen Entwicklungsserver.

Änderungen an den Dateien können während der Entwicklung direkt im Browser überprüft werden.

---

Produktions-Build

Die fertige Website wird mit:

npm run build

erzeugt.

Das Ergebnis befindet sich anschließend im Verzeichnis:

public/

Der Ordner public/ wird nicht versioniert, sondern bei jedem Build neu erzeugt.

---

Präsentationsablauf

Der automatische Ablauf wird in index.njk im Array ablauf festgelegt.

Dort werden die einzelnen Ansichten in ihrer gewünschten Reihenfolge eingetragen.

Beispielsweise:

Deckblatt
↓
Thematische Zeitleiste
↓
Thematische Galerien
↓
Chronologische Zeitleiste
↓
Chronologische Galerien
↓
Veranstaltungen
↓
Einzelbilder
↓
Schlussbild
↓
zurück zum Deckblatt

Die Reihenfolge kann dort geändert werden, ohne die Datenquellen selbst umzubauen.

---

Anzeigedauer

Die Anzeigedauer wird am Anfang des JavaScript-Bereichs in index.njk festgelegt:

const TIMELINE_SECONDS = 14;
const GALLERY_SECONDS = 9;
const FADE_MS = 1200;

Während der Entwicklung können kurze Werte verwendet werden, damit die Präsentation schneller getestet werden kann.

Beispielsweise:

const TIMELINE_SECONDS = 1;
const GALLERY_SECONDS = 1;
const FADE_MS = 200;

Für die eigentliche Vorführung können anschließend längere Werte eingestellt werden.

---

Grundprinzip

Die Vorlage trennt bewusst zwischen Daten, Darstellung, Gestaltung und Ablauf:

_data/
   │
   │ Daten
   ↓
index.njk
   │
   │ Darstellung
   ↓
JavaScript
   │
   │ Ablauf
   ↓
CSS
   │
   │ Gestaltung
   ↓
fertige Präsentation

Diese Trennung macht es möglich, zunächst die Daten zu verändern und anschließend unabhängig davon Darstellung und Ablauf anzupassen.

---

Verwendung als Vorlage

Für ein neues Projekt kann dieses Repository als Ausgangspunkt verwendet werden.

Empfohlene Vorgehensweise:

1. Repository kopieren oder forken.
2. Inhalte der _data/-Dateien anpassen.
3. Eigene Bilder in src/static/bilder/ ablegen.
4. Titel und Texte in index.njk anpassen.
5. Gestaltung in src/css/style.css anpassen.
6. Präsentationsablauf und Anzeigedauer bei Bedarf ändern.
7. Mit npm run dev lokal testen.
8. Mit npm run build die fertige Website erzeugen.

---

Lernhinweis

Die Vorlage ist bewusst nicht maximal abstrahiert.

Wiederkehrende Strukturen sind teilweise mehrfach ausgeschrieben. Dadurch bleibt nachvollziehbar, wie die einzelnen Datenquellen mit den jeweiligen Ansichten verbunden sind.

Eine spätere Weiterentwicklung könnte wiederkehrende Strukturen zusammenfassen und stärker abstrahieren.

Für das Lernen und Experimentieren ist die explizite Variante jedoch leichter nachzuvollziehen.

---

Lizenz

Code: MIT License

Für eigene Projekte sollten die Rechte an verwendeten Bildern, Logos, Texten und sonstigen Inhalten jeweils separat geprüft und angegeben werden.

Die Vorlage selbst enthält keine Rechte an den Inhalten eines daraus erstellten Projekts.