Sie befinden sich hier: start » de » Interne Dokumentation » DokuWiki Erweiterungen (WvdS) » WvdS.DokuWiki.Flat Template

Inhaltsverzeichnis

WvdS.DokuWiki.Flat Template

Template: flat
Version: 1.2.0 (WvdS-Erweiterungen)
Namespace: lib/tpl/flat/
Original: beemoon contact@beemoon.fr
Erweiterungen: Wolfgang van der Stille zeljko.petrusic@outlook.de
Lizenz: GPL 2

Definition

Das Flat Template ist ein minimalistisches, responsives DokuWiki-Template mit umfangreichen WvdS-Erweiterungen für Mehrsprachigkeit, Sprachwechsler, konfigurierbare Sidebars, Logo-System mit base64-Rendering, mobile-optimiertes Layout und nahtlose Integration mit den WvdS-Plugins.

Änderungen vs. Original

Komponente Original WvdS
customFlat.css 3.4 KB (176 Zeilen) 52 KB (~2000 Zeilen)
main.php 2.9 KB (69 Zeilen) 13 KB (~240 Zeilen)
Fonts Google Fonts CDN System Fonts (Offline)
jQuery Google CDN Lokal (jquery.min.js)
Neue Dateien - lang_helper.php, widgets.php, accessibility.css, logo.css, color-palette.css

Anwendungsfälle

  • Mehrsprachige Dokumentation - Automatischer Sprachwechsler und Spracherkennung
  • Wissensdatenbanken - Saubere Navigation mit Akkordeon-Menüs
  • Mobile Nutzung - Kompakter Header (96px) mit Hamburger-Menü
  • Projektdokumentation - Hierarchische Sidebar-Struktur
  • Unternehmens-Wikis - Professionelles, anpassbares Design
  • Optimierte Performance - Inline-base64-Bilder, lokale Fonts

Funktionen

WvdS-Erweiterungen

Funktion Beschreibung
Sprachwechsler Eingebauter Sprachwechsel mit Flaggen-Icons
Automatische Weiterleitung Weiterleitung basierend auf Browser-Sprache
Dual-Sidebar Konfigurierbare obere und untere Sidebar
Akkordeon-Menü Zusammenklappbare Navigation
Mehrsprachige Texte Unterstützung für de:X|en:Y Format
Logo-System Flexibles Logo mit base64-Rendering via wvdsimage
TOC-Zustand Inhaltsverzeichnis-Status wird in Cookie gespeichert
Plugin-Integration Nahtlose Zusammenarbeit mit WvdS-Plugins

Mobile-Optimierung (NEU)

Funktion Beschreibung
Kompakter Header 96px (Tablet) / 80px (Smartphone) mit gleichen Abständen
Hamburger-Menü Slide-over statt 300px-Shift, schließt bei Anchor-Klick
Anchor-Scroll Header-Offset verhindert, dass Anchors hinter Header landen
Dark Mode Verhinderung color-scheme: only light erzwingt helles Design
Touch-freundlich 44×44px Touch-Targets für Buttons

Styling-Erweiterungen (NEU)

Bereich Beschreibung
Login/Register Card-Design mit KRITIS-Orange Akzent
Admin-Menü Modernisiertes Design mit Console-Style Version
Config Manager Verbesserte Lesbarkeit, KRITIS-Farbschema
Discussion Plugin Apple/Microsoft-Style Kommentare
TOC Sticky mit modernem Schatten-Design
Footer Dunkle Schrift auf hellem Hintergrund

Konfiguration

Sprachwechsler

Einstellung Typ Standard Beschreibung
enableLangSwitcher An/Aus Aus Sprachwechsler aktivieren
languages Text de,en Verfuegbare Sprachen (kommagetrennt)
langPosition Zahl 0 Position der Sprache im Namespace (0 = erste Ebene)
defaultLanguage Text de Standard-Sprache fuer Fallback
enableAutoRedirect entfernt: Automatische Weiterleitungen werden nun ueber das WvdS.DokuWiki.Cond Plugin Plugin gesteuert. Nutzen Sie {{wvds:redirect target="{lang}:start"}} in Ihren Wiki-Seiten.
Einstellung Typ Standard Beschreibung
topSidebar Text sidebar Obere Sidebar-Seite
bottomSidebar Text sidebar1 Untere Sidebar-Seite
topSidebarTitle Text (leer) Titel der oberen Sidebar
bottomSidebarTitle Text (leer) Titel der unteren Sidebar
adminSidebarTitle Text (leer) Titel der Admin-Sidebar
enableAccordion An/Aus Aus Akkordeon-Verhalten für Sidebar

Layout (NEU)

