WvdS.DokuWiki.Flat Predloga

Predloga: flat
Verzija: 1.1.0 (WvdS razširitve)
Imenski prostor: lib/tpl/flat/
Original: beemoon contact@beemoon.fr
Razširitve: Wolfgang van der Stille Wolfgang.van.der.Stille@gmail.com (The White Knight Labs)
Licenca: GPL 2

Definicija

Flat predloga je minimalistična, odzivna DokuWiki predloga z WvdS razširitvami za večjezičnost, preklopnik jezika, nastavljive stranske vrstice, sistem logotipa z base64 upodobitvijo in brezhibno integracijo z WvdS vtičniki.

Spremembe napram originalu

Komponenta	Original	WvdS
customFlat.css	3,4 KB (176 vrstic)	52 KB (~2000 vrstic)
main.php	2,9 KB (69 vrstic)	13 KB (~240 vrstic)
Pisave	CDN Google Fonts	Sistemske pisave (brez povezave)
jQuery	CDN Google	Lokalno (jquery.min.js)
Nove datoteke	-	lang_helper.php, widgets.php, accessibility.css, logo.css, color-palette.css

Primeri uporabe

Večjezična dokumentacija - Samodejni preklopnik jezika in zaznava
Baze znanja - Čista navigacija z harmonika meniji
Mobilna uporaba - Kompaktna glava (96px) s hamburger menijem
Projektna dokumentacija - Hierarhična struktura stranske vrstice
Podjetniški wikiji - Profesionalen, prilagodljiv dizajn
Optimizirana zmogljivost - Vgrajene base64 slike, lokalne pisave

Funkcije

WvdS razširitve

Funkcija	Opis
Preklopnik jezika	Vgrajen preklop jezika z ikonami zastav
Samodejna preusmeritev	Preusmeritev glede na jezik brskalnika
Dvojna stranska vrstica	Nastavljiva zgornja in spodnja stranska vrstica
Harmonika meni	Zložljiva navigacija
Večjezično besedilo	Podpora za `de:X\|en:Y` format
Sistem logotipa	Prilagodljiv logotip z base64 upodobitvijo prek wkimage
Stanje TOC	Stanje kazala vsebine shranjeno v piškotku
Integracija vtičnikov	Brezhibno sodelovanje z WvdS vtičniki

Mobilna optimizacija (NOVO)

Funkcija	Opis
Kompaktna glava	96px (tablica) / 80px (pametni telefon) z enakim razmikom
Hamburger meni	Zdrs čez namesto 300px premika, zapre se ob kliku na sidro
Drsenje do sidra	Odmik glave preprečuje, da bi sidra pristala za glavo
Preprečitev temnega načina	`color-scheme: only light` vsili svetel dizajn
Prilagojeno za dotik	Tipala velikosti 44×44px za gumbe

Razširitve oblikovanja (NOVO)

Področje	Opis
Prijava/registracija	Dizajn kartic z oranžnim poudarkom KRITIS
Skrbniški meni	Posodobljen dizajn v konzolnem slogu za različico
Config Manager	Boljša berljivost, barvna shema KRITIS
Vtičnik Discussion	Komentarji v slogu Apple/Microsoft
TOC	Lepljivo z modernim senčenjem
Podnožje	Temno besedilo na svetli podlagi

Konfiguracija

Preklopnik jezika

Nastavitev	Tip	Privzeto	Opis
`enableLangSwitcher`	Vklop/Izklop	Izklop	Omogoci preklopnik jezika
`languages`	Besedilo	de,en	Razpolozljivi jeziki (loceni z vejico)
`langPosition`	Stevilo	0	Polozaj jezika v imenskem prostoru (0 = prva raven)
`defaultLanguage`	Besedilo	de	Privzeti jezik za nadomestno moznost

enableAutoRedirect odstranjen: Samodejne preusmeritve zdaj upravlja vticnik WvdS.DokuWiki.Cond Plugin. Uporabite {{wk:redirect target="{lang}:start"}} v svojih wiki straneh.

Stranska vrstica

Nastavitev	Tip	Privzeto	Opis
`topSidebar`	Besedilo	sidebar	Zgornja stran stranske vrstice
`bottomSidebar`	Besedilo	sidebar1	Spodnja stran stranske vrstice
`topSidebarTitle`	Besedilo	(prazno)	Naslov zgornje stranske vrstice
`bottomSidebarTitle`	Besedilo	(prazno)	Naslov spodnje stranske vrstice
`adminSidebarTitle`	Besedilo	(prazno)	Naslov skrbniške stranske vrstice
`enableAccordion`	Vklop/Izklop	Izklop	Harmonika obnašanje za stransko vrstico

