Mekanismi

Sivuston ulkoasun muuttaminen

(:num:)

Kannattaa ihan ekaksi lukea Ohjeistus

Peruskäsitteitä

Mekanismi on teknisesti toteutettu käyttäen wikimoottoria nimeltä PmWiki. PmWikissä sivuja voi ryhmitellä sivustoiksi ryhmien (egl. group) avulla. Tässä ohjeessa sivusto ja PmWikin ryhmä tarkoittavat samaa asiaa.

PmWiki mahdollistaa koko wikin ja wikissä elävien sivustojen (group) teemoittamisen. Teema (skin) koostuu useimmiten yhdestä HTML -kielisestä pohjasivusta ja CSS -tyylitiedostosta. Kehittyneempien teemojen CSS -tyylit on usein jaettu useampaan tiedostoon näyttölaitteiden (tulostus, monitori, kännykkä jne) perusteella - kuten kaikissa hyvin kirjotietuissa ohjelmistoissa.

Teeman muokkaaminen

Huom: Teeman muokkaamista tai luomista varten on syytä pystyttää erillinen pmwiki kokeilujen ja toteutusken helpottamiseksi.

Teeman muokkaamiseksi tai vaihtamiseksi tarvitset pääsyn palvelimen tiedostojärjestelmään, sekä oikeuden muokata teeman tiedostoja. Mekanismiin saatu uuden teeman helpoiten tekemällä ensin teeman valmiiksi paikallisessa kehitysympäristössä (esim. omalla koneella käyttäen tätä vhttp://www.apachefriends.org/en/xampp.html ja paikallista PmWiki -asennusta) tai toimittamalla pelkän CSS -tiedoston ja toiveen valitsemasi mekanismiin asennetusta teemasta, jonka kanssa sitä on tarkoitus käyttää.

Joitakin esimerkkejä Mekanismissa sijaitsvista sivustoista, joiden teema on vaihdettu:

Teeman täydentäminen uudella tyylitiedostolla

Jos haluat käyttää olemassaolevaa teemaa CSS -tiedostolla täydennettynä, voit toimittaa ko. tiedoston Mekanismin ylläpidolle, joka laittaa sen sitten paikalleen.

Käytännössä CSS -täydennykset hoidetaan lisäämällä sivuston asetustiedostoon ./local/[sivuston_nimi_Case_Sensitive].php seuraava(t) rivi(t) ja kopioimalla tiedosto hakemistoon ./pub/css 

 $HTMLHeaderFmt['sivuston_nimi'] = "
  <link rel='stylesheet' href='\$FarmPubDirUrl/css/sivuston_nimi.css' type='text/css' />\n";

Jos haluat vain täydentää teemaa lisäämällä siihen uuden CSS -tyylitiedoston, voit lopettaa sivun lukemisen tähän. Lopputeksti käsittelee kokonaan uuden teeman luomista.

Teeman rakenne levyllä

Teemat löytyvät PmWikin hakemistosta ./pub/skins.

Olennaisin kansion tiedostoista on sen (toivottavasti) ainoa .tmpl -päätteinen tiedosto - joka on tavallisesti joko pmwiki.tmpl tai [teeman_hakemiston_nimi].tmpl. Jos .tmpl -tiedostoja on useita, käyttää PmWiki ensisijaisesti tiedostoa [teeman_hakemiston_nimi].tmpl.

Teemaan liittyvät tiedostot kannattaa tallentaa seuraavasti: 

 ./pub/skins/[teeman_nimi]
  +- /images  -- Kuvatiedostot jotka liittyvät juuri tähän teemaan
  +- /css -- Teeman tyylitiedostot
  +- /js -- Teemaan liittyvät skriptit

Tällöin teeman juurihakemistossa ./pub/skins/[teeman_nimi] on vain yksi tiedosto [teeman_hakemiston_nimi].tmpl

Jos tarvitset erillistä tulostustoimintoa (historiallisia CSS -mediatyyppejä tuntemattomia selaimia varten - ie5, netscape navigator jne) voit tehdä myös erillisen tulostusteeman nimellä print.tmpl - käytännössä tämän pitäisi kuitenkin olla tarpeetonta - koska tilanne on harvinainen ja PmWikin oletustulostusteema kattanee ko. tapaukset (?action=print avaa sivun ko. teemalla)

Teeman luominen tyhjästä

Kannattaa aloittaa sivulta http://www.pmwiki.org/wiki/PmWiki/SkinTemplates , josta löytyy kattava kuvaus kaikesta teemaan liittyvästä.

Yksinkertaisimmillaan teema on HTML -tiedosto, joka sisältää kaksi HTML -kommenttia <!--PageText--> ja <!--HTMLHeader-->

Alla esimerkki täysin validista ja toimivasta HTML5 -muotoisesta teemasta: 

  <!DOCTYPE html>
  <html>
    <head>
      <title>Esimerkkiteema</title>
      <!--HTMLHeader-->
    </head>
    <body>
      <!--PageText-->
      <!--HTMLFooter-->
    </body>
 </html>

Hieman kattavamman luurangon saa allaolevasta esimerkistä, joka lisää mukaan yhden <div> -elementin, jonka sisälle haetaan "wiki:" merkinnällä ensisijaisesti tämän sivuston $Group sivu SideBar, ja toissijaisesti sivu Site.SideBar. 

  <!DOCTYPE html>
  <html>
    <head>
      <title>Esimerkkiteema</title>
      <!--HTMLHeader-->
    </head>
    <body>
      <div id="sidebar"><!--wiki:$Group.SideBar Site.SideBar--></div>
      <!--PageText-->
      <!--HTMLFooter-->
    </body>
 </html>

Pohjia?

Valmiita pohjia voi etsiä täältä http://www.pmwiki.org/wiki/Skins/Skins

Mekanismin nykyisen UnStrapped5 ulkoasun lähdekoodit saa pyytämällä V:ltä.

Aikaisempi ulkoasu lt9602 on ladattavissa PmWikin teemasivustolta osoitteesta http://www.pmwiki.org/wiki/Skins/Lt9602

Mekanismin wiki pyörii PmWikin päällä ulkoasunaan UnStrapped