Hogyan lehet létrehozni egy statikus blogot a kaktusz használatával [OS X]

frissítés: A kaktusz alkalmazás megszűnt.

Ha nem igényel CMS-t, és inkább csak statikus webhelyet vagy blogot szeretne kapni, akkor Jekyll jó eszköz arra, hogy esélyt kapjon. Ha azonban inkább egy grafikus felületű eszközt szeretne, hanem a parancssori eszközökkel dolgozni, akkor érdemes megnézni Kaktusz.

A kaktusz ingyenes statikus helygenerátor erőteljes eszközökkel van felszerelve, amelyek segíthetnek webhelyeket helyi szinten építeni, gyorsabb és könnyebb a modern webes technológiákkal. Ez egy kiindulási pontot nyújt a projektben 4 előre tervezett sablon segítségével, így elérheti a földet.

Cactus a projektje során dolgozik figyelemmel kíséri a projekten végzett minden változást és automatikusan frissíti a böngészőt így azonnal láthatja a változtatásokat a Mac vagy mobil eszközön. Támogatja a SASS / SCSS és a Coffescript-et is a dobozból, így a fájl minden változása is automatikusan létrejön.

Fogj neki

Először is le kell töltenie a Cactust a honlapjáról, majd futtatnia kell a telepítést. Ha elkészült, nyissa meg, négy gombot fog látni: Create, Deploy, Edit és Preview gomb.

Új projekt létrehozásához kattintson a gombra teremt. Itt 4 sablon lesz elérhető. A bemutatóhoz a Blog sablont fogjuk használni. Kattints teremt.

Felkérik, hogy adja meg a projekt nevét, és válassza ki azt a helyet, ahol a projekt létezik. Itt nevet adok “My Awesome Blog” a projekthez. Ezt követően már láthatod a projektedet Kaktuszban.

Fájlok módosítása

A Blog sablon használatával létrehozott projekt már létezik a Finderben. Most megvizsgáljuk a Blog létrehozásához szükséges elemeket. Menjen át a könyvtárba, ahol a fájlokat tárolja. A főbb könyvtárak, amelyeket használni fogunk sablonok, Oldalak, és Statikus Könyvtár. Most hagyjuk ki a többit.

A dolgok rövid megtartása érdekében itt van az, hogy az egyes könyvtárak a következőkre vonatkoznak:

• sablonok: HTML-fájlokat tartalmaz, amelyek sablonként viselkednek, és HTML-fájlokat használnak az oldalakon.
• Oldalak: Az összes olyan HTML-fájlt tartalmazza, amelyek ugyanarra az útvonalra válnak. pl .: hello.html itt lesz http://yoursite.com/hello.html
• Statikus: Az összes olyan statikus erőforrást tartalmazza, mint a CSS, a Javascript és a képek.

Most három fő fájlt szerkesztünk a könyvtárakból: base.html és post.html a Sablonok könyvtárban és index.html az Oldalak könyvtárban.

Cactus használ Django Template Engine a sablon nyelvre. Ezzel HTML-elemeket is tartalmazhat más HTML-fájlokból, így nem kell kódokat másolni. A leginkább itt használt funkciók sablon öröksége és változó.

Ha meg szeretné tekinteni, hogyan működnek, nyissuk meg először a base.html a Sablon könyvtárban.

             % block content% Fő tartalom % endblock content% ---   

base.html az egyszerű html fájl, amelyet "csontváz" sablonként használunk. A webhelyünk közös elemeit tartalmazza. Láthatsz néhányat “blokkok” ott; ezeket a blokkokat felülírjuk a gyermek sablonnal.

Most nyissa meg a post.html ugyanabban a könyvtárban található base.html.

 % kiterjeszti a "base.html"% % blokk cím% title | Cactus % endblock title% % block content% --- 
 
title
 
headline 
 
 
 % block body% Ez az a hely, ahol a bejegyzés tartalma van. % végblokk test% 
 --- % endblock content% 

A post.html tartalmazza a blogbejegyzési oldalunk jelölését. Az első sorban ezt láthatjuk post.html kiterjeszti a base.html. Ez azt jelenti, hogy felülírjuk a blokkokat base.html a blokkokkal itt.

Itt is találhatunk változókat, például: title és headline. A változók értékeit a blogbejegyzésekben később definiáljuk.

Most nézd meg a % blokk test% Blokk. Ezt felülírja a blogsablon bejegyzéseit tartalmazó gyermeksablon.

Menjen a könyvtárba oldalak / üzenete. Íme a hozzászólás többi része.

 title: My Post Entries főcím: My Post Headline szerző: Agus dátuma: 15-01-2015 % kiterjeszti a "post.html"% % blokk test% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perferendis inventore dolorem rerum és tempora sint nemo illum ab saepe, assumenda, amet illo deleniti officiis, max. --- % endfilter% % endblock body% 

A bejegyzésekben értéket adunk a változónak, mint például a cím, a főcím, a szerző és a dátum. Ez az érték akkor megy át, amikor a szülő sablonon a változó nevét hívjuk. Ezután írjuk blogunk tartalmát a Markdown segítségével.

Most a blogunk indexlapjára fogunk menni, nyitva index.html ban,-ben oldalak Könyvtár. Tartalmazza a blogbejegyzések listáját és az egyes bejegyzésekre mutató hivatkozást. A fő kód az alábbiak szerint néz ki:

 % kiterjesztése "base.html"% % block content% -- 
 % a bejegyzéshez a (z)% bejegyzésben 
   postai cím  
post.headline 
 % endfor% 
 -- % endblock content% 

Ezen a ponton van egy egyszerű blogunk, melynek két fő oldala van indexoldal amely tartalmazza a blogbejegyzéseket, és a blogbeviteli oldal maga.

Lépjen a Cactus ablakba, és kattintson az előnézeti gombra a kiszolgáló elindításához. Ez automatikusan megnyitja a böngészőt, és megnyitja webhelyét.

A blog formázása SCSS segítségével

A Cactus nagyszerű tulajdonsága, hogy a SASS / SCSS-nél működik a dobozból. Éppen törölje .sass vagy .scss fájljait ba,-be statikus és a fájlok szerkesztésekor és mentésekor a Cactus automatikusan generálja a CSS-t.

Itt egy példát adok a bootstrap-sass használatával blogunk kialakításához. Feltételezve, hogy sárkányt használ, nyissa meg a terminált, és navigáljon a statikus projektünk könyvtárát használjuk CD parancs. Ezután telepítse a bootstrap-sass-ot a parancs segítségével:

$ bower install bootstrap-sass-hivatalos

A letöltés befejezése után megjelenik a bower_components a statikus könyvtárban található könyvtár bootstrap-Sass-hatósági.

Most menj a könyvtárba: statikus / css. Hozza létre az scss fájlt, adja meg a nevet syle-bs.scss és helyezze be ezt a kódot.

 @import "… / bower_components / bootstrap-sass-hivatalos / eszközök / stíluslapok / _bootstrap"; 

Amit a kód teszi, az mindent a bootstrap-sass-ból importál. A stílus-bs.scss mentése után a stílus-bs.css ugyanabban a könyvtárban fog megjelenni, amely a bootstrap összes stílusát tartalmazza.

Telepítse a projektet

Végül, ha a projekt készen áll, a projektet könnyedén telepítheti az élő verzióra az Amazon S3 használatával.