Úprava souboru index.hml a varianty

Z Developer Wiki

Přejít na: navigace, hledání

Šablona má jednu výchozí variantu rozložení stránek, zpravidla je to soubor index.html, v souboru config.xml je možné nastavit jiný soubor. V souboru config.xml se nastavuje i varianta pro úvodní stránku. Pokud není některá z variant nastavena jako varianta domovské stránky, je použita výchozí varianta šablony (index.html). Soubory variant se mohou lišit rozložením sloupců, soubory kaskádových stylů atd. Autor šablony má tak možnost vytvořit rozsáhlou šablonu s odlišnými barevnými provedením variant, obrázky atd. Soubory variant jsou HTML soubory, v kterých je zachováno základní rozložení stránky a doplněno o speciální XML značky (rubznačky).


Obsah

Značky hlavičky dokumentu

  • <rub:language/> - značka pro automatizované vkládání jazyka generované stránky
  • <rub:meta /> - zajišťuje výpis metatagů: http-equiv=“Content-Type“, description, keywords, author, generator, shortcut icon a rss, značka je povinná
  • <rub:title /> - vypíše titulek stránky, značka se vkládá mezi tagy <title>, značka je povinná
  • <rub:skinpath type="css/style.css" /> - připojí CSS soubor style.css
  • <rub:skinpath /> - vložení absolutní cesty před název souboru, který je součástí šablony (obrázky, CSS, JS), zajistí tak funkčnost prezentace i pod vlastní doménou.

Značky těla dokumentu

  • <rub:logo /> - vypíše název webu
  • <rub:slogan /> - vypíše slogan webu
  • <rub:banner src=”img/illustration.jpg””width=”850” height=”180” alt=”” /> - vloží ilustrační obrázek do hlavičky, značka je povinná, atributy značky:
    • src – cesta k ilustračnímu obrázku
    • width – šířka ilustračního obrázku a prostoru pro ilustrační obrázek
    • height – výška ilustračního obrázku a prostoru pro ilustrační obrázek
    • alt – alternativní popis ilustračního obrázku
Hlavička webu

Ilustrační obrázek může být použit v každé variantě šablony jiný. Lze tak vytvořit varianty s odlišnými ilustračnímy obrázky podle tématiky stránky. Aby nemohl být ilustrační obrázek ovlivněn z administrace Webnode, je potřeba jej vložit přes HTML tag <img>. Obrázek vkládaný přes rubznačku <rub:banner /> skrýt pomocí kaskádových stylů.

  • <rub:navigator /> - vloží navigátor stránek, na úvodní stránce není navigátor zobrazován
Navigátor stránek
  • <rub:zone /> - výpis obsahové zóny šablony a stránky, atributy značky:
    • type – typ obsahové zóny
    • page - obsah zóny je vypisován na konkrétní stránce
    • template - obsah zóny je vypisován na všech stránkách
    • index – pořadové číslo zóny, slouží k identifikaci zón na stránce
    • master – označené hlavní obsahové zóny, vyskytuje se pouze u zón typu page

Varianta šablony musí mít minimálně jednu obsahovou zónu. Počet zón je omezen na 6 typu page a 6 typu template. Značka <rub:zone type=“page“ index=“1“ master=“1“ /> je povinná.

Obsahové zóny šablony
  • <rub:menu id="mainMenu" maxlevel="99" type="static" /> - vloží menu; výsledný HTML kód menu je možné omezeně ovlivnit viz formátovač menu
    • maxlevel - omezení počtu vypsaných úrovní menu
    • type - typ výpisu menu
      • static - další úrovně menu se zobrazí po kliknutí
      • full - vypíše celý odrážkový seznam do nastavené úrovně
  • <rub:fulltextsearch advanced="1" /> - vloží do kódu formulář pro fulltextové vyhledávání, který lze upravit formátovačem.
  • <rub:contact /> - zobrazí kontaktní informace na všech stránkách, v administraci vzhledu lze zobrazení kontaktních informací zakázat, vzhled kontaktních informací lze upravit formátovačem