Einstellung Typ Standard Beschreibung
siteWidth Zahl 75 Seiten-Breite
siteWidthUnit Auswahl % Einheit (%, px, em, rem)
sidebarWidth Zahl 300 Sidebar-Breite
sidebarWidthUnit Auswahl px Einheit (px, %, em, rem)

Logo und Titel

Einstellung Typ Standard Beschreibung
showTitle An/Aus An Wiki-Titel anzeigen
showLogo An/Aus Aus Logo anzeigen
logoSource Auswahl template Logo-Quelle: template, wiki, url
logoPath Text (leer) Pfad je nach Quelle (Dateiname, wiki:pfad oder URL)
logoContainerSize Zahl 300 Container-Größe in Pixel (quadratisch)
logoFit Auswahl contain Bildanpassung: contain, cover, fill, scale-down, none
logoPosition Auswahl center Position im Container: center, top, bottom, etc.
logoMaxWidth Zahl 300 Max. Resize-Breite für Bildoptimierung
logoQuality Zahl 90 Bildqualität (10-100)
base64-Rendering: Wenn das WvdS.DokuWiki.Image Plugin-Plugin installiert ist, werden Logos als base64-Inline-Bilder gerendert. Dies reduziert HTTP-Requests und verbessert die Ladezeit.

TOC (Inhaltsverzeichnis)

Einstellung Typ Standard Beschreibung
TOC-Cookie Automatisch - Zustand (auf-/zugeklappt) wird im Cookie dw_toc_state gespeichert (1 Jahr)
Der TOC-Zustand wird automatisch gespeichert wenn der Benutzer auf den Toggle klickt. Beim nächsten Seitenaufruf wird der gespeicherte Zustand wiederhergestellt (nur auf Desktop).
Einstellung Typ Standard Beschreibung
footerText Text (leer) Footer-Text (unterstützt de:X|en:Y Format)

Mobile Layout Details

Header-Dimensionen

Tablet (< 1200px):
├── Header-Höhe: 96px
├── Logo max-height: 60px
├── Buttons: 44×44px (Hamburger links, Gear rechts)
├── Button-Abstand: 26px oben/unten (vertikal zentriert)
└── scroll-padding-top: 110px

Smartphone (< 480px):
├── Header-Höhe: 80px
├── Logo max-height: 50px
├── scroll-padding-top: 95px
└── Navigation: kompaktere Schrift

Hamburger-Menü Verhalten

1. Geschlossen (Standard):
   └── Nur Header-Balken sichtbar (Logo + Buttons)

2. Offen (nach Tap auf Hamburger):
   ├── #secondary expandiert auf 100vh
   ├── Navigation erscheint (vertikale Liste)
   ├── Sidebar-Widgets erscheinen
   └── Scrollbar bei Überlauf

3. Schließen:
   ├── Tap auf Hamburger
   └── Tap auf Anchor-Link (automatisch)

Dark Mode Verhinderung

Das Template erzwingt Light Mode auf allen Geräten: 

/* Meta-Tags in <head> */
<meta name="color-scheme" content="only light" />
 
/* CSS-Deklaration */
:root, html, body, * {
    color-scheme: only light !important;
}
Dies verhindert Chrome's „Auto Dark Mode“ ohne dass der Benutzer sein Gerät umstellen muss.

Beispiele

Beispiel 1: Mehrsprachige Konfiguration

Anforderung: Wiki mit Deutsch, Englisch und Slowenisch.

conf/local.php: 

$conf['tpl']['flat']['enableLangSwitcher'] = 1;
$conf['tpl']['flat']['languages'] = 'de,en,sl';
$conf['tpl']['flat']['langPosition'] = 0;
$conf['tpl']['flat']['defaultLanguage'] = 'de';
$conf['tpl']['flat']['enableAutoRedirect'] = 1;

Ergebnis:

  • Sprachwechsler zeigt DE/EN/SL Optionen
  • Sprache wird aus de:seite, en:page, sl:stran erkannt
  • Besucher werden automatisch zur passenden Sprache weitergeleitet

Beispiel 2: Sidebar-Struktur

Anforderung: Hauptmenü oben, Akkordeon-Navigation unten.

Dateistruktur: 

data/pages/
├── sidebar.txt          → Hauptmenü
├── sidebar1.txt         → Leere Datei (Platzhalter)
├── de/
│   └── sidebar1.txt     → {{wvds:snippet>go_back}}
│                           {{wvds:acmenu dynamic="2"}}
├── de/crypto/
│   └── sidebar1.txt     → {{wvds:snippet>go_back}}
│                           {{wvds:acmenu dynamic="1"}}
└── en/
    └── sidebar1.txt     → {{wvds:snippet>go_back}}
                            {{wvds:acmenu dynamic="2"}}

sidebar.txt (Root): 

