Vlastní šablony vzhledu

Tvorba vlastních šablon

Protože mikrostránky jsou svou podstatou jednoduché weby, nebude ani tvorba vlastních šablon nic složitého. Alespoň pro ty z vás, kterým není HTML a CSS cizí. V následujících několika odstavcích si ukážeme, jak na to.

Struktura šablony

Šablona je adresář obsahující následující:

  • Soubor s informacemi o šabloně - config.yml. Tento soubor je povinný. Je v jednoduchém formátu YAML, obsahuje v zásadě seznam dvojic typu "klíč: hodnota", kde každá s těchto dvojic je na samostatném řádku. Může obsahovat následující volby:
    • title: název šablony (povinné)
    • author:  jméno autora
    • author_url: URL na stránky autora
    • licence: název licence, pod kterou je šablona šířena
    • licence_url: URL s licenčními podmínkami
    • info: dodatečné informace o šabloně
  • screenshot.png - png soubor o velikosti 300x200. Zobrazuje se jako náhled vzhledu v seznamu vzhledů. Soubor není povinný.
  • adresář public - není sice povinný, ale doporučený. Pokud chcete v šabloně používat externí soubor se stylem, obrázky, javascript a podobně, adresář public bude jejich kořenovým adresářem. Pokud se tedy v HTML šabloně budete odkazovat např. na "/stylesheets/style.css", pak se tento soubor bude hledat v "public/stylesheets/style.css". Totéž s obrázky a podobně.
  • adresář views - povinný adresář, který obsahuje až tři HTML soubory:
    • layout.application.html - obsahuje šablonou layoutu (povinný)
    • page.html - obsahuje šablonu části s obsahem
    • notfound.html - obsahuje HTML šablonu, která se zobrazí, pokud někdo zadá neexistující stránku (povinný)

Adresářová struktura šablony tam může vypadat například takto:

theme
|-- config.yml
|-- public
|   |-- images
|   |   |-- btm.png
|   |   |-- bullet.gif
|   |   |-- h2b.png
|   |   |-- h2bg.png
|   |   `-- hb2.png
|   `-- stylesheets
|       `-- default.css
|-- screenshot.png
`-- views
    |-- layout.application.html
    |-- notfound.html
    `-- page.html

Formát HTML šablon

Html šablony, tedy ony 3 .html soubory, jsou běžné HTML soubory s přidáním několika sémantických značek, za které se doplní dané části webu. Značka má následující podobu:

[objekt.vlastnost]

Objektem může být web (pak jde o vlastnosti týkající se celého webu) nebo page, která má vlastnosti různé pro každou stránku. Výčet vlastností včetně vysvětlivek najdete v následující tabulce:

Objekt Vlastnost Popis
web title

Název webu. Nastavuje se v Úprava webu, záložka Nastavení.
web slogan Slogan webu. Jde o krátký text, který se většinou zobrazuje pod názvem webu. Nastavuje se na stejném místě jako název webu.
web language Nastavení jazyka webu. Implicitně čeština, nastavuje se na stejném místě jako název webu.
web backlinks Místo této značky se vloží zpětné odkazy nastavené pro tuto mikrostránky. Uživatelé je prozatím nemohou nastavovat. Jde většinou o odkaz "Běží na službě mikrostránky.com", ale pomocí rozhraní se dají nastavovat více libovolných odkazů.
web gacode Místo této značky se vloží kód Google analytics v případě, že je nastaven sledovací kód (nastavuje se na stejném místě jako název webu).
web content Obsah webu. Na místo této značky se vloží šablona page.html nebo notfound.html.
web sidebar Boční lišta webu - sidebar. Jde o obsah, který je stejný pro všechny podstrany webu. Nastavuje se v Úpravách webu, záložka Sidebar.
web menu

Místo této značky se vloží kód pro menu. Jde o monolitický kus HTML, který si však můžete libovolně nastylovat. Menu má takovouto strukturu: <ul id="menu"><li class="first">...</li><li>...</li>...<li class="last">...</li></ul>. V jednotlivých položkách seznamu (li) jsou odkazy na podstránky v pořadí, které je nastaveno v úpravách webu v záložce stránky. Zobrazují se pouze ty stránky, které mají nastaveno zobrazováni v menu (viz sloupec Menu v tabulce stránek na zmíněném místě).
page title Název konkrétní stránky. Ukládá se do metatagu title. Nastavuje se v úpravách každé jednotlivé stránky. Implicitně se tato vlastnost u každé stránky přednastavuje na "Název webu » Název položky v menu".
page keywords Klíčová slova, nastavují se opět v úpravách stránky. Používá se opět jako metadata (keywords) dané stránky.
page description Popis stránky, nastavují se opět v úpravách stránky. Používá se jako metadata (description) dané stránky.
page content Obsah stránky. Tato značka se obvykle vkládá do souboru page.html. Místo ní se vloží obsah konkrétní stránky.

» Zpět na seznam témat | Příbuzné téma: Drobné úpravy šablon