Hugo - generátor statických stránek
Když v prohlížeči, třeba na této stránce, kliknete na jakékoli místo pravým tlačítkem, objeví se menu, které začíná položkou “Zpět”. Klikněte na položku “Zobrazit zdrojový kód stránky” a uvidíte zdrojový kód stránky, kterou si prohlížíte. Bude začínat asi tímto způsobem:
<!DOCTYPE html>
<html lang="en">
<head>
Psát každou stránku ve zdrojovém kódu by bylo příliš složité, a proto většina tvůrců webových stránek používá nějaký nástroj pro tvorbu webových stránek. Většinou se jedná o nějaký redakční systém (Wordpress, Drupal nebo Joomla) nebo o nějaký online nástroj jako je Webnode.
Pro tvorbu Pandita.cz ale používám nástroj. který není až tak dobře známý: generátor statických stránek (GSS). Generátory statických stránek mají ve srovnání s výše uvedenými nástroji několik výhod:
- umožňují snadné formátování dlouhých textů, i celých knih, do podoby webových stránek.
- statické stránky se načítají velmi rychle, protože vůbec nepracují s databází. Především u redakčních systémů může být prodleva i několik sekund.
- obsah stránek lze velmi snadno umístit na web ke stažení pro offline studium.
Navíc jsou generátory statických stránek velmi flexibilní. Původně jsem pandita.cz vytvářel pomocí GSS, který se jmenuje Jekyll. Až později jsem celý projekt migroval na GSS, který se jmenuje HUGO.
Formátování
Samotné formátování textů, neboli přeměna pdf souborů na webovou stránku, je velmi snadné.
Pokud například chcete vytvořit nápis stránky, vložíte před něj znak
#. Nápis pak vypadá takto:
Pokud chcete vytvořit odstavec, vložíte na jeho konci dvakrát značku
<br> .
Vytvořený odstavec pak v textu vypadá takto:
Když v prohlížeči, třeba na této stránce,
kliknete myší pravým tlačítkem, uvidíte obrázek,
který bude vypadat asi takto: <br> <br>.
Někdy budete možná chtít, aby určitá část byla napsána tučně. V takovém případě text uzavřete ve značce <b> .
Některé části budou napsány tučně.
Některé části budou napsány <b> tučně.</b>
Pokud byste chtěli vidět, jak vypadá zformátovaný soubor, klikněte na odkaz níže. Najdete v něm i některé další instrukce k formátování.
Instalace
Samotná instalace pracovního prostředí, ve kterém je možné obyčejné texty měnit na webové stránky, je určitě složitější, než formátování samotné. Pokud jste ale někdy už instalovali na svém počítači nějaký program, určitě to zvládnete.
K práci s textem budete potřebovat:
- Visual Studio Code (VSC) je program, který používají pro svoji práci programátoři. Zároveň je to ale i textový editor, jako např. Microsoft Word.
VSC je k dispozici zdarma a je možné si ho stáhout na jeho domovské stránce. - Projekt Pandita-hugo je jedna velká složka, ve které jsou umístěny jednotlivé kousky webu Pandita.cz: hlavička, patička, soubory s obsahem jednotlivých stránek, obrázky a soubory určující vzhled celého webu (CSS soubory).
Celý projekt je ke stažení na mém Githubu. Pro stažení projektu klikněte na zelené tlačítko a pak na položku "Download ZIP". - Hugo je generátor statických stránek. Je to ta věc, která spojí jednotlivé části projektu Hugo-pandita do jednotlivých statických webových stránek.
I HUGO je software, který je k dispozici zdarma. Můžete si ho stáhnout na jeho domovské stránce.
Video návody
V této části najdete video návody pro práci s VSC, Hugo a projektem Pandita-hugo. Jsou především pro všechny dobrovolníky, kteří by se chtěli podílet na formátování textů do podoby webové stránky. Návody jsou rozděleny do dvou částí.
-
2.Instalace GSS Hugo - kopírování Huga a projektu Pandita-hugo do těch správných složek
-
4. Instalace Hugo - hugo version + kopírování souboru hugo.exe do složky projektu
-
1. Práce s Hugo - výběr správného terminálu + vytvoření stránky Meditace mettá
-
2.Práce s Hugo - používání příkazu hugo server + jak se stránky vytvoří z kousků
-
3. Práce s Hugo - práce s příkazem hugo server (2.část) + tvorba obsahu stránky Meditace mettá
-
6. Práce s Hugo - formátování obsahu stránky Meditace mettá - část 2.
-
7. Práce s Hugo - formátování první kapitoly knihy Meditace metá
-
8. Práce s Hugo - rozdělování odstavců, nadpisy nižší úrovně, hledání a odstraňování otazníků
Čitelnost
Šablonu pro web Pandita.cz jsem se snažil tvořit tak, aby byl text co nejlépe čitelný. Proto jsem při její tvorbě zvolil pro formátování textu následující parametry:
- počet znaků na řádek na pandita.cz je mezi 65-71
- bezpatkové písmo (sans-serif)
- výška řádku (line-height) je 1.6
Každý výše uvedený parametr odkazuje na stránku, která vysvětluje jeho optimální nastavení.
Čitelnost také ovlivňují délky odstavců. Ty by pro online/offline čtení měly být kratší než u knih. Odstavce by neměly být delší než 150 slov. Já raději dělám odstavce ještě kratší. Pokud to význam textu jenom trochu umožňuje, formátuji texty na méně než 40-55 slov.