Inhaltsverzeichnis

WvdS.DokuWiki.Flat Predložak
Diskussion

WvdS.DokuWiki.Flat Predložak

Predložak: flat
Verzija: 1.2.0 (WvdS proširenja)
Namespace: lib/tpl/flat/
Original: beemoon contact@beemoon.fr
Proširenja: Wolfgang van der Stille zeljko.petrusic@outlook.de
Licenca: GPL 2

Definicija

Flat predložak je minimalistički, responzivan DokuWiki predložak s opsežnim WvdS proširenjima za višejezičnost, izmjenjivač jezika, konfigurirane sidebareove, sustav logotipa s base64 renderiranjem, mobilno optimiziran layout i besprijekornu integraciju s WvdS dodacima.

Promjene vs. original

Komponenta	Original	WvdS
customFlat.css	3.4 KB (176 redova)	52 KB (~2000 redova)
main.php	2.9 KB (69 redova)	13 KB (~240 redova)
Fontovi	Google Fonts CDN	Sistemski fontovi (Offline)
jQuery	Google CDN	Lokalno (jquery.min.js)
Nove datoteke	-	lang_helper.php, widgets.php, accessibility.css, logo.css, color-palette.css

Slučajevi korištenja

Višejezična dokumentacija - Automatski izmjenjivač jezika i prepoznavanje jezika
Baze znanja - Čista navigacija s harmonika izbornicima
Mobilno korištenje - Kompaktan header (96px) s hamburger izbornikom
Projektna dokumentacija - Hijerarhijska sidebar struktura
Korporativni wikiji - Profesionalan, prilagodljiv dizajn
Optimizirane performanse - Inline base64 slike, lokalni fontovi

Funkcije

WvdS proširenja

Funkcija	Opis
Izmjenjivač jezika	Ugrađena promjena jezika s ikonama zastava
Automatsko preusmjeravanje	Preusmjeravanje na temelju jezika preglednika
Dual-Sidebar	Konfigurirani gornji i donji sidebar
Harmonika izbornik	Skupljiva navigacija
Višejezični tekstovi	Podrška za `de:X\|en:Y` format
Sustav logotipa	Fleksibilan logotip s base64 renderiranjem preko wvdsimage
TOC stanje	Stanje sadržaja se sprema u cookie
Integracija dodataka	Besprijekorna suradnja s WvdS dodacima

Mobilna optimizacija (NOVO)

Funkcija	Opis
Kompaktan header	96px (tablet) / 80px (smartphone) s jednakim razmacima
Hamburger izbornik	Slide-over umjesto 300px pomaka, zatvara se pri kliku na anchor
Anchor scroll	Header offset sprječava da anchori završe iza headera
Sprječavanje Dark Mode	`color-scheme: only light` forsira svijetli dizajn
Touch-friendly	44×44px touch targeti za gumbe

Proširenja stiliziranja (NOVO)

Područje	Opis
Login/Register	Card dizajn s KRITIS-Orange akcentom
Admin izbornik	Modernizirani dizajn s Console-Style verzijom
Config Manager	Poboljšana čitljivost, KRITIS shema boja
Discussion dodatak	Apple/Microsoft stil komentari
TOC	Sticky s modernim shadow dizajnom
Footer	Tamna slova na svijetloj pozadini

Konfiguracija

Izmjenjivač jezika

Postavka	Tip	Standard	Opis
`enableLangSwitcher`	Da/Ne	Ne	Aktiviraj izmjenjivač jezika
`languages`	Tekst	de,en	Dostupni jezici (odvojeni zarezom)
`langPosition`	Broj	0	Pozicija jezika u namespaceu (0 = prva razina)
`defaultLanguage`	Tekst	de	Zadani jezik za fallback

enableAutoRedirect uklonjen: Automatska preusmjeravanja se sada upravljaju preko WvdS.DokuWiki.Cond Dodatak dodatka. Koristite {{wvds:redirect target="{lang}:start"}} na vašim wiki stranicama.

Postavka	Tip	Standard	Opis
`topSidebar`	Tekst	sidebar	Gornja sidebar stranica
`bottomSidebar`	Tekst	sidebar1	Donja sidebar stranica
`topSidebarTitle`	Tekst	(prazno)	Naslov gornjeg sidebara
`bottomSidebarTitle`	Tekst	(prazno)	Naslov donjeg sidebara
`adminSidebarTitle`	Tekst	(prazno)	Naslov admin sidebara
`enableAccordion`	Da/Ne	Ne	Harmonika ponašanje za sidebar

Layout (NOVO)

Postavka	Tip	Standard	Opis
`siteWidth`	Broj	75	Širina stranice
`siteWidthUnit`	Izbor	%	Jedinica (%, px, em, rem)
`sidebarWidth`	Broj	300	Širina sidebara
`sidebarWidthUnit`	Izbor	px	Jedinica (px, %, em, rem)

