Mundana od WowThemes.net je pěkně navržená šablona pro Jekyll. Vzhled jí vydržel, roky bez údržby se ale podepsaly na všem ostatním: načítala se pomalu, tahala data z cizích serverů a některé věci v ní tiše nefungovaly.
This article is also available in English.
Tahle verze si vzhled nechala a všechno pod ním postavila znovu. Výsledkem je web, který se načte skoro okamžitě, neohlašuje vaše čtenáře cizím službám a nepotřebuje žádnou údržbu kromě psaní článků.
Každý díl toho seriálu se věnuje jedné oblasti a je zároveň ukázkou toho, o čem píše: díl o obrázcích obrázky obsahuje, díl o tmavém režimu se dá v tmavém režimu číst. Seznam dílů nese každý z nich, takže se dají brát po pořádku i na přeskáčku.
Obsah
Výkon
99 bodů pro mobil, 100 pro počítač. Tolik dává demo webu šablony Google PageSpeed Insights, měřeno 28. října 2026. Rychlost nebyla dodatečná úprava, rozhodovala o podobě každé funkce.
Žádné zbytečné požadavky na externí služby. Ve výchozím nastavení šablona nenačítá žádné externí skripty, fonty ani jiné zdroje třetích stran. Externí služby se používají pouze tehdy, pokud je provozovatel webu výslovně zapne v konfiguraci. Dokud je nezapne, zůstává návštěva vašeho čtenáře mezi ním a vámi a o tom, že si váš článek otevřel, se nedozví nikdo další.
Jeden malý skript místo dvou knihoven. jQuery a balík Bootstrapu, dohromady skoro dvě stě kilobajtů, nahradil vlastní skript o velikosti kolem 11 kB.
Obrázky v rozměru pro dané zařízení. Při sestavení webu vzniknou zmenšené varianty a telefon si stáhne tu svou. Stránka se při načítání neposouvá, protože rozměry obrázku jsou v ní dopředu.
Vyhledávání, které se nerozsype s počtem článků. Index je samostatný soubor a stahuje se až při prvním hledání. Hledá i v textu článků, ne jen v titulcích. Nezáleží na diakritice, takže navody najde totéž co návody.
Písma z vlastní domény, včetně české diakritiky. Základní řez se přednačítá, takže text naskočí hned a nebliká.
Další stránka načtená dřív, než na ni čtenář klikne. Stačí, že nad odkazem podrží kurzor, a prohlížeč si článek stáhne dopředu. Přechod je pak okamžitý. Stahuje se jen stránka tohoto webu, nic se nevykresluje dopředu a nic se nenačítá odjinud.
Psaní článků
Rozepsané články. Článek si můžete v klidu rozepsat a prohlédnout na webu přesně v té podobě, v jaké vyjde. Nikde se přitom nevypisuje, není ve vyhledávání ani v mapě webu a vyhledávače ho mají neindexovat. Vydání je přesun jednoho souboru.
Obsah u delších článků. Sbalený seznam nadpisů před prvním z nich. Funguje bez JavaScriptu a Google z něj umí nabídnout odkazy přímo na části článku.
Popisky pod obrázky. Popisek se píše do uvozovek za adresu obrázku a vykreslí se pod ním. Obrázek bez popisku web nepustí ven, takže na něj nejde zapomenout.
Prohlížeč obrázků. Obrázek, který patří k textu, se otevře přes celou stránku na ztmavlém pozadí a mezi obrázky jednoho článku se dá listovat šipkami nebo prstem. Zavírá se klávesou Escape nebo tlačítkem zpět. Obrázek se nikdy nenatahuje nad svou skutečnou velikost, takže starý sken se ukáže tak, jak je. Každý takový obrázek má v pravém dolním rohu značku lupy, protože kurzor sice říká totéž, ale telefon žádný kurzor nemá. Portréty autorů, náhledy nabízených článků a ikony se neotevírají.
Mřížka obrázků. Dva a více obrázků napsaných hned za sebou se vykreslí jako náhledy po dvou na řádek, seříznuté na jeden tvar. Popisek náhledu se ukáže až v otevřeném obrázku, pod náhledem by se stejně nevešel. Jednotlivý článek se dá z mřížky vyjmout.
Poznámky pod čarou a reference. Odkazy na zdroje se dají umístit tam, kam patří, a nerozbijí tím strukturu článku. Ze seznamu vede šipka zpět na místo v textu.
Obarvený zdrojový kód. Kód v článku se obarví už při sestavení webu, ne až v prohlížeči čtenáře. Komentáře, klíčová slova, řetězce a čísla mají každé svou barvu, a palety jsou dvě, pro světlý i pro tmavý režim. Nestahuje se kvůli tomu nic a na stránce se nic nespouští.
Výzva k akci uprostřed článku. Rámeček s textem a tlačítkem, který se vloží sám doprostřed delšího článku. Text je na jednom místě v konfiguraci, nevkládá se ručně do každého článku.
Kotvy u nadpisů. U každého nadpisu je ikonka, která zkopíruje odkaz přímo na tu část článku.
Datum aktualizace a délka čtení. U článku je vidět, kdy vyšel, kdy jste ho naposledy upravili a jak dlouho ho čtenář bude číst.
Upoutávky na titulní straně. Článek se dá označit jako zvýrazněný nebo důležitý a dostane se do velkého bloku uprostřed titulní strany nebo do postranního panelu.
Označení komerčního obsahu. Placený článek se přizná jediným údajem ve svém záhlaví a řekne to na čtyřech místech naráz: větou nad textem, označením pod titulkem ve výpisech, předponou před titulkem v kanálu a atributem, kterým se placený odkaz označuje pro vyhledávače. Barevně se liší od pruhu nad rozepsaným článkem, aby se jedno nečetlo jako druhé.
Jak se web prochází
Kategorie mají vlastní stránky. Každá kategorie má vlastní adresu, vlastní popis a vlastní obrázek. Popisy se píšou do jednoho souboru, ne do šablon.
Autoři mají vlastní stránky. Jméno autora u článku vede na jeho stránku se seznamem článků, fotkou a odkazy na sítě.
Seriály. Článek řekne ve svém záhlaví, ke kterému seriálu patří a kolikátý je díl. Pořadí dílů neurčuje datum, takže se celý seriál dá vydat během jednoho odpoledne a přesto se čte po pořádku. Kolik dílů seriál má, se nikde nevypisuje, počítá se z článků, takže si ta dvě čísla nemůžou odporovat. Seznam dílů nese každý z nich a seriál má navíc vlastní stránku. Každý díl to má i napsané na sobě, štítkem nad perexem a ve výpisech, takže čtenář pozná, že nejde o samostatný text, ještě než začne číst.
Stránkování archivů. Delší archiv kategorie nebo autora se rozdělí na stránky. První si nechává svou dosavadní adresu, další nesou číslo za ní. Druhá a každá další stránka to říká ve svém titulku i popisu, aby je vyhledávač nepovažoval za kopie té první. Titulní strana má vlastní délku, protože stránka, na kterou čtenář přijde, a archiv, kterým listuje, se nečtou stejně.
Drobečková navigace. Na článku, v kategoriích i u autorů. Patří k těm mála věcí, u kterých je efekt ve výsledcích vyhledávání opravdu vidět.
Návrat na začátek stránky. U dlouhého článku se vpravo dole objeví kulaté tlačítko, které čtenáře vrátí na začátek. Dokud je nahoře, vidět není; objeví se, až projde celá obrazovka, a nahoře zase zmizí. Na počítači je u šipky i slovo Nahoru, na telefonu zůstane samotná šipka, protože tam je o místo nouze.
Tmavý režim. Stránka se řídí nastavením systému a přepínač v navigační liště dovolí čtenáři rozhodnout se jinak. Jeho volba se zapamatuje a systém už ji nepřebije. Uloží se v jeho prohlížeči a nikam dál neodchází; dokud přepínač nepoužije, neuloží se o něm vůbec nic.
Upozornění před odchodem na cizí web. Odkaz mimo váš web nejdřív zobrazí okénko a teprve po potvrzení se cizí stránka otevře v novém okně. Vaše vlastní weby i weby vydavatele se za cizí nepovažují.
Značka u odkazů mimo web. Za textem takového odkazu je malý čtvereček se šipkou ven, takže je odchod vidět ještě před kliknutím. Kreslí se jen v textu článků a stránek, ne v navigaci a v zápatí.
Stránka 404 ve stylu modré obrazovky smrti. Se smutným smajlíkem a adresou, na kterou se návštěvník snažil dostat.
Sdílení na sítě bez cizích skriptů. Tlačítka pro Facebook, Threads, LinkedIn a X jsou obyčejné odkazy.
Zpětná vazba ke článku. Pod textem článku je tlačítko, které otevře okénko s e-mailem, zaškrtávátkem pro chybu místo poznámky, textem zprávy a souhlasem. Zpráva jde do stejného formuláře jako kontakt a čtenář přitom zůstává na článku. Kód okénka se stahuje až při prvním kliknutí, takže článek, ke kterému nikdo nic nenapíše, nestojí nic.
Článek na papíře. Vytištěná stránka nese titulek, autora a datum, úvodní obrázek s popiskem, text a poznámky pod ním. Navigace, vyhledávání, tlačítka sdílení, blok vydavatele ani patička se netisknou, protože na papíře se v nich nedá nic zvolit. Tmavý režim se pro tisk vrátí na černou na bílé a za odkazem se vypíše jeho adresa.
Filtrování článků podle kategorií. Na přehledu kategorií si čtenář zaškrtne několik kategorií najednou a dostane články, které patří do všech vybraných současně. Odkazy na jednotlivé archivy zůstávají, takže stránka funguje i bez JavaScriptu a vyhledávačům se nic neskrývá. Výběr je zapsaný v adrese, takže se dá poslat dál.
SEO a nalezitelnost
Opravené generování titulku, popisu i jazyka stránky. Všechny značky, které vyhledávače a sítě čtou, jsou platné a každá je na stránce jednou.
Drobečková navigace se strukturovanými daty, kanonická adresa a twitter:card. Sekce twitter v konfiguraci schválně chybí, aby se u autorů bez účtu na X negeneroval prázdný údaj.
Mapa webu a RSS kanál. Obojí vzniká samo. Do kanálu jde jen úvod článku, ne celý text.
Archiv s méně než třemi články se vyhledávačům nenabízí. Je to tenký obsah, ale navigace na něm funguje dál.
Přesměrování ze starých adres. Když článek změní adresu, stará vede na novou.
Tlačítko Preferovaný zdroj v Googlu. Volitelné, ve výchozím stavu vypnuté.
Provoz webu
Analytika z konfigurace, ne ze šablon. Google Analytics 4, Microsoft Clarity i Meta Pixel se zapínají vyplněním jednoho údaje. Prázdná hodnota znamená, že se do stránky nevloží vůbec nic.
Dotaz na měření a dvě odpovědi. Jakmile je vyplněné ID některého z těch nástrojů, objeví se čtenáři lišta se dvěma volbami, měřením a marketingem. Odmítnutí neznamená, že se neměří: Analytics a Clarity běží dál, ale do zařízení čtenáře si neuloží nic, takže ho nepoznají, až se vrátí. Meta Pixel se bez souhlasu nenačte vůbec, protože anonymní režim nemá.
Česky nebo anglicky jedním klíčem. Přepne se celé rozhraní včetně formátu data. Čeština má správné tvary množného čísla, které angličtina nepotřebuje.
Testovací instance. Jedna hodnota v konfiguraci označí web jako testovací: v záhlaví je výrazný pruh, v názvu přibude TEST a celý web říká vyhledávačům, ať ho neindexují. Nejde si ho splést s ostrým webem.
Blok vydavatele v zápatí. Odkazy na vaše ostatní weby, rozdělené do kategorií, plus volitelný blok s nejnovějšími články z nich. Seznam webů se stahuje z jednoho místa, takže se na všech webech mění naráz.
Stránky, které web potřebuje. Kontakt s formulářem, ochrana osobních údajů, podmínky užití, o webu. Odkazy na ně se vykreslí jen tehdy, když je adresa vyplněná.
Sestavení podle plánu. Web se přegeneruje sám, i když do něj zrovna nikdo nesáhl.
Kontroly, které chyby najdou dřív než čtenář
Tohle je část, kterou na webu neuvidíte, a přitom je možná nejužitečnější. Statický webWeb složený z hotových souborů. Server je při návštěvě jen pošle, nic nepočítá a nic se neptá databáze, proto je rychlý a skoro nemá co napadnout.Podrobnosti o hesle Statický web, otevře se v novém okně totiž většinu chyb nehlásí, jen se tiše chová jinak, než čekáte.
Kontrola článků. Build se zastaví, když článek použije kategorii, která neexistuje, nemá titulní obrázek nebo popisek, odkazuje na neexistujícího autora nebo mu chybí oddělovač úvodu, kvůli kterému by do RSS šel celý text. Hlídá i samotný perex: musí to být jeden odstavec textu, ne nadpis, odrážky ani prázdno. Stejně přísně se kontrolují rozepsané články, takže se chybějící obrázek nebo popis najde už při psaní, ne v den vydání.
Kontrola názvů souborů. Build se zastaví u názvu, který Jekyll nepřijme jako článek a tiše by ho vynechal, u neexistujícího data i u dvou článků, které by skončily na stejné adrese. Volitelně hlídá i pořadová čísla článků, aby se žádné nepoužilo dvakrát.
Kontrola odkazů. Po sestavení projde hotový web a rozbité odkazy vypíše do logu.
Kontrola repozitáře. Nepotřebuje sestavený ani běžící web, čte jen soubory. Hlídá neuzavřený blok v šabloně a odkaz na soubor, který není; drží jazykové soubory v páru, aby jeden překlad nechyběl; a kontroluje, že verze sedí všude stejně. Spouští se ručně před odesláním změn a pouští si ji i sestavení.
Kouřové testy hotového webu. Sada testů, která projde vydaný web a ověří, že stojí: že každá adresa odpovídá, že neexistující vrací chybu 404, že stránkování, archivy, seriály i kanál jsou v pořádku a že funkce, které jste zapnuli, na stránkách opravdu jsou. Co se má ověřovat, si přečtou samy z repozitáře, takže vydání článku ani přidání kategorie v nich nic měnit nemusíte. Spouštějí se ručně, na vašem počítači, v PowerShellu.
Vyzkoušejte si to
Každá z popsaných oblastí má v tomhle seriálu vlastní díl, na kterém si ji můžete rovnou osahat. Všechny díly jsou pohromadě na stránce seriálu.
Co s tím dál
Šablona běží na GitHub Pages a sestavuje se sama při každé změně. Nasazení nového webu je práce na pár hodin: založit repozitář, vyplnit konfiguraci, nasměrovat doménu.
Jestli si na to netroufáte, ozvěte se mi nebo to zadejte komukoli, kdo umí GitHub Pages. Šablona je volně k dispozici a nejste na nikoho vázaní.
Podrobný seznam všech změn proti původní Mundaně je v souboru CHANGELOG.md v repozitáři šablony.
