Sie befinden sich hier: start » it » Documentazione interna » DokuWiki Extensions » WvdS.DokuWiki.Flat Template

Inhaltsverzeichnis

WvdS.DokuWiki.Flat Template

Template: flat
Versione: 1.2.0 (Estensioni WvdS)
Namespace: lib/tpl/flat/
Originale: beemoon contact@beemoon.fr
Estensioni: Wolfgang van der Stille zeljko.petrusic@outlook.de
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 WvdS.DokuWiki.Cond Plugin. Usare {{wvds:redirect target="{lang}:start"}} nelle pagine wiki.
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 WvdS.DokuWiki.Image Plugin è 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).
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 <head> */
<meta name="color-scheme" content="only light" />
 
/* 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“

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

  • 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

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
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: il 29/01/2026 alle 20:14

        Seiten-Werkzeuge