Značky rychlých odkazů a přepínání jazyka

  • <rub:homepagelink /> - vypíše URL adresu odkazu na úvodní stránku webu
  • <rub:const id="layoutHomepageTitle" /> - vypíše titulek odkazu na úvodní stránku
  • <rub:const id="layoutHomepage" /> - vypíše text odkazu na úvodní stránku
  • <rub:sitemaplink /> - vypíše URL adresu odkazu na mapu stránek
  • <rub:const id="layoutSitemapLinkTitle" /> - vypíše titulek odkazu na mapu stránek
  • <rub:const id="layoutSitemap" /> - vypíše text odkazu na mapu stránek
  • <rub:rsslink /> - vypíše URL adresu na seznam RSS kanálů
  • <rub:const id="rssLinkTitle" /> - vypíše titulek odkazu na seznam RSS kanálů
  • <rub:const id="rssLinkText" /> - vypíše text odkazu na seznam RSS kanálů
  • <rub:const id="layoutPrintTitle" /> - vypíše titulek odkazu pro tisk stránky
  • <rub:const id="layoutPrint" /> - vypíše text odkazu pro tisk stránky
Rychlé odkazy a přepínání jazyka
  • <rub:langselect id="languageSelect" type="flags" /> - vloží přepínání jazyků stránky, atribut type má jedinou hodnotu flags. Přepínání jazyků je ve výchozím stavu vypisováno jako sada odkazů s obrázky vlajek. Další možností jsou textové odkazy a select box, které lze nastavit v administraci. Vygenerovaný HTML kód přepínaní jazyků není možné ovlivnit formátovačem, má pevně danou podobu.

Ukázka vygenerovaného HTML kódu přepínání jazyků pro vlaječky: 

<div id="languageSelect">
  <div id="languageSelectBody">
    <div id="languageFlags">
      <a style="background-image: url(./img/flags/cz.png);" title="Čeština" href="http://demo.webnode.com/home/"><!-- / --></a>
      <a style="background-image: url(./img/flags/en.png);" title="English" href="http://demo.webnode.com/en/"><!-- / --></a>
      <a style="background-image: url(./img/flags/de.png);" title="Deutsch" href="http://demo.webnode.com/de/"><!-- / --></a>
    </div>
    <ul>
      <li class="flagCZ"><a href="http://demo.webnode.com/home/">Čeština</a></li>
      <li class="flagEN"><a href="http://demo.webnode.com/en/">English</a></li>
      <li class="flagDE"><a href="http://demo.webnode.com/de/">Deutsch</a></li>
    <ul>
 </div>
</div>

Značky patičky dokumentu

  • <rub:footer /> - text patičky, který může uživatel libovolně měnit
  • <rub:signature /> - podpis publikačního systému (systémová patička), podpis lze měnit při zakoupení balíčku Standard nebo Premium, jedná se o povinnou značku
Patička webu

JavaScriptové funkce

Do HTML souborů lze vkládat JavaScriptový kód mezi tagy <script> … </script>, aby nedocházelo k chybám, musí se skript uzavřít mezi zakomentované značky /* <![CDATA[ */ … /* ]]> */. Pro některé hover efekty je nutné mít přednačtené obrázky v cache prohlížeče. Webnode toto umožňuje pomocí JS funkce RubicusFrontedIns.addFileToPreload(). Funkci vložte těsně před tag </body>. Každý obrázek se zapisuje samostatně do vlastního volání funkce RubicusFrontedIns.addFileToPreload().

Ukázka použití: 

<script type="text/javascript">
/* <![CDATA[ */
	RubicusFrontendIns.addFileToPreload('<rub:skinpath />img/loading.gif');
/* ]]> */
</script>
Citováno z „http://developer.webnode.com/templates/index.php/%C3%9Aprava_souboru_index.hml_a_varianty“