Logotip i naslov

Postavka	Tip	Standard	Opis
`showTitle`	Da/Ne	Da	Prikaži naslov wikija
`showLogo`	Da/Ne	Ne	Prikaži logotip
`logoSource`	Izbor	template	Izvor logotipa: `template`, `wiki`, `url`
`logoPath`	Tekst	(prazno)	Putanja ovisno o izvoru (naziv datoteke, wiki:putanja ili URL)
`logoContainerSize`	Broj	300	Veličina kontejnera u pikselima (kvadrat)
`logoFit`	Izbor	contain	Prilagodba slike: `contain`, `cover`, `fill`, `scale-down`, `none`
`logoPosition`	Izbor	center	Pozicija u kontejneru: `center`, `top`, `bottom`, itd.
`logoMaxWidth`	Broj	300	Maks. resize širina za optimizaciju slike
`logoQuality`	Broj	90	Kvaliteta slike (10-100)

base64 renderiranje: Ako je WvdS.DokuWiki.Image Dodatak dodatak instaliran, logotipi se renderiraju kao base64 inline slike. To smanjuje HTTP zahtjeve i poboljšava vrijeme učitavanja.

TOC (Sadržaj)

Postavka	Tip	Standard	Opis
TOC Cookie	Automatski	-	Stanje (otvoreno/zatvoreno) se sprema u cookie `dw_toc_state` (1 godina)

Stanje TOC-a se automatski sprema kada korisnik klikne na toggle. Pri sljedećem učitavanju stranice spremljeno stanje se obnavlja (samo na desktopu).

Postavka	Tip	Standard	Opis
`footerText`	Tekst	(prazno)	Tekst footera (podržava `de:X\|en:Y` format)

Detalji mobilnog layouta

Dimenzije headera

Tablet (< 1200px):
├── Visina headera: 96px
├── Logo max-height: 60px
├── Gumbi: 44×44px (Hamburger lijevo, Gear desno)
├── Razmak gumba: 26px gore/dolje (vertikalno centrirano)
└── scroll-padding-top: 110px

Smartphone (< 480px):
├── Visina headera: 80px
├── Logo max-height: 50px
├── scroll-padding-top: 95px
└── Navigacija: kompaktniji font

Ponašanje hamburger izbornika

1. Zatvoren (standard):
   └── Samo header traka vidljiva (logotip + gumbi)

2. Otvoren (nakon tapa na hamburger):
   ├── #secondary se širi na 100vh
   ├── Navigacija se pojavljuje (vertikalna lista)
   ├── Sidebar widgeti se pojavljuju
   └── Scrollbar pri preljeru

3. Zatvaranje:
   ├── Tap na hamburger
   └── Tap na anchor link (automatski)

Sprječavanje Dark Mode

Predložak forsira Light Mode na svim uređajima:

/* Meta oznake u <head> */
<meta name="color-scheme" content="only light" />
 
/* CSS deklaracija */
:root, html, body, * {
    color-scheme: only light !important;
}

Ovo sprječava Chrome-ov „Auto Dark Mode“ bez da korisnik mora mijenjati postavke uređaja.

Primjeri

Primjer 1: Višejezična konfiguracija

Zahtjev: Wiki s njemačkim, engleskim i slovenskim.

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;

Rezultat:

Izmjenjivač jezika pokazuje DE/EN/SL opcije
Jezik se prepoznaje iz de:stranica, en:page, sl:stran
Posjetitelji se automatski preusmjeravaju na odgovarajući jezik

Primjer 2: Sidebar struktura

Zahtjev: Glavni izbornik gore, harmonika navigacija dolje.

Struktura datoteka:

