Jak vytvořit statický blog pomocí kaktusu [OS X]

Aktualizace: Aplikace Cactus byla přerušena.

Pokud nepotřebujete CMS a dáváte přednost jen dostat statické stránky nebo blog, pak Jekyll je dobrý nástroj, aby se šanci s. Pokud však dáváte přednost nástroji s grafickým uživatelským rozhraním, místo práce s nástroji příkazového řádku, můžete se zkusit podívat Kaktus.

Kaktus je volný generátor statických stránek vybavené výkonnými nástroji, které vám mohou pomoci lokálně vytvářet webové stránky, rychlejší a jednodušší s moderními webovými technologiemi. To vám dává výchozí bod ve vašem projektu se 4 předdefinovanými šablonami, takže můžete narazit na zem.

Při práci na projektu bude kaktus sledovat všechny změny, které provedete ve svém projektu a automaticky obnoví prohlížeč takže můžete okamžitě vidět změny na svém počítači Mac nebo mobilním zařízení. Podporuje také SASS / SCSS a Coffescript z krabice, takže každá změna tohoto souboru je také automaticky generována.

Začít

Nejdříve je třeba stáhnout Kaktus z jeho domovské stránky a pak spustit instalaci. Po dokončení otevřete, uvidíte čtyři tlačítka: Vytvořit, Nasadit, Upravit a Náhled.

Chcete-li vytvořit nový projekt, klepněte na tlačítko Ano Vytvořit. Zobrazí se 4 šablony. Pro tento tutoriál jdeme s šablonou Blog. Klikněte na Vytvořit.

Budete vyzváni k zadání názvu projektu a výběru místa, kde projekt existuje. Tady jsem dal jméno “Můj úžasný blog” projektu. Poté uvidíte svůj projekt již v Kaktusu.

Úprava souborů

Vytvořený projekt pomocí šablony blogu nyní existuje ve vašem Finderu. Nyní zkontrolujeme prvky potřebné pro sestavení našeho blogu. Přejděte do adresáře, kde jsou uloženy vaše soubory. Hlavní adresáře, které budeme používat, jsou Šablony, Stránky, a Statický adresář. Vynechejme ty ostatní.

Chcete-li si udržet stručnost, uveďte, co je pro každý adresář:

• Šablony: Obsahuje soubory HTML, které se chovají jako šablona, ​​která se používá na HTML souborech na stránkách.
• Stránky: Obsahuje všechny soubory HTML, které se stanou stránkou se stejnou cestou. např .: hello.html zde se stane http://yoursite.com/hello.html
• StatickýObsahuje všechny statické prostředky jako CSS, Javascript a obrázky.

Nyní upravíme tři hlavní soubory z adresářů: base.html a post.html v adresáři Šablony a index.html v adresáři Stránky.

Kaktus používá Django Template Engine pro jazyk šablon. S tímto můžete zahrnout HTML elementy z jiných HTML souborů, takže nemusíte duplikovat kódy. Nejpoužívanější jsou zde funkce dědictví šablony a proměnná.

Chcete-li zjistit, jak fungují, otevřete nejprve base.html v adresáři šablon.

             % block content% Hlavní obsah % endblock content% ---   

base.html je jednoduchý soubor html, který používáme jako šablonu 'kostra'. Obsahuje společné prvky našich stránek. Můžete vidět některé “bloků” tam; použijeme šablonu dítěte k přepsání těchto bloků.

Nyní otevřete post.html ve stejném adresáři base.html.

 % extend "base.html"% % block title% title Kaktus % endblock title% % block content% --- 
 
title
 
titulek 
 
 
 % block body% Toto je místo, kde je obsah příspěvku. % endblock body% 
 --- % endblock content% 

post.html obsahuje označení pro naši vstupní stránku blogu. Na první řádce to vidíte post.html rozšiřuje base.html. To znamená, že tyto bloky zapíšeme base.html s bloky zde.

Můžeme zde také najít proměnné, jako např title a titulek. Hodnoty těchto proměnných v položkách blogu definujeme později.

Podívejme se nyní % block body% blok. To bude přepsáno podřízenou šablonou, která obsahuje položky příspěvku z našeho blogu.

Přejděte do adresáře stránky / příspěvky. Zde je zbytek našich příspěvků.

 název: My Post Příspěvky titulek: My Post Hlavní autor: Agus datum: 15-01-2015 % extend “post.html"% % block body% % mark markdown% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perferendis invore dolorem rerum et tempora sint illum a saepe, předpoklad, amet ilen deleniti officiis, voluptatemem maxime atque vero sunt. --- % endfilter% % endblock body% 

V položkách příspěvku dáváme proměnné hodnotu, jako je název, nadpis, autor a datum. Tato hodnota bude předána, když zavoláme název proměnné na nadřazenou šablonu. Pak napíšeme obsah našeho blogu s Markdownem.

Nyní přejdeme na stránku indexu našeho blogu, otevřenou index.html v stránek adresář. Obsahuje seznam našich položek blogu a odkaz na každou položku. Hlavní kód vypadá takto:

 % rozšiřuje "base.html"% % block content% -- 
 % pro příspěvek v příspěvcích% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

V tomto okamžiku máme jednoduchý blog se dvěma hlavními stránkami indexová stránka obsahující položky blogu a stránka blogu sám.

Přejděte do okna Kaktus a kliknutím na tlačítko Náhled spusťte server. Automaticky otevře prohlížeč a otevře vaše webové stránky.

Styling Blog pomocí SCSS

Velkou vlastností Cactus je, že pracuje s SASS / SCSS z krabice. Prostě přetáhněte soubory .sass nebo .scss do statický Pokaždé, když upravíte a uložíte soubory, Cactus automaticky vygeneruje CSS.

Zde uvedu příklad použití bootstrap-sassu pro styling našeho blogu. Za předpokladu, že používáte bower, otevřete terminál a přejděte na statický použití našeho projektu CD příkaz. Pak pomocí tohoto příkazu nainstalujte bootstrap-sass:

$ bower nainstalovat bootstrap-sass-úředník

Jakmile je stahování dokončeno, uvidíte a bower_components adresář uvnitř statického adresáře obsahujícího oficiální úředník.

Nyní přejděte do tohoto adresáře: statický / css. Vytvořte soubor scss, zadejte název syle-bs.scss a vložte tento kód.

 @import "… / bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap"; 

Co kód dělá, je import všeho z bootstrap-sass. Jakmile uložíte styl-bs.scss, uvidíte styl-bs.css vygenerovaný ve stejném adresáři, který obsahuje všechny styly z bootstrapu.

Nasazení projektu

Nakonec, když je váš projekt připraven, můžete svůj projekt nasadit do živé verze snadno pomocí Amazon S3.