Podívej, mami, žádný CMS!

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šechny 16 soubory do 22 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 a 48 markery. K dispozici jsou některé předdefinované metody a proměnné. Jedním z nich je 51 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.