Šablonovací systém

Rudolf Svátek 2016-05-30 13:35

Redakční systém RS::RS pracuje se šablonami. Ty jsou postaveny nad šablonovacím systémem Latte. S redakčním systémem dodávám zatím jednu šablonu - default-bootstrap. Jakmile dokončím popis systému a nějaké menší úpravy, vrhnu se na tvorbu dalších šablon. Ono to zveřejnění člověka tak trochu nutí pracovat :-)

Můžeš si ale vytvořit i vlastní šablonu a používat ji místo výchozí šablony. Jak na to?

Statický web

Nejprve vytvoř prostě web tak, jak chceš, aby vypadal. Pokud umíš HTML, stačí opravdu v něm. pokud ne, na internetu se válí spousty šablon. Stačí stáhnout jejich zdroj, poupravit si co pořebuješ a je to. Budeš mít statický web se vším, co potřebuje - obrázky, javascripty, html kódy atd.

Vytvoření struktury šablony

  • ve složce \themes (ve které je už složka default-bootstrap), vytvoř další složku a nějak si ji pojmenuj. Vyhni se mezerám a diakritice.
  • překopíruj svůj statický web do této složky
  • přejmenuj index.html na "@layout.latte"
  • vytvoř nějaký náhled šablony a ulož jej jako soubor "thumbnail.png" do tebou vytvořené složky
  • vytvoř textový dokument "readme.txt". Vlož do něj nějaký popis tvojí šablony a opět jej ulož do tvé nové složky

Pokud jsi udělal těchto 5 kroků, máš šablonu. Sice celkem k ničemu, protože v ní nic nefunguje, ale už se dá zvolit. Když jí ale v nastavení zvolíš a zobrazíš si web, tak to, co uvidíš, tě asi neuspokojí. A tak ti teď ukážu v menším tutorialu, jak všechno rozchodit a vytvořit opravdu fungující šablonu pro RS::RS

Step by step

  1. stáhni si šablonu třeba z adresy http://www.free-css.com/free-css-templates/page197/html-42. Je to jednoduchá šablona zdarma a bude se na ní dobře demonstrovat výuka.
  2. rozbal archiv se šablonou do složky \themes. Tu najdeš v hlavní složce RS::RS. Jak si novou složku pojmenuješ je na tobě. Já zde budu používat název h00042.
  3. stáhni si náhledový obrázek z adresy http://www.free-css.com/assets/images/free-css-templates/page197/html-42.jpg. Ten je ve formátu jpg a RS::RS očekává formát png. Otevři jej tedy v nějakém grafickém editoru a ulož v požadovaném formátu. No dobře - udělal jsem to za tebe, ale jen pro tentokrát:
  4. vytvoř nový textový soubor a nazvi jej "readme.txt". Obsahem může být obyčejný text, nebo i html kód. Máš možnost nějak popsat svou šablonu. třeba:
    <h2>Šablona pro blog milovníků kávy</h2>
    <p>Na úvodní straně se mění obrázky, obsahuje kontaktní formulář a odkazy na facebook a další sociální sítě</p>

    Máš neomezený prostor pro fantazii

  5. přejmenuj soubor \themes\h00042\index.html na \themes\h00042\@layout.latte

  6. otevři v HTML editoru soubor @layout.latte a najdi všechna místa, dke se načítají nějaké externí css nebo js soubory s relativní cestou. Ta by totiž nefungovala v rámci RS::RS. Například:

    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
    
    <!---menu--->
    <link rel="stylesheet" href="{$basePath}/{$theme}/css/superfish.css" media="screen">
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/hoverIntent.js"></script>
    <script src="js/superfish.js"></script>
    

    Taková místa změň tak, že doplníš 2 proměnné, které určí umístění těch souborů takto:

    <link href="{$basePath}/{$theme}/css/styles.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
    
    <!---menu--->
    <link rel="stylesheet" href="{$basePath}/{$theme}/css/superfish.css" media="screen">
    <script src="{$basePath}/{$theme}/js/jquery-1.9.0.min.js"></script>
    <script src="{$basePath}/{$theme}/js/hoverIntent.js"></script>
    <script src="{$basePath}/{$theme}/js/superfish.js"></script>
    

    V našem příkladu se to týká i odkazů na obrázky, takže místo

    <img src="images/menu-left.png" alt="image"/>

    bude

    <img src="{$basePath}/{$theme}/images/menu-left.png" alt="image"/>

    a tak dál a tak podobně.

    Pokud se ti všechno povedlo podle návodu, měl bys v tuto chvíli vidět (pokud máš novou šablonu už nastavenou) naformátovaný web. Vypadá stejně jako stažená šablona, když bys otevřel její index.html.

To pro dnešek stačí. V dalším díle si ukážeme, jak vyrobit menu, aby se samo plnilo z databáze.

 

Komentáře (0)

Přidej svůj komentář

O mně

Jmenuji se Rudolf Svátek. Jsem lektor výpočetní techniky a PHP programátor. Stavím firemní stránky a eshopy. Aby se mi to dělalo pohodlně, vytvořil jsem redakční systém RS::RS, který ti tu nabízím k použití.

Rychlý kontakt na mně

  • Rudolf Svátek
  • Telefon:
    +420 777 828 353
  • Email:
  • Adresa:
    Josefa Hory 1097/5
    736 01 Havířov
    ČR



Tyto stránky používají Cookies. Používáním stránek s tím souhlasíte Další informace