Ako vytvoriť statický blog pomocou kaktusu [OS X]

aktualizovať: Aplikácia Cactus bola prerušená.

Ak nepotrebujete CMS a radšej stačí statické stránky alebo blogy, potom je Jekyll dobrým nástrojom na to, aby si mohol dať šancu. Ak však uprednostňujete nástroj s grafickým používateľským rozhraním, skôr než pracujete s nástrojmi príkazového riadka, možno by ste sa chceli pozrieť kaktus.

Kaktus je zadarmo generátor statických stránok vybavené výkonnými nástrojmi, ktoré vám môžu pomôcť budujte miestne lokality, rýchlejšie a jednoduchšie pomocou moderných webových technológií. To vám dáva východiskový bod vo vašom projekte so štyrmi predpripravenými šablónami, aby ste mohli naraziť na zem.

Pri práci na vašom projekte bude Cactus sledovať každú zmenu, ktorú vykonáte vo svojom projekte a automaticky obnoviť prehliadač takže zmeny môžete okamžite vidieť na počítači Mac alebo mobilnom zariadení. Podporuje tiež SASS / SCSS a Coffescript, takže každá zmena v tomto súbore sa automaticky generuje.

Začať

Najprv musíte stiahnuť Cactus z jeho domovskej stránky a spustiť inštaláciu. Po dokončení ho otvorte, uvidíte štyri tlačidlá: tlačidlo Vytvoriť, nasadiť, upraviť a ukázať.

Ak chcete vytvoriť nový projekt, kliknite na vytvoriť. Uvidíte tu štyri šablóny. Pre tento tutoriál ideme so šablónou Blog. kliknite vytvoriť.

Budete vyzvaní, aby ste uviedli názov vášho projektu a zvolili miesto, kde projekt existuje. Tu dám meno “Môj úžasný blog” pre projekt. Potom uvidíte projekt už v kaktusu.

Úprava súborov

Vytvorený projekt pomocou šablóny blogu teraz existuje vo vašom Finder. Teraz skontrolujeme prvky potrebné na vytvorenie nášho blogu. Prejdite do adresára, kde sa nachádzajú vaše súbory. Hlavné adresáre, ktoré budeme používať, sú šablóny, stránky, a statický adresár. Prejdime ostatné zatiaľ.

Ak chcete, aby boli veci stručné, postupujte takto:

• šablóny: Obsahuje súbory HTML, ktoré sa chovajú ako šablóny a ktoré používajú súbory HTML na stránkach, na ktorých sa má stavať.
• stránky: Obsahuje všetky súbory HTML, ktoré sa stanú stránkou s rovnakou cestou. napr .: hello.html sa tu stane http://yoursite.com/hello.html
• statický: Obsahuje všetky statické zdroje ako CSS, Javascript a obrázky.

Teraz budeme upravovať tri hlavné súbory z adresárov: base.html a post.html v adresári Šablóny a index.html v adresári Stránky.

Kaktus využíva Django Template Engine pre templikujúci jazyk. Týmto môžete zahrnúť prvky HTML z iných súborov HTML, takže nemusíte duplikovať kódy. Funkcie, ktoré sa tu najviac používajú, sú dedičstvo šablón a premenlivý.

Ak chcete vidieť, ako fungujú, najprv ich otvorte base.html v adresári šablón.

             % obsah bloku% Hlavný obsah % endblock content% ---   

base.html je jednoduchý html súbor, ktorý používame ako šablónu "skeletu". Obsahuje spoločné prvky našich stránok. Môžete vidieť niektoré “bloky” tam; použijeme detskú šablónu na prekonanie týchto blokov.

Teraz otvorte post.html ktorý sa nachádza v rovnakom adresári base.html.

 % rozširuje "base.html"% % blokový názov% title | Cactus % endblock title% % obsah bloku% --- 
 
title
 
nadpis 
 
 
 % block body% Tu je obsah príspevku. % endblock body% 
 --- % content endblock% 

post.html obsahuje značku pre našu vstupnú stránku blogu. Na prvom riadku to vidíte post.html rozširuje base.html. To znamená, že budeme bloky prepisovať base.html s blokmi tu.

Môžeme tu tiež nájsť premenné, ako napr title a nadpis. Hodnoty týchto premenných definujeme v príspevku blogu neskôr.

Teraz sa pozrite na % body bloku% blok. Toto bude prepisované podradenou šablónou, ktorá obsahuje príspevky príspevku nášho blogu.

Prejdite do adresára Stránky / príspevky. Tu sú ostatné príspevky.

 názov: Môj príspevok Príspevky nadpis: Môj príspevok Titulok autor: Agus dátum: 15-01-2015 % extends "post.html"% % blok body% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipisicing elít. Zistite, že inventorizovaný zásobník nie je dočasne vyčerpávajúci, a preto nemusíte mať za následok, že existujú maximálne hodnoty. --- % endfilter% % body koncového bodu% 

V položkách príspevkov dávame hodnotu premennej, ako je názov, nadpis, autor a dátum. Táto hodnota prejde, keď zavoláme názov premennej na nadradenú šablónu. Potom napíšeme obsah nášho blogu s Markdownom.

Teraz ideme na indexovú stránku nášho blogu index.html v stránky adresár. Obsahuje zoznam našich záznamov v blogu a odkaz na jednotlivé záznamy. Hlavný kód vyzerá takto:

 % rozširuje "base.html"% % obsah bloku% -- 
 % pre príspevok v príspevkoch% 
  post.title 
post.headline 
 % endfor% 
 -- % content endblock% 

V tomto momente máme jednoduchý blog s dvoma hlavnými stránkami index stránky ktorý obsahuje položky blogu a blogu sám.

Prejdite do okna Cactus a kliknutím na tlačidlo ukážky spustite server. Automaticky otvorí prehliadač a otvorí vaše webové stránky.

Styling Blog pomocou SCSS

Skvelou vlastnosťou kaktusu je to, že pracuje so SASS / SCSS z krabice. proste drop your .sass alebo .scss súborov do statický a kedykoľvek budete upravovať a ukladať súbory, Cactus automaticky vygeneruje CSS.

Tu budem uviesť príklad používajúci bootstrap-sass na štýl nášho blogu. Za predpokladu, že používate batériu, otvorte terminál a prejdite na statický adresára nášho projektu pomocou CD Príkaz. Potom nainštalujte bootstrap-sass pomocou tohto príkazu:

$ bower nainštalovať bootstrap-sass-official

Po dokončení sťahovania uvidíte súbor a bower_components adresár vo vnútri statického adresára obsahujúceho bootstrap-Sass-oficiálny.

Teraz prejdite do tohto adresára: statický / CSS. Vytvorte súbor scss, zadajte jeho meno syle-bs.scss a vložte tento kód.

 @import "... / bower_components / bootstrap-sass-official / akcie / štýly / _bootstrap"; 

Čo urobí kód, je importovať všetko od bootstrap-sass. Po uložení štýlu-bs.scss uvidíte štýl-bs.css vygenerovaný v tom istom adresári, ktorý obsahuje všetky štýly z bootstrapu.

Nasadenie projektu

Nakoniec, keď je váš projekt pripravený, môžete jednoducho nasadiť svoj projekt na živú verziu pomocou Amazonu S3.