Source code of my private homepage.
- Build with Static Site Generator Eleventy
- CSS created with TailwindCSS and the Typography Plugin
- Icons from IcoMoon Free bundle
- Using SimpleLightbox for gallery overlays
- Using Masonry Library for (optional) gallery styling
Folgende Optionen stehen im Frontmatter zur Verfügung:
description
: SEO Beschreibung des Artikelsexcerpt
: Vorschautext des Artikels bzw. der Seiteheader
teaser
: Vorschaubild der Seite oder Artikelsoverlay_image
: Hero-Bild der Seiteoverlay_filter
: Farbanpassung/Überlagerung des Hero-Bildes in rgb, Beispielswert:rgba(200, 200, 200, 0.6)
gallery
: Liste von Bildern, die in einer Galerie dargestellt werden sollen. Es kann auch ein anderer Name verwendet werden, und über denid
-Parameter an den gallery-include übergeben werden.image_path
: Ein Element der Galerie-Liste, das den Pfad zum Bild angibt.
itinerary
: Liste mit Reisestationen (nurcountry
-layout)name
: Name/Überschrift der Stationimage
: Bild des Ortesdescription
: Kurzer Beschreibungstext der Station
itinerary_title
: Möglichkeit die Reisestationen auf der Seite unter einem speziellen Namen darzustellen (nurcountry
-layout)map_id
: ID der Google Maps Karte, die auf der Seite dargestellt werden soll (nurcountry
-layout)country_tag
: Das Tag, um alle zugehörigen Artikel aufzulisten (nurcountry
-layout)tagline
: Unterüberschrift, die ggf. im Hero-Image-Bereich dargestellt wird.toc
:true
falls eine Inhaltsangabe oberhalb des Artikels angezeigt werden soll.full_width
:true
falls die Seite über die vollständige Breite descontainer
-Elements dargestellt werden soll.typography
:false
falls das Tailwind-Typography Plugin für den Content der Seite nicht angewendet werden soll.lightbox
:true
falls das SimpleLightbox-Skript in der Seite verfügbar sein soll. Jedoch nicht notwendig, wenngallery
gesetzt ist.masonry
:true
falls das Masonry-Skript in der Seite verfügbar sein soll.show_meta_data
:true
falls Veröffentlichungsdatum und Lesezeit beim Artikel angezeigt werden soll.
Artikel werden über Kategorien und Tags organisiert. Da es dabei leider keine Hierarchieebenen dabei gibt, nutze ich als Definition Kategorien als Hauptebene und Tags als Unterkategorien.
Die Seite ist aktuell so strukturiert:
- Reisen (Kategorie)
- Reisebericht (Tag)
- Reisetipps
- ... Länder, Städte, etc.
- Fotografie
- Ausrüstung
- Fotowissen
- Software
- Technik
- Tools
- Homepage
- Coding
- Allgemein
Um den Überblick über alle verwendeten Elemente und Styles zu behalten, sind alle auf einer Seite vorhanden.