Nesnáším složitost. A když řeknu nenávist Myslím to vážně. Když vytváříte webové stránky několik let, začnete si uvědomovat, že jednoduchost je váš nejlepší přítel. Jak jednoduchý je jeden systém, tak snadný je jeho vývoj a údržba. V dnešní době chce každý uživatel ovládat obsah v jeho online vzhledu. Pro mě jako blogera je důležité pracovat s dobře vypadajícím, rychlým a spolehlivým CMS. Psaní je obtížné samo o sobě, a pokud je proces náročný, celá zkušenost není příliš dobrá.
V tuto chvíli, pokud chci publikovat článek na svém blogu, musím otevřít administraci svého vlastního PHP CMS a vytvořit nový záznam. S psaním obsahu tam ale nejsem spokojený a příspěvky připravuji ve formátu Markdown. Když jsem připraven, transformuji Markdown na HTML a zveřejním jej na webu. Všechny věci, které jsem napsal, jsou uloženy v repozitářích GitHubu.
Takže, jak vidíte, existuje několik kroků, které musím dodržet, než něco zveřejním. Někdy jsem na to prostě moc líná a blog prostě nepíšu. Posledních pár měsíců přemýšlím o změně způsobu psaní. Potřebuji něco nového a zajímavého, co nahradí starý systém LAMP. Přečetl jsem několik článků o systémech pro správu obsahu plochých souborů a rozhodl jsem se investovat nějaký čas do vývoje takových systémů nad Node.js. Zatímco jsem pracoval na dokumentaci AbsurdJS, vytvořil jsem krátký skript Node.js, který používá Gulp k převodu Markdown do HTML. Líbí se mi, jak vše funguje, a rozhodl jsem se jít tímto směrem.
Nová hračka
O dva dny (a noci) později a Techy byl na světě. To je modul Node.js, který má všechny vlastnosti jednoduchého plochého CMS, které jsem potřeboval.
- Jednoduchost – jednoduše pusťte soubor markdown a spusťte
09
příkaz. Modul převádí všechny16
soubory do22
stránky. - Předdefinovaný design – Techy zkopíruje potřebné CSS a JavaScript (pokud existují) do kořenové složky projektu.
- Theming – samozřejmě jako každý jiný CMS nabízí použití různých témat. Takže můžete změnit hlavní rozvržení, styly, fonty, všechno.
- Podpora částí – spolu se syntaxí Markdown můžete psát výrazy Techy. Ve skutečnosti je to jen starý dobrý JavaScript mezi
36
a48
markery. K dispozici jsou některé předdefinované metody a proměnné. Jedním z nich je51
funkce. Přijímá relativní cestu k souboru HTML. - Podpora obyčejného HTML – někdy formát Markdown nestačí. V takových případech by CMS měl podporovat přidávání prostého HTML.
- Vztah mezi různými stránkami – to je docela důležitá vlastnost. V populárních řešeních, jako je například WordPress, jsou v databázi uchovávány informace jako datum vytvoření nebo autor příspěvku. Nemáme zde však databázi. Takové informace by tedy měly být zapsány přímo na stránky. Zjistil jsem, že je to docela užitečný přístup, protože přizpůsobuje vlastnosti článku jeho obsahu.
- Zvýrazňovač syntaxe kódu a písmo ikon
Zkusíme to
Než začnete používat Techy, musíte jej nainstalovat.
npm install -g techy
Příkaz nastaví knihovnu jako globální nástroj příkazového řádku. Někde vytvořte novou složku a přidejte následující 68
soubor:
# That's a test page Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, maiores, ipsa, quos ratione consectetur facilis.
Přejděte do stejného adresáře a zadejte 71
a stiskněte Enter . Měli byste vidět následující obrazovku.
Techy generuje 88
vedle vašeho 99
soubor. Spolu s tím přináší novou složku 104
. Obsahuje hlavní rozvržení HTML, styly CSS a kód JavaScript (pokud existuje) potřebný pro vaši stránku. Techy má integrované Prism a FontAwesome. Můžete tedy publikovat kód a používat skvělé ikony bez dalšího nastavování. A protože CMS používá Gulp, automaticky začne naslouchat změnám ve vašich souborech Markdown.
Obsah 112
by mělo být:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Techy</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="themes/default/public/font-awesome-4.0.3/css/font-awesome.min.css"> <link rel="stylesheet" href="themes/default/public/styles.css"> <link rel="stylesheet" href="themes/default/public/prism/prism.css" /> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,800,700' type='text/css'> </head> <body> <div class="content"> <h1 id="that-s-a-test-page">That's a test page</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, maiores, ipsa, quos ratione consectetur facilis.</p> </div> <script src="themes/default/public/prism/prism.js"></script> <script src="themes/default/public/scripts.js"></script> </body> </html>
Techy se postará o nudné věci a zanechá váš soubor čistý. Kód HTML, do kterého je vložen váš obsah, je definován v 121
. Můžete jej změnit na něco jiného pomocí následujícího výrazu:
// it's looking in // themes/[theme name]/tpl directory <% set('layout', 'layouts/mylayout.html') %>
Můžete dokonce použít své vlastní téma. Stačí zavolat na číslo 130
příkaz s následujícím parametrem:
techy --theme mythemename
Mějte na paměti, že modul se zabývá cestami ve vašich souborech. I když máte hluboce vnořené soubory, adresy URL stylů CSS a souborů JavaScript budou nastaveny správně.
Nyní, aby byly věci trochu zajímavější, vytvoříme vlastní funkci Techy, která vrátí nastavení definované na jiné stránce. K tomu potřebujeme nový soubor Markdown. Vytvořte 144
a vložte do něj následující text:
<% set('name', 'profile') %> <% set('profile', { name: 'John Black', job: 'web developer'}) %> Hello, I'm <% get('profile').name %> and I'm working as <% get('profile').job %>. This is my profile page.
153
vytvoří vlastnost na aktuální stránce a přiřadí jí hodnotu. Stejnou hodnotu lze načíst pomocí 167
metoda. Nyní definujeme novou metodu jako 172
nebo 186
musíme vytvořit soubor JavaScript, jehož jméno končí na 197
. Například 207
.
module.exports = function() { var profilePage = this.page('profile'); return profilePage.get('profile'); }
219
klíčové slovo v těle funkce ukazuje na stránku, na které je metoda spuštěna. 229
je předdefinovaná funkce, která přijímá název stránky. A protože jsme definovali 232
vlastnost v 246
nyní jsme schopni získat její hodnotu a vrátit ji. Pokud aktualizujeme 257
s následujícím kódem:
# That's a test page * Name: <% getprofile().name %> * Job: <% getprofile().job %>
výsledek bude:
<h1 id="that-s-a-test-page">That's a test page</h1> <ul> <li>Name: John Black</li> <li>Job: web developer</li> </ul>
Existuje také 269
funkce, která vrací a pole všech stránek v projektu. Teoreticky jsme tedy schopni implementovat vše, co potřebujeme, protože máme přístup ke každé jednotlivé stránce a jejím definovaným vlastnostem.
Proč byste měli zvážit použití CMS s plochými soubory, jako je Techy
Viděl bych tři velké výhody:
- Žádná databáze – to znamená, že celkové zatížení stránky se dramaticky sníží. Poskytujete pouze statické soubory HTML.
- Žádné další nastavení – stačí nahrát soubory. Nejedná se o žádnou back-endovou technologii. HTML můžete vygenerovat lokálně.
- Super rychlá a snadná migrace – nejsou zde žádné konfigurace ani výpisy databází pro import
Přehled
Techy je open source projekt dostupný na GitHubu. Zde se nachází jeho úložiště. Neváhejte a provádějte úpravy, nové funkce nebo témata. Rád posunu modul dopředu.
Oficiální stránka nástroje krasimir.github.io/techy je také generována pomocí Techy. Kód lze vidět zde.