====== WvdS.DokuWiki.Flat Template ====== **Template:** flat\\ **Versione:** 1.2.0 (Estensioni WvdS)\\ **Namespace:** ''lib/tpl/flat/''\\ **Originale:** beemoon \\ **Estensioni:** Wolfgang van der Stille \\ **Licenza:** GPL 2 ---- ===== Definizione ===== Il **template Flat** è un template DokuWiki minimalista e responsive con estese estensioni WvdS per multilingue, switcher lingua, sidebar configurabili, sistema logo con rendering base64, **layout ottimizzato per mobile** e integrazione perfetta con i plugin WvdS. ===== Modifiche vs. originale ===== ^ Componente ^ Originale ^ WvdS ^ | customFlat.css | 3.4 KB (176 righe) | **52 KB** (~2000 righe) | | main.php | 2.9 KB (69 righe) | **13 KB** (~240 righe) | | Font | Google Fonts CDN | **Font di sistema** (Offline) | | jQuery | Google CDN | **Locale** (jquery.min.js) | | Nuovi file | - | lang_helper.php, widgets.php, accessibility.css, logo.css, color-palette.css | ===== Casi d'uso ===== * **Documentazione multilingue** - Switcher lingua automatico e rilevamento lingua * **Basi di conoscenza** - Navigazione pulita con menu ad accordion * **Utilizzo mobile** - Header compatto (96px) con menu hamburger * **Documentazione progetti** - Struttura sidebar gerarchica * **Wiki aziendali** - Design professionale e personalizzabile * **Performance ottimizzate** - Immagini inline base64, font locali ---- ===== Funzionalità ===== ==== Estensioni WvdS ==== ^ Funzione ^ Descrizione ^ | Switcher lingua | Cambio lingua integrato con icone bandiera | | Redirect automatico | Redirect basato sulla lingua del browser | | Dual-Sidebar | Sidebar superiore e inferiore configurabili | | Menu accordion | Navigazione comprimibile | | Testi multilingue | Supporto formato ''de:X|en:Y'' | | Sistema logo | Logo flessibile con rendering base64 via wvdsimage | | Stato TOC | Stato indice salvato in cookie | | Integrazione plugin | Collaborazione perfetta con plugin WvdS | ==== Ottimizzazione mobile (NUOVO) ==== ^ Funzione ^ Descrizione ^ | Header compatto | 96px (tablet) / 80px (smartphone) con spaziatura uniforme | | Menu hamburger | Slide-over invece di shift 300px, si chiude al click su anchor | | Anchor scroll | Offset header impedisce che gli anchor finiscano dietro l'header | | Prevenzione Dark Mode | ''color-scheme: only light'' forza design chiaro | | Touch-friendly | Target touch 44×44px per i pulsanti | ==== Estensioni styling (NUOVO) ==== ^ Area ^ Descrizione ^ | Login/Register | Design card con accento KRITIS-Orange | | Menu admin | Design modernizzato con versione Console-Style | | Config Manager | Leggibilità migliorata, schema colori KRITIS | | Plugin Discussion | Commenti stile Apple/Microsoft | | TOC | Sticky con design shadow moderno | | Footer | Testo scuro su sfondo chiaro | ---- ===== Configurazione ===== ==== Switcher lingua ==== ^ Impostazione ^ Tipo ^ Default ^ Descrizione ^ | ''enableLangSwitcher'' | On/Off | Off | Attiva switcher lingua | | ''languages'' | Testo | de,en | Lingue disponibili (separate da virgola) | | ''langPosition'' | Numero | 0 | Posizione lingua nel namespace (0 = primo livello) | | ''defaultLanguage'' | Testo | de | Lingua di fallback predefinita | **enableAutoRedirect rimosso:** I redirect automatici sono ora gestiti dal plugin [[.:wvdscond]]. Usare ''{{wvds:redirect target="{lang}:start"}}'' nelle pagine wiki. ==== Sidebar ==== ^ Impostazione ^ Tipo ^ Default ^ Descrizione ^ | ''topSidebar'' | Testo | sidebar | Pagina sidebar superiore | | ''bottomSidebar'' | Testo | sidebar1 | Pagina sidebar inferiore | | ''topSidebarTitle'' | Testo | //(vuoto)// | Titolo sidebar superiore | | ''bottomSidebarTitle'' | Testo | //(vuoto)// | Titolo sidebar inferiore | | ''adminSidebarTitle'' | Testo | //(vuoto)// | Titolo sidebar admin | | ''enableAccordion'' | On/Off | Off | Comportamento accordion per sidebar | ==== Layout (NUOVO) ==== ^ Impostazione ^ Tipo ^ Default ^ Descrizione ^ | ''siteWidth'' | Numero | 75 | Larghezza pagina | | ''siteWidthUnit'' | Scelta | % | Unità (%, px, em, rem) | | ''sidebarWidth'' | Numero | 300 | Larghezza sidebar | | ''sidebarWidthUnit'' | Scelta | px | Unità (px, %, em, rem) | ==== Logo e titolo ==== ^ Impostazione ^ Tipo ^ Default ^ Descrizione ^ | ''showTitle'' | On/Off | On | Mostra titolo wiki | | ''showLogo'' | On/Off | Off | Mostra logo | | ''logoSource'' | Scelta | template | Sorgente logo: ''template'', ''wiki'', ''url'' | | ''logoPath'' | Testo | //(vuoto)// | Percorso in base alla sorgente (nome file, wiki:percorso o URL) | | ''logoContainerSize'' | Numero | 300 | Dimensione container in pixel (quadrato) | | ''logoFit'' | Scelta | contain | Adattamento immagine: ''contain'', ''cover'', ''fill'', ''scale-down'', ''none'' | | ''logoPosition'' | Scelta | center | Posizione nel container: ''center'', ''top'', ''bottom'', ecc. | | ''logoMaxWidth'' | Numero | 300 | Larghezza max resize per ottimizzazione immagine | | ''logoQuality'' | Numero | 90 | Qualità immagine (10-100) | **Rendering base64:** Se il plugin [[.:wvdsimage]] è installato, i logo vengono renderizzati come immagini inline base64. Questo riduce le richieste HTTP e migliora il tempo di caricamento. ==== TOC (Indice) ==== ^ Impostazione ^ Tipo ^ Default ^ Descrizione ^ | Cookie TOC | Automatico | - | Lo stato (aperto/chiuso) viene salvato nel cookie ''dw_toc_state'' (1 anno) | Lo stato del TOC viene salvato automaticamente quando l'utente clicca sul toggle. Al prossimo caricamento pagina lo stato salvato viene ripristinato (solo su desktop). ==== Footer ==== ^ Impostazione ^ Tipo ^ Default ^ Descrizione ^ | ''footerText'' | Testo | //(vuoto)// | Testo footer (supporta formato ''de:X|en:Y'') | ---- ===== Dettagli layout mobile ===== ==== Dimensioni header ==== Tablet (< 1200px): ├── Altezza header: 96px ├── Logo max-height: 60px ├── Pulsanti: 44×44px (Hamburger sinistra, Gear destra) ├── Spaziatura pulsanti: 26px sopra/sotto (centrato verticalmente) └── scroll-padding-top: 110px Smartphone (< 480px): ├── Altezza header: 80px ├── Logo max-height: 50px ├── scroll-padding-top: 95px └── Navigazione: font più compatto ==== Comportamento menu hamburger ==== 1. Chiuso (default): └── Solo barra header visibile (logo + pulsanti) 2. Aperto (dopo tap su hamburger): ├── #secondary si espande a 100vh ├── Navigazione appare (lista verticale) ├── Widget sidebar appaiono └── Scrollbar su overflow 3. Chiusura: ├── Tap su hamburger └── Tap su link anchor (automatico) ==== Prevenzione Dark Mode ==== Il template forza Light Mode su tutti i dispositivi: /* Meta tag in */ /* Dichiarazione CSS */ :root, html, body, * { color-scheme: only light !important; } Questo impedisce "Auto Dark Mode" di Chrome senza che l'utente debba modificare le impostazioni del dispositivo. ---- ===== Esempi ===== ==== Esempio 1: Configurazione multilingue ==== **Requisito:** Wiki con tedesco, inglese e sloveno. **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; **Risultato:** * Switcher lingua mostra opzioni DE/EN/SL * Lingua riconosciuta da ''de:pagina'', ''en:page'', ''sl:stran'' * Visitatori automaticamente reindirizzati alla lingua appropriata ==== Esempio 2: Struttura sidebar ==== **Requisito:** Menu principale in alto, navigazione accordion in basso. **Struttura file:** data/pages/ ├── sidebar.txt → Menu principale ├── sidebar1.txt → File vuoto (placeholder) ├── 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"}} ==== Esempio 3: Footer multilingue ==== **Requisito:** Testo footer in diverse lingue. **Configurazione:** footerText = de:© 2025 Meine Firma - Alle Rechte vorbehalten|en:© 2025 My Company - All rights reserved|it:© 2025 La mia azienda - Tutti i diritti riservati **Risultato:** * Pagine tedesche: "© 2025 Meine Firma - Alle Rechte vorbehalten" * Pagine inglesi: "© 2025 My Company - All rights reserved" * Pagine italiane: "© 2025 La mia azienda - Tutti i diritti riservati" ==== Esempio 4: Configurazione logo ==== **Requisito:** Logo da Wiki-Media con visualizzazione ottimale. **Configurazione admin:** showLogo = 1 logoSource = wiki logoPath = wiki:logo.png logoContainerSize = 300 logoFit = contain logoPosition = center logoMaxWidth = 300 logoQuality = 90 **Risultato:** * Logo renderizzato come immagine inline base64 (via wvdsimage) * Nessuna richiesta HTTP aggiuntiva per il logo * Immagine scalata a max 300px e centrata in container 300x300px * ''object-fit: contain'' assicura che l'intera immagine sia visibile ---- ===== Funzionamento ===== ==== Logica switcher lingua ==== 1. Analisi namespace └── Estrae lingua dalla posizione langPosition └── Esempio: de:crypto:openssl → "de" 2. Cambio lingua └── Sostituisce segmento lingua nel namespace └── de:crypto:openssl → en:crypto:openssl 3. Verifica pagina └── Verifica se pagina destinazione esiste └── Se no: redirect a pagina iniziale lingua ==== Risoluzione sidebar ==== 1. Specifico per namespace └── Cerca sidebar/sidebar1 nel namespace corrente 2. Namespace padre └── Cerca verso l'alto nei namespace padre 3. Fallback root └── Usa sidebar root se nulla trovato ==== Redirect automatico ==== 1. Rilevamento lingua browser └── Parsing header Accept-Language 2. Lingua disponibile? ├── Sì: redirect a namespace lingua └── No: redirect a defaultLanguage ---- ===== Integrazione con plugin WvdS ===== Il template collabora perfettamente con i plugin WvdS: ==== wvdsi18n (Internazionalizzazione) ==== // Nei file template $helper = plugin_load('helper', 'wvdsi18n'); $lang = $helper->detectLanguage(); $text = $helper->get('menu_home'); **Utilizzo:** * Localizzazione testi footer * Traduzione etichette menu * Parsing valori configurazione **Migrazione:** Il plugin ''wvdslang'' è stato sostituito da ''wvdsi18n''. I redirect sono ora gestiti da ''wvdscond''. ==== wvdssnippet ==== **sidebar.txt:** {{wvds:snippet>main_menu}} **Utilizzo:** * Strutture menu riutilizzabili * Blocchi HTML nelle sidebar * Elementi comuni tra namespace ==== wvdsacmenu ==== **sidebar1.txt:** {{wvds:acmenu dynamic="2"}} **Utilizzo:** * Navigazione accordion nelle sidebar * Rilevamento namespace dinamico * Apertura/chiusura automatica ---- ===== Personalizzazione CSS ===== ==== Classi sovrascrivibili ==== ^ Classe ^ Descrizione ^ | ''.dokuwiki'' | Container principale | | ''.wrapper'' | Wrapper contenuto | | ''#secondary'' | Container sidebar (header su mobile) | | ''.sidebar-offcanvas'' | Widget sidebar | | ''.toggle-sidebar'' | Pulsante hamburger | | ''.toggle-navigation'' | Pulsante gear | | ''.lang-switcher'' | Container switcher lingua | | ''.logo-container'' | Wrapper logo | | ''.site-info'' | Area footer | ==== Stili personalizzati ==== Creare ''conf/userstyle.css'' per personalizzazioni: /* Personalizzazione switcher lingua */ .lang-switcher { position: fixed; top: 10px; right: 10px; } /* Larghezza sidebar */ .sidebar { width: 280px; } /* Styling footer */ .footer { background: #333; color: #fff; padding: 20px; } ---- ===== Gestione errori ===== ^ Scenario ^ Comportamento ^ | Lingua non configurata | Mostra tutte le lingue da ''languages'' | | Pagina destinazione non esiste | Redirect a pagina iniziale lingua | | Sidebar non trovata | Usa sidebar root | | Plugin non installato | Template funziona senza estensioni | | Cache CSS | Dopo aggiornamento: ''?purge=true'' o Admin → purgecss | ---- ===== Best practice ===== * **~~NOCACHE~~** in tutte le sidebar con contenuto dinamico * **langPosition** impostare correttamente per struttura namespace * **sidebar1.txt** creare in ogni namespace lingua * **wvdssnippet** usare per elementi menu riutilizzabili * **Lingua fallback** sempre configurare * **Svuotare cache CSS** dopo aggiornamenti template (''?purge=true'') ---- ===== Note sulla versione ===== ^ Versione ^ Data ^ Modifiche ^ | 1.2.0 | 2026-01-28 | Header mobile compatto (96px/80px), prevenzione Dark Mode, styling Login, fix Anchor-Scroll | | 1.1.0 | 2026-01-08 | Sistema logo con integrazione wvdsimage, persistenza cookie TOC | | 1.0.0 | 2025-01-06 | Estensioni WvdS aggiunte | ---- ===== Vedi anche ===== * [[.:wvdsi18n]] - Internazionalizzazione (traduzioni) * [[.:wvdscond]] - Contenuti condizionali + redirect * [[.:wvdssnippet]] - Blocchi HTML riutilizzabili * [[.:wvdsacmenu]] - Menu accordion * [[https://www.dokuwiki.org/template:flat|Template Flat originale]] ---- ===== Riferimento tecnico ===== ==== Struttura file (WvdS vs. originale) ==== lib/tpl/flat/ ├── main.php → Template principale (esteso: Language Redirect, Layout CSS, Mobile Header) ├── detail.php → Vista dettagli media ├── mediamanager.php → Media manager ├── lang_helper.php → [NUOVO] Traduzioni namespace-aware ├── widgets.php → [NUOVO] Widget Recent Pages/Comments ├── conf/ │ ├── default.php → Configurazione predefinita (estesa) │ └── metadata.php → Metadati configurazione (estesi) ├── lang/ │ ├── de/ → Traduzioni tedesche (estese) │ ├── en/ → Traduzioni inglesi (estese) │ ├── sl/ → [NUOVO] Traduzioni slovene │ ├── it/ → [NUOVO] Traduzioni italiane │ └── hr/ → [NUOVO] Traduzioni croate ├── css/ │ ├── customFlat.css → Stili principali (52KB, ~2000 righe) │ ├── accessibility.css → [NUOVO] Accessibilità, prevenzione Dark Mode │ ├── logo.css → [NUOVO] Styling logo │ └── color-palette.css → [NUOVO] Palette colori KRITIS ├── assets/js/ │ └── jquery.min.js → [NUOVO] jQuery locale (Offline) └── images/ └── logo.png → Logo template ==== Aree customFlat.css ==== ^ Righe ^ Area ^ | 1-108 | Stili base (Page, Links, Pagetools) | | 109-254 | Admin Config Manager (colori KRITIS) | | 255-454 | TOC Sticky styling | | 455-605 | Language Switcher, acmenu, Widget | | 606-1141 | Discussion Plugin styling | | 1142-1591 | Menu admin, stili Landing Page | | 1592-1599 | row-offcanvas Override (Mobile) | | 1601-1613 | Anchor-Scroll Offset | | 1615-1690 | Fix contrasto Mobile (Sidebar, Footer, Buttons) | | 1692-1717 | Logo Mobile Sizing | | 1719-1729 | Prevenzione Dark Mode | | 1731-1787 | Language Selector Mobile Hide | | 1788-2010 | Styling Login/Register/ResendPWD | ==== Funzioni template ==== ^ Funzione ^ Descrizione ^ | ''tpl_getLang()'' | Restituisce lingua corrente | | ''tpl_getLangNs()'' | Traduzione namespace-aware | | ''tpl_parseMultilang()'' | Parsa formato ''de:X|en:Y'' | | ''tpl_renderLogo()'' | Renderizza logo con supporto base64 | | ''tpl_langSwitcher()'' | Renderizza HTML switcher lingua | | ''tpl_sidebar($which)'' | Renderizza sidebar specificata | | ''tpl_footer()'' | Renderizza footer con testo multilingue | ==== Punti hook ==== ^ Hook ^ Descrizione ^ | ''TPL_METAHEADER_OUTPUT'' | Modifica meta header | | ''TPL_ACT_RENDER'' | Rendering azione | | ''TPL_CONTENT_DISPLAY'' | Visualizzazione contenuto | ---- [x][x][x][x] [x][x][x][x][x] [x][x][x][-][-] ~~DISCUSSION~~