Kuidas luua staatilist blogi, kasutades kaktust [OS X]

Uuenda: Kaktuse rakendus on katkestatud.

Kui te ei vaja CMS-i ja eelistaksite lihtsalt staatilise saidi või blogi saada, siis on Jekyll hea vahend, et võtta endale võimalus. Kui aga eelistate tööriista GUI-ga, selle asemel, et töötada käsurea tööriistadega, siis võiksite seda kontrollida Kaktus.

Kaktus on tasuta staatiline saidigeneraator varustatud võimsate tööriistadega, mis võivad teid aidata luua veebisaite kohapeal, kiirem ja lihtsam tänapäevaste veebitehnoloogiatega. See annab teile oma projekti alguspunkti 4 eelnevalt koostatud malli abil, et saaksite maapinda käivitada.

Oma projekti kallal töötab Cactus jälgige iga oma projektis tehtud muudatust ja värskendab brauserit automaatselt nii näete muudatusi kohe oma Mac'is või mobiilseadmes. See toetab ka SASS / SCSS-i ja Coffescript-i karbist välja, seega genereeritakse automaatselt ka kõik selle faili muudatused.

Alustama

Kõigepealt peate laadima Cactuse oma kodulehelt, seejärel käivitama installi. Kui see on valmis, avage see, kuvatakse neli nuppu: Loo, Rakenda, Muuda ja Eelvaade.

Uue projekti loomiseks klõpsake nuppu Loo. Seal on saadaval 4 malli. Selle juhendi jaoks läheme koos Blogi malliga. Klõpsake nuppu Loo.

Teil palutakse anda oma projekti nimi ja valida projekti asukoht. Siin ma annan nime “Minu vinge blogi” projekti jaoks. Pärast seda näete oma projekti juba Kaktuses.

Failide muutmine

Looge loodud projekt, mis kasutab Blogi malli, on nüüd teie otsingul olemas. Nüüd vaatame üle meie blogi loomiseks vajalikud elemendid. Suunduge kataloogi, kus faile hoitakse. Peamised kataloogid, mida me kasutame, on Mallid, Leheküljed, ja Staatiline kataloog. Jäta teised nüüd vahele.

Asjade lühikesteks hoidmiseks on siin iga kataloogi jaoks:

• Mallid: Sisaldab HTML-faile, mis käituvad mallina ja mida HTML-failid lehekülgedel kasutavad.
• Leheküljed: Sisaldab kõiki HTML-faile, millest saab sama teega leht. Näiteks: hello.html siin saab http://yoursite.com/hello.html
• Staatiline: Sisaldab kõiki staatilisi ressursse nagu CSS, Javascript ja pildid.

Nüüd muudame kataloogidest kolme peamist faili: base.html ja post.html kaustas Mallid ja index.html lehekülgede kataloogis.

Cactus kasutab Django malli mootor mallimise keele jaoks. Sellega saate lisada HTML-elemente teistest HTML-failidest, nii et sa ei pea koodid korduma. Siin kasutatavad funktsioonid on järgmised malli pärimine ja muutuja.

Et näha, kuidas nad töötavad, avage esmalt base.html Mallide kataloogis.

             % block content% Põhisisu % endblock content% ---   

base.html on lihtne html-fail, mida me kasutame skeleti mallina. See sisaldab meie saidi ühiseid elemente. Näete mõningaid “plokid” seal; kasutame nende plokkide tühistamiseks lapse malli.

Nüüd avage post.html asub samas kataloogis base.html.

 % laiendab "base.html"% % block title% title | Kaktus % endblock title% % block content% --- 
 
title
 
headline 
 
 
 % block body% See on koht, kus postituse sisu on. % endblock body% 
 --- % endblock content% 

The post.html sisaldab meie blogi sisestamise lehe märgistust. Esimesel real näete seda post.html laiendab base.html. See tähendab, et tühistame plokid base.html plokkidega siin.

Siin võib leida ka muutujaid, näiteks title ja headline. Me määratleme nende muutujate väärtused blogikirjete postituses hiljem.

Nüüd vaatame % blokeerida keha% blokeeri. Seda ignoreerib lapse mall, mis sisaldab meie blogi postitusi.

Mine kataloogi leheküljed / postitused. Siin on ülejäänud meie postitusi.

 pealkiri: Minu postituste pealkiri: Minu postituse pealkirja autor: Agus kuupäev: 15-01-2015 % laieneb "post.html"% % bloki keha% % filter markdown%. elit. Earum, perferendis inventore dolorem rerum ja tempora sint nemo illum ab saepe, assumenda, amet illo deleniti officiis, max. --- % endfilter% % endblock body% 

Postitussõnumites anname muutujale väärtuse, nagu pealkiri, pealkiri, autor ja kuupäev. See väärtus läheb üle, kui me nimetame muutuja nime vanemmallil. Seejärel kirjutame me oma blogi sisu Markdowniga.

Nüüd läheme meie blogi avalehele, avatud index.html Euroopa lehekülgi kataloog. See sisaldab meie blogi kirjete loendit ja linki iga kirje kohta. Põhikood näeb välja alljärgnevalt:

 % laiendab "base.html"% % block content% -- 
 % postitustes postituses% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

Sel hetkel on meil lihtne blogi, millel on kaks peamist lehekülge indeksi leht mis sisaldab blogi kirjeid ja blogi sisestamise leht ise.

Minge Cactuse aknasse ja klõpsake serveri käivitamiseks nuppu Preview (Eelvaade). See avab brauseri automaatselt ja avab teie veebisaidi.

Blogi kujundamine SCSS-i abil

Cactuse suur tunnusjoon on see, et see töötab koos SASS / SCSS-ga karbist välja. Lihtsalt langetage oma .sass või .scss failid sisse staatiline kataloog ja iga kord, kui faile redigeerite ja salvestate, genereerib Cactus automaatselt CSS-i.

Siinkohal annan näite, kuidas oma blogi kujundamiseks kasutada bootstrap-sass'i. Eeldades, et kasutate boweri, avatud terminali ja navigate staatiline meie projekti kataloog cd käsk. Seejärel installige käsku bootstrap-sass:

$ bower installige bootstrap-sass-ametnik

Kui allalaadimine on lõppenud, näete a bower_components staatilise kataloogi sees olev kataloog bootstrap-sass-ametnik.

Nüüd minge selle kataloogi juurde: staatiline / css. Looge scss fail, andke sellele nimi syle-bs.scss ja sisestage see kood.

 @import "… / bower_components / bootstrap-sass-ametnik / varad / stylesheets / _bootstrap"; 

Mis kood on, see impordib kõike bootstrap-sassist. Kui olete stiili-bs.scss salvestanud, näete stiili-bs.css, mis on genereeritud samas kataloogis, mis sisaldab kõiki bootstrapi stiile.

Kasutage oma projekti

Lõpuks, kui teie projekt on valmis, saate hõlpsasti oma projekti elavale versioonile juurutada kasutades Amazon S3.