WvdS.DokuWiki.Flat Template

Predloga: flat · Različica: 1.2.0 (razširitve WvdS) · Imenski prostor: lib/tpl/flat/ · Izvirnik: beemoon contact@beemoon.fr · Razširitve: Wolfgang van der Stille Wolfgang.van.der.Stille@gmail.com (The White Knight Labs) · Licenca: GPL 2

Predloga Flat v naši različici: razširitve, ki gradijo na tujem izvirniku, in za kaj se tu še uporablja.

Predloga Flat je minimalistična, odzivna predloga za DokuWiki z obsežnimi razširitvami WvdS za večjezičnost, preklopnik jezika, nastavljive stranske vrstice, sistem logotipa z izrisom base64, postavitev, prilagojeno mobilnim napravam, in tesno povezavo z vtičniki WvdS.

• Večjezična dokumentacija – samodejni preklopnik jezika in zaznavanje jezika
• Zbirke znanja – pregledna navigacija z zložljivimi meniji
• Mobilna uporaba – kompaktna glava (96px) z menijem »hamburger«
• Projektna dokumentacija – hierarhična zgradba stranske vrstice
• Podjetniški wikiji – profesionalna, prilagodljiva podoba
• Boljša zmogljivost – slike, vdelane kot base64, krajevne pisave

Tablica (< 1200px):
├── višina glave: 96px
├── logotip max-height: 60px
├── gumbi: 44×44px (hamburger levo, zobnik desno)
├── razmik gumbov: 26px zgoraj/spodaj (navpično sredinsko)
└── scroll-padding-top: 110px

Pametni telefon (< 480px):
├── višina glave: 80px
├── logotip max-height: 50px
├── scroll-padding-top: 95px
└── navigacija: manjša pisava

1. Zaprto (privzeto):
   └── vidna je le vrstica glave (logotip + gumbi)

2. Odprto (po dotiku gumba hamburger):
   ├── #secondary se razširi na 100vh
   ├── prikaže se navigacija (navpični seznam)
   ├── prikažejo se gradniki stranske vrstice
   └── drsnik, če vsebina ne gre na zaslon

3. Zapiranje:
   ├── dotik gumba hamburger
   └── dotik povezave na sidro (samodejno)

Predloga na vseh napravah vsili svetli način:

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

Zahteva: wiki v nemščini, angleščini in slovenščini.

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

Rezultat:

• Preklopnik jezika ponudi DE/EN/SL.
• Jezik se prepozna iz de:seite, en:page, sl:stran.
• Samodejno preusmeritev na ustrezni jezik zagotovi vtičnik wvdscond (glejte opombo pri nastavitvah).

Zahteva: glavni meni zgoraj, zložljiva navigacija spodaj.

Zgradba datotek:

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

sidebar.txt (koren):

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

de/sidebar1.txt:

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

Zahteva: besedilo noge v različnih jezikih.

Nastavitev:

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«

Zahteva: logotip iz predstavnostnih datotek wikija z optimalnim prikazom.

Skrbniške nastavitve:

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

Rezultat:

• Logotip se izriše kot slika, vdelana v obliki base64 (prek wkimage).
• Za logotip ni dodatne zahteve HTTP.
• Slika se pomanjša na največ 300px in postavi na sredino vsebnika 300x300px.
• object-fit: contain zagotovi, da je vidna vsa slika.

Druga možnost: logotip iz mape predloge:

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

Druga možnost: zunanji logotip:

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

1. Analiza imenskega prostora
   └── izlušči jezik na položaju langPosition
   └── primer: de:crypto:openssl → "de"

2. Menjava jezika
   └── zamenja jezikovni del v imenskem prostoru
   └── de:crypto:openssl → en:crypto:openssl

3. Preverjanje strani
   └── preveri, ali ciljna stran obstaja
   └── če ne: preusmeritev na začetno stran jezika

1. V imenskem prostoru
   └── išče sidebar/sidebar1 v trenutnem imenskem prostoru

2. Nadrejeni imenski prostor
   └── išče navzgor po nadrejenih imenskih prostorih

3. Koren kot zadnja možnost
   └── uporabi korensko stransko vrstico, če ne najde ničesar

1. Zazna jezik brskalnika
   └── razčleni glavo Accept-Language

2. Je jezik na voljo?
   ├── da: preusmeritev v imenski prostor jezika
   └── ne: preusmeritev na defaultLanguage

Predloga tesno sodeluje z vtičniki WvdS:

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

Uporaba:

• lokalizacija besedil v nogi
• prevajanje napisov v meniju
• razčlenjevanje vrednosti nastavitev

sidebar.txt:

{{wk:snippet>main_menu}}

Uporaba:

• menijske zgradbe za večkratno uporabo
• izseki HTML v stranskih vrsticah
• skupni elementi v več imenskih prostorih

sidebar1.txt:

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

Uporaba:

• zložljiva navigacija v stranskih vrsticah
• dinamično prepoznavanje imenskega prostora
• samodejno odpiranje in zapiranje

Za prilagoditve ustvarite conf/userstyle.css:

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

• v vseh stranskih vrsticah z dinamično vsebino
• langPosition nastavite pravilno glede na zgradbo imenskih prostorov
• sidebar1.txt ustvarite v vsakem jezikovnem imenskem prostoru
• wksnippet uporabljajte za menijske elemente, ki se ponavljajo
• Nadomestni jezik vedno nastavite
• Predpomnilnik CSS izpraznite po posodobitvi predloge (?purge=true)

• WvdS Internationalization (i18n) – internacionalizacija (prevodi)
• WvdS.DokuWiki.Cond Plugin – pogojna vsebina in preusmeritve
• Snippet – izseki HTML za večkratno uporabo
• wkacmenu – zložljivi meni
• Izvirna predloga Flat

lib/tpl/flat/
├── main.php              → glavna predloga (razširjena: jezikovna preusmeritev, CSS postavitve, mobilna glava)
├── detail.php            → pogled podrobnosti predstavnostne datoteke
├── mediamanager.php      → upravitelj predstavnostnih datotek
├── lang_helper.php       → [NOVO] prevodi glede na imenski prostor
├── widgets.php           → [NOVO] gradnika Recent Pages/Comments
├── conf/
│   ├── default.php       → privzete nastavitve (razširjene)
│   └── metadata.php      → metapodatki nastavitev (razširjeni)
├── lang/
│   ├── de/               → nemški prevodi (razširjeni)
│   ├── en/               → angleški prevodi (razširjeni)
│   ├── sl/               → [NOVO] slovenski prevodi
│   ├── it/               → [NOVO] italijanski prevodi
│   └── hr/               → [NOVO] hrvaški prevodi
├── css/
│   ├── customFlat.css    → glavni slogi (52KB, ~2000 vrstic)
│   ├── accessibility.css → [NOVO] dostopnost, preprečitev temnega načina
│   ├── logo.css          → [NOVO] slogi logotipa
│   └── color-palette.css → [NOVO] barvna paleta KRITIS
├── assets/js/
│   └── jquery.min.js     → [NOVO] krajevni jQuery (brez povezave)
└── images/
    └── logo.png          → logotip predloge

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

<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