Postavitev (NOVO)

Nastavitev	Tip	Privzeto	Opis
`siteWidth`	Število	75	Širina strani
`siteWidthUnit`	Izbira	%	Enota (%, px, em, rem)
`sidebarWidth`	Število	300	Širina stranske vrstice
`sidebarWidthUnit`	Izbira	px	Enota (px, %, em, rem)

Logo in naslov

Nastavitev	Tip	Privzeto	Opis
`showTitle`	Vklop/Izklop	Vklop	Prikaži naslov wikija
`showLogo`	Vklop/Izklop	Izklop	Prikaži logotip
`logoSource`	Izbira	template	Vir logotipa: `template`, `wiki`, `url`
`logoPath`	Besedilo	(prazno)	Pot glede na vir (ime datoteke, wiki:pot ali URL)
`logoContainerSize`	Število	300	Velikost vsebnika v pikslih (kvadrat)
`logoFit`	Izbira	contain	Prilagoditev slike: `contain`, `cover`, `fill`, `scale-down`, `none`
`logoPosition`	Izbira	center	Položaj v vsebniku: `center`, `top`, `bottom`, itd.
`logoMaxWidth`	Število	300	Maks. širina za optimizacijo slike
`logoQuality`	Število	90	Kakovost slike (10-100)

base64 upodobitev: Ko je vtičnik WvdS.DokuWiki.Image Vtičnik nameščen, so logotipi upodobljeni kot vgrajene base64 slike. To zmanjša HTTP zahteve in izboljša čas nalaganja.

TOC (Kazalo vsebine)

Nastavitev	Tip	Privzeto	Opis
TOC piškotek	Samodejno	-	Stanje (razširjeno/zloženo) se shrani v piškotek `dw_toc_state` (1 leto)

Stanje TOC se samodejno shrani ko uporabnik klikne preklop. Ob naslednjem nalaganju strani se shranjeno stanje obnovi (samo na namizju).

Podnožje

Nastavitev	Tip	Privzeto	Opis
`footerText`	Besedilo	(prazno)	Besedilo v podnožju (podpira `de:X\|en:Y` format)

Podrobnosti mobilne postavitve

Dimenzije glave

Tablica (< 1200px):
├── Višina glave: 96px
├── Logo max-height: 60px
├── Gumbi: 44×44px (hamburger levo, zobnik desno)
├── Razmik gumbov: 26px zgoraj/spodaj (navpično centrirano)
└── scroll-padding-top: 110px

Pametni telefon (< 480px):
├── Višina glave: 80px
├── Logo max-height: 50px
├── scroll-padding-top: 95px
└── Navigacija: bolj kompaktna pisava

Obnašanje hamburger menija

1. Zaprto (privzeto):
   └── Vidna je le vrstica glave (logo + gumbi)

2. Odprto (po dotiku hamburgerja):
   ├── #secondary se razširi na 100vh
   ├── Pojavi se navigacija (navpični seznam)
   ├── Pojavijo se pripomočki stranske vrstice
   └── Drsnik ob prelivanju

3. Zapiranje:
   ├── Dotik hamburgerja
   └── Dotik povezave na sidro (samodejno)

Preprečitev temnega načina

Predloga na vseh napravah vsili svetli način:

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

To preprečuje Chromov „samodejni temni način“, ne da bi uporabnik moral spremeniti nastavitve naprave.

Primeri

Primer 1: Večjezična konfiguracija

Zahteva: Wiki z nemščino, angleščino in slovenščino.

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';

start.txt (za samodejno preusmeritev):

{{wk:redirect target="{lang}:start"}}

Rezultat:

Preklopnik jezika prikaze DE/EN/SL moznosti
Samodejna preusmeritev preko vticnika wvdscond

Primer 2: Struktura stranske vrstice

Zahteva: Glavni meni zgoraj, harmonika navigacija spodaj.

Struktura datotek:

data/pages/
├── sidebar.txt          → Glavni meni
├── sidebar1.txt         → Prazna datoteka (nadomestek)
├── de/
│   └── sidebar1.txt     → {{wk:snippet>go_back}}
│                           {{wk:acmenu dynamic="2"}}
├── en/
│   └── sidebar1.txt     → {{wk:snippet>go_back}}
│                           {{wk:acmenu dynamic="2"}}
└── sl/
    └── sidebar1.txt     → {{wk:snippet>go_back}}
                            {{wk:acmenu dynamic="2"}}

