====== WvdS.DokuWiki.Flat Template ====== **Template:** flat\\ **Version:** 1.2.0 (WvdS-Erweiterungen)\\ **Namespace:** ''lib/tpl/flat/''\\ **Original:** beemoon \\ **Erweiterungen:** Wolfgang van der Stille \\ **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 [[.:wvdscond]] Plugin gesteuert. Nutzen Sie ''{{wvds:redirect target="{lang}:start"}}'' in Ihren Wiki-Seiten. ==== Sidebar ==== ^ 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 [[.:wvdsimage]]-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). ==== Footer ==== ^ 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 */ /* 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"}} ==== Beispiel 3: Mehrsprachiger Footer ==== **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 ==== Sidebar-Auflösung ==== 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 ===== * **~~NOCACHE~~** 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 ===== * [[.:wvdsi18n]] - Internationalisierung (Uebersetzungen) * [[.:wvdscond]] - Bedingte Inhalte + Redirects * [[.:wvdssnippet]] - Wiederverwendbare HTML-Bausteine * [[.:wvdsacmenu]] - Akkordeon-Menue * [[https://www.dokuwiki.org/template:flat|Original Flat Template]] ---- ===== 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 | ---- [x][x][x][x] [x][x][x][x][x] [x][x][x][-][-] ~~DISCUSSION~~