data/pages/
├── sidebar.txt          → Glavni izbornik
├── sidebar1.txt         → Prazna datoteka (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"}}

Primjer 3: Višejezični footer

Zahtjev: Tekst footera na različitim jezicima.

Konfiguracija:

footerText = de:© 2025 Meine Firma - Alle Rechte vorbehalten|en:© 2025 My Company - All rights reserved|hr:© 2025 Moja tvrtka - Sva prava pridržana

Rezultat:

Njemačke stranice: „© 2025 Meine Firma - Alle Rechte vorbehalten“
Engleske stranice: „© 2025 My Company - All rights reserved“
Hrvatske stranice: „© 2025 Moja tvrtka - Sva prava pridržana“

Primjer 4: Konfiguracija logotipa

Zahtjev: Logotip iz Wiki-Media s optimalnim prikazom.

Admin konfiguracija:

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

Rezultat:

Logotip se renderira kao base64 inline slika (preko wvdsimage)
Nema dodatnog HTTP zahtjeva za logotip
Slika se skalira na maks. 300px i centrira u 300x300px kontejneru
object-fit: contain osigurava da je cijela slika vidljiva

Alternativa: Logotip iz direktorija predloška:

showLogo = 1
logoSource = template
logoPath = logo.png        // nalazi se u lib/tpl/flat/images/logo.png

Alternativa: Vanjski logotip:

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

Način rada

Logika izmjenjivača jezika

1. Analiza namespacea
   └── Izvlači jezik iz pozicije langPosition
   └── Primjer: de:crypto:openssl → "de"

2. Promjena jezika
   └── Zamjenjuje jezični segment u namespaceu
   └── de:crypto:openssl → en:crypto:openssl

3. Provjera stranice
   └── Provjerava postoji li ciljna stranica
   └── Ako ne: preusmjeravanje na početnu stranicu jezika

Razrješavanje sidebara

1. Namespace-specifično
   └── Traži sidebar/sidebar1 u trenutnom namespaceu

2. Roditeljski namespace
   └── Traži uzlazno u roditeljskim namespaceovima

3. Root fallback
   └── Koristi root sidebar ako ništa nije pronađeno

Automatsko preusmjeravanje

1. Prepoznavanje jezika preglednika
   └── Parsiranje Accept-Language headera

2. Jezik dostupan?
   ├── Da: preusmjeravanje na namespace jezika
   └── Ne: preusmjeravanje na defaultLanguage

Integracija s WvdS dodacima

Predložak besprijekorno surađuje s WvdS dodacima:

wvdsi18n (Internacionalizacija)

// U datotekama predloška
$helper = plugin_load('helper', 'wvdsi18n');
$lang = $helper->detectLanguage();
$text = $helper->get('menu_home');

Korištenje:

Lokalizacija tekstova footera
Prijevod oznaka izbornika
Parsiranje konfiguracijskih vrijednosti

Migracija: Dodatak wvdslang zamijenjen je s wvdsi18n. Preusmjeravanja se sada upravljaju preko wvdscond.

wvdssnippet

sidebar.txt:

{{wvds:snippet>main_menu}}

Korištenje:

Višekratno korištive strukture izbornika
HTML blokovi u sidebarima
Zajednički elementi preko namespaceova

wvdsacmenu

sidebar1.txt:

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

Korištenje:

Harmonika navigacija u sidebarima
Dinamičko prepoznavanje namespacea
Automatsko otvaranje/zatvaranje

CSS prilagodbe

Klase koje se mogu prepisati

Klasa	Opis
`.dokuwiki`	Glavni kontejner
`.wrapper`	Wrapper sadržaja
`#secondary`	Sidebar kontejner (Header na mobilnom)
`.sidebar-offcanvas`	Sidebar widgeti
`.toggle-sidebar`	Hamburger gumb
`.toggle-navigation`	Gear gumb
`.lang-switcher`	Kontejner izmjenjivača jezika
`.logo-container`	Logo wrapper
`.site-info`	Footer područje

Vlastiti stilovi

Kreirajte conf/userstyle.css za prilagodbe:

/* Prilagodba izmjenjivača jezika */
.lang-switcher {
    position: fixed;
    top: 10px;
    right: 10px;
}
 
/* Širina sidebara */
.sidebar {
    width: 280px;
}
 
/* Stiliziranje footera */
.footer {
    background: #333;
    color: #fff;
    padding: 20px;
}

Rukovanje greškama

Scenarij	Ponašanje
Jezik nije konfiguriran	Pokazuje sve jezike iz `languages`
Ciljna stranica ne postoji	Preusmjeravanje na početnu stranicu jezika
Sidebar nije pronađen	Koristi root sidebar
Dodatak nije instaliran	Predložak radi bez proširenja
CSS cache	Nakon ažuriranja: `?purge=true` ili Admin → purgecss

Najbolje prakse

u svim sidebarima s dinamičnim sadržajem
langPosition ispravno postaviti za strukturu namespacea
sidebar1.txt kreirati u svakom jezičnom namespaceu
wvdssnippet koristiti za višekratno korištive elemente izbornika
Fallback jezik uvijek konfigurirati
CSS cache očistiti nakon ažuriranja predloška (?purge=true)

Napomene o verzijama

Verzija	Datum	Promjene
1.2.0	2026-01-28	Mobilni header kompaktan (96px/80px), sprječavanje Dark Mode, Login stiliziranje, Anchor-Scroll popravak
1.1.0	2026-01-08	Sustav logotipa s wvdsimage integracijom, TOC Cookie perzistencija
1.0.0	2025-01-06	WvdS proširenja dodana

Vidi također

WvdS.DokuWiki.i18n Dodatak - Internacionalizacija (prijevodi)
WvdS.DokuWiki.Cond Dodatak - Uvjetni sadržaji + preusmjeravanja
WvdS.DokuWiki.Snippet Dodatak - Višekratno korištivi HTML blokovi
WvdS.DokuWiki.AcMenu Dodatak - Harmonika izbornik
Originalni Flat predložak

Tehnička referenca

Struktura datoteka (WvdS vs. original)

lib/tpl/flat/
├── main.php              → Glavni predložak (prošireno: Language Redirect, Layout CSS, Mobile Header)
├── detail.php            → Prikaz detalja medija
├── mediamanager.php      → Media manager
├── lang_helper.php       → [NOVO] Namespace-aware prijevodi
├── widgets.php           → [NOVO] Recent Pages/Comments widgeti
├── conf/
│   ├── default.php       → Zadana konfiguracija (prošireno)
│   └── metadata.php      → Metapodaci konfiguracije (prošireno)
├── lang/
│   ├── de/               → Njemački prijevodi (prošireno)
│   ├── en/               → Engleski prijevodi (prošireno)
│   ├── sl/               → [NOVO] Slovenski prijevodi
│   ├── it/               → [NOVO] Talijanski prijevodi
│   └── hr/               → [NOVO] Hrvatski prijevodi
├── css/
│   ├── customFlat.css    → Glavni stilovi (52KB, ~2000 redova)
│   ├── accessibility.css → [NOVO] Pristupačnost, sprječavanje Dark Mode
│   ├── logo.css          → [NOVO] Stiliziranje logotipa
│   └── color-palette.css → [NOVO] KRITIS paleta boja
├── assets/js/
│   └── jquery.min.js     → [NOVO] Lokalni jQuery (Offline)
└── images/
    └── logo.png          → Logotip predloška

customFlat.css područja

Redovi	Područje
1-108	Bazni stilovi (Page, Links, Pagetools)
109-254	Admin Config Manager (KRITIS boje)
255-454	TOC Sticky stiliziranje
455-605	Language Switcher, acmenu, Widgeti
606-1141	Discussion Plugin stiliziranje
1142-1591	Admin izbornik, Landing Page stilovi
1592-1599	row-offcanvas Override (Mobile)
1601-1613	Anchor-Scroll Offset
1615-1690	Mobile Contrast popravci (Sidebar, Footer, Buttons)
1692-1717	Logo Mobile Sizing
1719-1729	Sprječavanje Dark Mode
1731-1787	Language Selector Mobile Hide
1788-2010	Login/Register/ResendPWD stiliziranje

Funkcije predloška

Funkcija	Opis
`tpl_getLang()`	Vraća trenutni jezik
`tpl_getLangNs()`	Namespace-aware prijevod
`tpl_parseMultilang()`	Parsira `de:X\|en:Y` format
`tpl_renderLogo()`	Renderira logotip s base64 podrškom
`tpl_langSwitcher()`	Renderira HTML izmjenjivača jezika
`tpl_sidebar($which)`	Renderira navedeni sidebar
`tpl_footer()`	Renderira footer s višejezičnim tekstom

Hook točke

Hook	Opis
`TPL_METAHEADER_OUTPUT`	Modificiranje meta headera
`TPL_ACT_RENDER`	Renderiranje akcije
`TPL_CONTENT_DISPLAY`	Prikaz sadržaja

Flat PredložakAudit bestanden • 2026-03-30

▾

Code / qualitaet *

Stacks / dokuwiki-tpl

Sicherheit / kritis *

Inhaltsverzeichnis

WvdS.DokuWiki.Flat Predložak

Definicija

Promjene vs. original

Slučajevi korištenja

Funkcije

WvdS proširenja

Mobilna optimizacija (NOVO)

Proširenja stiliziranja (NOVO)

Konfiguracija

Izmjenjivač jezika

Sidebar

Layout (NOVO)

Logotip i naslov

TOC (Sadržaj)

Footer

Detalji mobilnog layouta

Dimenzije headera

Ponašanje hamburger izbornika

Sprječavanje Dark Mode

Primjeri

Primjer 1: Višejezična konfiguracija

Primjer 2: Sidebar struktura

Primjer 3: Višejezični footer

Primjer 4: Konfiguracija logotipa

Način rada

Logika izmjenjivača jezika

Razrješavanje sidebara

Automatsko preusmjeravanje

Integracija s WvdS dodacima

wvdsi18n (Internacionalizacija)

wvdssnippet

wvdsacmenu

CSS prilagodbe

Klase koje se mogu prepisati

Vlastiti stilovi

Rukovanje greškama

Najbolje prakse

Napomene o verzijama

Vidi također

Tehnička referenca

Struktura datoteka (WvdS vs. original)

customFlat.css područja

Funkcije predloška

Hook točke