sidebar.txt (Koren):

~~NOCACHE~~
{{wk:snippet>main_menu}}

sl/sidebar1.txt:

~~NOCACHE~~
{{wk:snippet>go_back}}
{{wk:acmenu dynamic="2"}}

Primer 3: Večjezično podnožje

Zahteva: Besedilo podnožja v različnih jezikih.

Konfiguracija:

footerText = de:© 2025 Meine Firma - Alle Rechte vorbehalten|en:© 2025 My Company - All rights reserved|sl:© 2025 Moje podjetje - Vse pravice pridržane

Rezultat:

Nemške strani: „© 2025 Meine Firma - Alle Rechte vorbehalten“
Angleške strani: „© 2025 My Company - All rights reserved“
Slovenske strani: „© 2025 Moje podjetje - Vse pravice pridržane“

Primer 4: Konfiguracija logotipa

Zahteva: Logotip iz wiki medijev z optimalno prikazavo.

Skrbniška konfiguracija:

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

Rezultat:

Logotip je upodobljen kot vgrajena base64 slika (prek wkimage)
Ni dodatne HTTP zahteve za logotip
Slika je pomanjšana na maks. 300px in centrirana v 300x300px vsebniku
object-fit: contain zagotavlja, da je celotna slika vidna

Alternativa: Logotip iz mape predloge:

showLogo = 1
logoSource = template
logoPath = logo.png        // nahaja se v lib/tpl/flat/images/logo.png

Alternativa: Zunanji logotip:

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

Kako deluje

Logika preklopnika jezika

1. Analiza imenskega prostora
   └── Izvleče jezik iz položaja langPosition
   └── Primer: sl:crypto:openssl → "sl"

2. Preklop jezika
   └── Zamenja jezikovni segment v imenskem prostoru
   └── sl:crypto:openssl → en:crypto:openssl

3. Preverjanje strani
   └── Preveri ali ciljna stran obstaja
   └── Če ne: Preusmeritev na začetno stran jezika

Razreševanje stranske vrstice

1. Specifično za imenski prostor
   └── Išče sidebar/sidebar1 v trenutnem imenskem prostoru

2. Starševski imenski prostor
   └── Išče navzgor v starševskih imenskih prostorih

3. Korenska nadomestna možnost
   └── Uporabi korensko stransko vrstico če nič ni najdeno

Samodejna preusmeritev

1. Zaznaj jezik brskalnika
   └── Razčleni glavo Accept-Language

2. Jezik razpoložljiv?
   ├── Da: Preusmeri na imenski prostor jezika
   └── Ne: Preusmeri na defaultLanguage

Integracija z WvdS vtičniki

Predloga deluje brezhibno z WvdS vtičniki:

wki18n

// V datotekah predloge
$helper = plugin_load('helper', 'wki18n');
$lang = $helper->getLang();
$text = $helper->get('menu_home');

Uporaba:

Lokalizacija besedil podnožja
Prevod oznak menija
Razčlenjevanje konfiguracijskih vrednosti

wksnippet

sidebar.txt:

{{wk:snippet>main_menu}}

Uporaba:

Večkrat uporabne menijske strukture
HTML komponente v stranskih vrsticah
Skupni elementi preko imenskih prostorov

wkacmenu

sidebar1.txt:

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

Uporaba:

Harmonika navigacija v stranskih vrsticah
Dinamična zaznava imenskega prostora
Samodejno odpiranje/zapiranje

CSS prilagoditve

Razredi za preglasitev

Razred	Opis
`.dokuwiki`	Glavni vsebnik
`.wrapper`	Ovoj vsebine
`.sidebar`	Vsebnik stranske vrstice
`.sidebar-top`	Zgornja stranska vrstica
`.sidebar-bottom`	Spodnja stranska vrstica
`.lang-switcher`	Vsebnik preklopnika jezika
`.lang-flag`	Jezikovne zastave
`.footer`	Območje podnožja
`.logo-wrapper`	Vsebnik ovoja logotipa
`.logo-container`	Klikljivo območje logotipa
`.logo-img`	Slika logotipa

Lastni slogi

Ustvarite conf/userstyle.css za prilagoditve:

/* Prilagoditev preklopnika jezika */
.lang-switcher {
    position: fixed;
    top: 10px;
    right: 10px;
}
 
/* Širina stranske vrstice */
.sidebar {
    width: 280px;
}
 
