====== WvdS.DokuWiki.Flat Predložak ====== **Predložak:** flat\\ **Verzija:** 1.2.0 (WvdS proširenja)\\ **Namespace:** ''lib/tpl/flat/''\\ **Original:** beemoon \\ **Proširenja:** Wolfgang van der Stille \\ **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 [[.:wvdscond]] dodatka. Koristite ''{{wvds:redirect target="{lang}:start"}}'' na vašim wiki stranicama. ==== Sidebar ==== ^ 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 [[.:wvdsimage]] 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). ==== Footer ==== ^ 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 */ /* 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 ===== * **~~NOCACHE~~** 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 ===== * [[.:wvdsi18n]] - Internacionalizacija (prijevodi) * [[.:wvdscond]] - Uvjetni sadržaji + preusmjeravanja * [[.:wvdssnippet]] - Višekratno korištivi HTML blokovi * [[.:wvdsacmenu]] - Harmonika izbornik * [[https://www.dokuwiki.org/template:flat|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 | ---- [x][x][x][x] [x][x][x][x][x] [x][x][x][-][-] ~~DISCUSSION~~