~~NOCACHE~~
{{wvds:snippet>main_menu}}

de/sidebar1.txt: 

~~NOCACHE~~
{{wvds:snippet>go_back}}
{{wvds:acmenu dynamic="2"}}

Anforderung: Footer-Text in verschiedenen Sprachen.

Konfiguration: 

footerText = de:© 2025 Meine Firma - Alle Rechte vorbehalten|en:© 2025 My Company - All rights reserved|sl:© 2025 Moje podjetje - Vse pravice pridržane

Ergebnis:

  • Deutsche Seiten: „© 2025 Meine Firma - Alle Rechte vorbehalten“
  • Englische Seiten: „© 2025 My Company - All rights reserved“
  • Slowenische Seiten: „© 2025 Moje podjetje - Vse pravice pridržane“

Beispiel 4: Logo-Konfiguration

Anforderung: Logo aus Wiki-Media mit optimaler Darstellung.

Admin-Konfiguration: 

showLogo = 1
logoSource = wiki
logoPath = wiki:logo.png
logoContainerSize = 300
logoFit = contain
logoPosition = center
logoMaxWidth = 300
logoQuality = 90

Ergebnis:

  • Logo wird als base64-Inline-Bild gerendert (via wvdsimage)
  • Kein zusätzlicher HTTP-Request für das Logo
  • Bild wird auf max. 300px skaliert und in 300x300px Container zentriert
  • object-fit: contain stellt sicher, dass das gesamte Bild sichtbar ist

Alternative: Logo aus Template-Verzeichnis: 

showLogo = 1
logoSource = template
logoPath = logo.png        // liegt in lib/tpl/flat/images/logo.png

Alternative: Externes Logo: 

showLogo = 1
logoSource = url
logoPath = https://example.com/logo.png

Funktionsweise

Sprachwechsler-Logik

1. Namespace-Analyse
   └── Extrahiert Sprache aus Position langPosition
   └── Beispiel: de:crypto:openssl → "de"

2. Sprachwechsel
   └── Ersetzt Sprach-Segment im Namespace
   └── de:crypto:openssl → en:crypto:openssl

3. Seitenprüfung
   └── Prüft ob Zielseite existiert
   └── Falls nicht: Weiterleitung zur Sprach-Startseite
1. Namespace-spezifisch
   └── Sucht sidebar/sidebar1 im aktuellen Namespace

2. Eltern-Namespace
   └── Sucht aufwärts in Eltern-Namespaces

3. Root-Fallback
   └── Verwendet Root-Sidebar wenn nichts gefunden

Automatische Weiterleitung

1. Browser-Sprache erkennen
   └── Accept-Language Header parsen

2. Sprache verfügbar?
   ├── Ja: Weiterleitung zu Sprach-Namespace
   └── Nein: Weiterleitung zu defaultLanguage

Integration mit WvdS-Plugins

Das Template arbeitet nahtlos mit den WvdS-Plugins zusammen:

wvdsi18n (Internationalisierung)

// In Template-Dateien
$helper = plugin_load('helper', 'wvdsi18n');
$lang = $helper->detectLanguage();
$text = $helper->get('menu_home');

Verwendung:

  • Footer-Texte lokalisieren
  • Menue-Beschriftungen uebersetzen
  • Konfigurations-Werte parsen
Migration: Das Plugin wvdslang wurde durch wvdsi18n ersetzt. Redirects werden nun durch wvdscond gehandhabt.

wvdssnippet

sidebar.txt: 

{{wvds:snippet>main_menu}}

Verwendung:

  • Wiederverwendbare Menü-Strukturen
  • HTML-Bausteine in Sidebars
  • Gemeinsame Elemente über Namespaces

wvdsacmenu

sidebar1.txt: 

{{wvds:acmenu dynamic="2"}}

Verwendung:

  • Akkordeon-Navigation in Sidebars
  • Dynamische Namespace-Erkennung
  • Automatisches Öffnen/Schließen

CSS-Anpassungen

Überschreibbare Klassen

Klasse Beschreibung
.dokuwiki Haupt-Container
.wrapper Inhalts-Wrapper
#secondary Sidebar-Container (Header auf Mobile)
.sidebar-offcanvas Sidebar-Widgets
.toggle-sidebar Hamburger-Button
.toggle-navigation Gear-Button
.lang-switcher Sprachwechsler-Container
.logo-container Logo-Wrapper
.site-info Footer-Bereich

Eigene Styles

Erstellen Sie conf/userstyle.css für Anpassungen: 

/* Sprachwechsler-Anpassung */
.lang-switcher {
    position: fixed;
    top: 10px;
    right: 10px;
}
 
/* Sidebar-Breite */
.sidebar {
    width: 280px;
}
 