/* Oblikovanje podnožja */
.footer {
    background: #333;
    color: #fff;
    padding: 20px;
}

Obravnava napak

Scenarij	Vedenje
Jezik ni konfiguriran	Prikaže vse jezike iz `languages`
Ciljna stran ni najdena	Preusmeritev na začetno stran jezika
Stranska vrstica ni najdena	Uporabi korensko stransko vrstico
Vtičnik ni nameščen	Predloga deluje brez razširitev
wkimage ni nameščen	Logotip uporablja običajni URL namesto base64

Dobre prakse

v vseh stranskih vrsticah z dinamično vsebino
langPosition pravilno nastavite za strukturo imenskega prostora
sidebar1.txt ustvarite v vsakem jezikovnem imenskem prostoru
wksnippet uporabljajte za večkrat uporabne menijske elemente
Nadomestni jezik vedno konfigurirajte

Zgodovina verzij

Verzija	Datum	Spremembe
1.1.0	2026-01-08	Sistem logotipa z integracijo wvdsimage, ohranjevanje stanja TOC v piškotku
1.0.0	2025-01-06	WvdS razširitve dodane

Glej tudi

WvdS.DokuWiki.i18n Plugin - Internacionalizacija (prevodi)
WvdS.DokuWiki.Cond Plugin - Pogojna vsebina + Preusmeritve
WvdS.DokuWiki.Snippet Vtičnik - Veckrat uporabne HTML komponente
wkacmenu - Harmonika meni
WvdS.DokuWiki.Image Vtičnik - Obdelava slik z base64 izhodom
Originalna Flat predloga

Tehnična referenca

Struktura datotek

lib/tpl/flat/
├── main.php            → Glavna predloga
├── detail.php          → Pogled podrobnosti medijev
├── mediamanager.php    → Upravljalnik medijev
├── conf/
│   ├── default.php     → Privzeta konfiguracija
│   └── metadata.php    → Metapodatki konfiguracije
├── lang/
│   ├── de/lang.php     → Nemški prevodi
│   ├── en/lang.php     → Angleški prevodi
│   └── sl/lang.php     → Slovenski prevodi
├── lang_helper.php     → Jezikovne in logo pomožne funkcije
├── css/
│   ├── style.css       → Slogi predloge
│   └── logo.css        → Slogi logotipa
├── js/
│   └── script.js       → Skripte predloge (vklj. TOC piškotek)
└── images/
    └── flags/          → Jezikovne zastave

Področja customFlat.css

Vrstice	Področje
1-108	Osnovni slogi (stran, povezave, orodja strani)
109-254	Admin Config Manager (barve KRITIS)
255-454	Lepljivo oblikovanje TOC
455-605	Preklopnik jezika, acmenu, pripomočki
606-1141	Oblikovanje vtičnika Discussion
1142-1591	Skrbniški meni, slogi pristajalne strani
1592-1599	Preglasitev row-offcanvas (mobilno)
1601-1613	Odmik drsenja do sidra
1615-1690	Popravki mobilnega kontrasta (stranska vrstica, podnožje, gumbi)
1692-1717	Mobilna velikost logotipa
1719-1729	Preprečitev temnega načina
1731-1787	Skrivanje izbirnika jezika na mobilnih napravah
1788-2010	Oblikovanje prijave/registracije/ponastavitve gesla

Funkcije predloge

Funkcija	Opis
`tpl_getLang()`	Vrne trenutni jezik
`tpl_langSwitcher()`	Izriše HTML preklopnika jezika
`tpl_sidebar($which)`	Izriše določeno stransko vrstico
`tpl_footer()`	Izriše podnožje z večjezičnim besedilom
`tpl_renderLogo()`	Izriše logotip s podporo za base64
`tpl_getLangNs()`	Vrne prevedeno besedilo glede na imenski prostor
`tpl_parseMultilang()`	Razčleni večjezične formatne nize

Točke za kljuke

Kljuka	Opis
`TPL_METAHEADER_OUTPUT`	Spreminjanje meta glave
`TPL_ACT_RENDER`	Izrisovanje akcij
`TPL_CONTENT_DISPLAY`	Prikaz vsebine

<wk:audit stack=„doku“ title=„Flat Predloga“>

<wk:include ref="code:qualitaet" critical="true">[x][x][x][x]</wk:include>
<wk:include ref="stacks:dokuwiki-tpl">[x][x][x][x][x]</wk:include>
<wk:include ref="sicherheit:kritis" critical="true">[x][x][x][-][-]</wk:include>

</wk:audit>

~~DISCUSSION~~