/* Footer-Styling */
.footer {
    background: #333;
    color: #fff;
    padding: 20px;
}

Fehlerbehandlung

Szenario Verhalten
Sprache nicht konfiguriert Zeigt alle Sprachen aus languages
Zielseite nicht vorhanden Weiterleitung zur Sprach-Startseite
Sidebar nicht gefunden Verwendet Root-Sidebar
Plugin nicht installiert Template funktioniert ohne Erweiterungen
CSS-Cache Nach Update: ?purge=true oder Admin → purgecss

Best Practices

  • in allen Sidebars mit dynamischem Inhalt
  • langPosition korrekt setzen für Namespace-Struktur
  • sidebar1.txt in jedem Sprach-Namespace erstellen
  • wvdssnippet für wiederverwendbare Menü-Elemente nutzen
  • Fallback-Sprache immer konfigurieren
  • CSS-Cache leeren nach Template-Updates (?purge=true)

Versionshinweise

Version Datum Änderungen
1.2.0 2026-01-28 Mobile Header kompakt (96px/80px), Dark Mode Verhinderung, Login-Styling, Anchor-Scroll Fix
1.1.0 2026-01-08 Logo-System mit wvdsimage-Integration, TOC Cookie-Persistenz
1.0.0 2025-01-06 WvdS-Erweiterungen hinzugefügt

Siehe auch

Technische Referenz

Dateistruktur (WvdS vs. Original)

lib/tpl/flat/
├── main.php              → Haupt-Template (erweitert: Language Redirect, Layout CSS, Mobile Header)
├── detail.php            → Medien-Detail-Ansicht
├── mediamanager.php      → Medien-Manager
├── lang_helper.php       → [NEU] Namespace-aware Übersetzungen
├── widgets.php           → [NEU] Recent Pages/Comments Widgets
├── conf/
│   ├── default.php       → Standard-Konfiguration (erweitert)
│   └── metadata.php      → Konfigurations-Metadaten (erweitert)
├── lang/
│   ├── de/               → Deutsche Übersetzungen (erweitert)
│   ├── en/               → Englische Übersetzungen (erweitert)
│   ├── sl/               → [NEU] Slowenische Übersetzungen
│   ├── it/               → [NEU] Italienische Übersetzungen
│   └── hr/               → [NEU] Kroatische Übersetzungen
├── css/
│   ├── customFlat.css    → Haupt-Styles (52KB, ~2000 Zeilen)
│   ├── accessibility.css → [NEU] Accessibility, Dark Mode Prevention
│   ├── logo.css          → [NEU] Logo-Styling
│   └── color-palette.css → [NEU] KRITIS-Farbpalette
├── assets/js/
│   └── jquery.min.js     → [NEU] Lokales jQuery (Offline)
└── images/
    └── logo.png          → Template-Logo

customFlat.css Bereiche

Zeilen Bereich
1-108 Basis-Styles (Page, Links, Pagetools)
109-254 Admin Config Manager (KRITIS-Farben)
255-454 TOC Sticky Styling
455-605 Language Switcher, acmenu, Widgets
606-1141 Discussion Plugin Styling
1142-1591 Admin-Menü, Landing Page Styles
1592-1599 row-offcanvas Override (Mobile)
1601-1613 Anchor-Scroll Offset
1615-1690 Mobile Kontrast Fixes (Sidebar, Footer, Buttons)
1692-1717 Logo Mobile Sizing
1719-1729 Dark Mode Verhinderung
1731-1787 Language Selector Mobile Hide
1788-2010 Login/Register/ResendPWD Styling

Template-Funktionen

Funktion Beschreibung
tpl_getLang() Gibt aktuelle Sprache zurück
tpl_getLangNs() Namespace-aware Übersetzung
tpl_parseMultilang() Parst de:X|en:Y Format
tpl_renderLogo() Rendert Logo mit base64-Support
tpl_langSwitcher() Rendert Sprachwechsler-HTML
tpl_sidebar($which) Rendert angegebene Sidebar
tpl_footer() Rendert Footer mit mehrsprachigem Text

Hook-Punkte

Hook Beschreibung
TPL_METAHEADER_OUTPUT Meta-Header modifizieren
TPL_ACT_RENDER Aktions-Rendering
TPL_CONTENT_DISPLAY Inhalts-Anzeige
Flat TemplateAudit bestanden • 2026-03-30
▾
Code / qualitaet *
    Stacks / dokuwiki-tpl
      Sicherheit / kritis *
        Richtlinien anzeigen

        Diskussion

        Geben Sie Ihren Kommentar ein. Wiki-Syntax ist zugelassen:
         
        Zuletzt geändert: den 29.01.2026 um 15:12

        Seiten-Werkzeuge