Kako stvoriti Statički Blog Kaktus pomoću [OS X]

ažuriranje: Aplikacija Cactus ukinuta je.

Ako ne trebate CMS i preferirate samo dobivanje statičkih stranica ili bloga, onda je Jekyll dobar alat s kojim možete riskirati. Međutim, ako vam je draži alat s grafičkim korisničkim sučeljem, a ne radite s alatima naredbenog retka, možda ćete htjeti provjeriti Kaktus.

Kaktus je besplatan statički generator web-mjesta opremljeni snažnim alatima koji vam mogu pomoći graditi web-lokacije lokalno, brže i lakše pomoću modernih web-tehnologija. To vam daje početnu točku u vašem projektu s 4 unaprijed dizajnirana predloška tako da možete pogoditi zemlju trčanje.

Dok radite na vašem projektu, Cactus će pratite svaku promjenu koju napravite na svom projektu i automatski osvježiti preglednik tako da možete odmah vidjeti promjene na vašem Macu ili mobilnom uređaju. Također podržava SASS / SCSS i Coffescript iz kutije, tako da se svaka promjena na ovoj datoteci također automatski generira.

Započnite

Prije svega, morate preuzeti Cactus s njegove početne stranice, a zatim pokrenuti instalaciju. Nakon dovršetka, otvorite ga, vidjet ćete četiri gumba: gumb Stvori, implementiraj, uredi i pregledaj.

Za izradu novog projekta kliknite Stvoriti. Tamo ćete vidjeti 4 predloška. U ovom vodiču idemo s predložkom bloga. Klik Stvoriti.

Od vas će se tražiti da navedete naziv projekta i odaberete mjesto na kojem projekt postoji. Ovdje dajem ime “Moj divan blog” za projekt. Nakon toga, vidjet ćete svoj projekt već u Cactusu.

Izmjena datoteka

Generirani projekt pomoću predloška bloga sada postoji na vašem Finderu. Sada ćemo pregledati elemente potrebne za izradu našeg bloga. Krenite prema direktoriju u kojem se čuvaju vaše datoteke. Glavni imenici koje ćemo koristiti su Predlošci, stranice, i Statički imenik. Za sada ćemo preskočiti ostale.

Evo što je za svaki direktorij kratkoročno:

• Predlošci: Sadrži HTML datoteke koje se ponašaju kao predložak, a koriste ga HTML datoteke na stranicama za izgradnju.
• stranice: Sadrži sve HTML datoteke koje će postati stranica s istim putem. npr .: hello.html ovdje će postati http://yoursite.com/hello.html
• Statički: Sadrži sve statičke resurse kao što su CSS, Javascript i slike.

Sada ćemo urediti tri glavne datoteke iz direktorija: base.html i post.html u imeniku Predlošci i index.html u imeniku Stranice.

Kaktus koristi Django Template Engine za jezik templata. Uz to možete uključiti HTML elemente iz drugih HTML datoteka, tako da ne morate duplicirati kodove. Značajke koje se ovdje najčešće koriste nasljeđivanje predloška i varijabla.

Da biste vidjeli kako rade, najprije otvorite base.html u imeniku predložaka.

             % blok sadržaja% Glavni sadržaj % endblock content% ---   

base.html je jednostavna html datoteka koju koristimo kao 'skeletni' predložak. Sadrži zajedničke elemente naše stranice. Možete vidjeti neke “blokovi” unutra; koristit ćemo predložak djeteta za nadjačavanje tih blokova.

Sada otvorite post.html nalazi se u istom direktoriju s base.html.

 % proširuje "base.html"% % naslova bloka% title | Kaktus % endblock title% % blok sadržaja% --- 
 
title
 
headline 
 
 
 % block body% Ovdje je sadržaj posta. % endblock body% 
 --- % endblock content% 

post.html sadrži oznaku za našu stranicu za unos bloga. U prvom retku možete to vidjeti post.html proteže se base.html. To znači da ćemo nadjačati blokove na base.html s blokovima ovdje.

Ovdje također možemo naći varijable, kao što su title i headline. Vrijednosti tih varijabli definirat ćemo kasnije u postovima bloga.

Sada, pogledajmo % blok tijela% blok. To će poništiti predložak djeteta koji sadrži stavke posta na našem blogu.

Idite u imenik stranica / postova. Evo i ostalih postova.

 title: Moja pošta Naslov naslova: Moj post Naslov: Agus datum: 15-01-2015 % proteže "post.html"% % bloka tijela% % filter markdown% Lorem ipsum dolor sit amet Elit. Earum, perferendis inventore dolarem rerum i tempora sint nemo illum ab saepe, pretpostavke, amet illo deleniti officiis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock tijelo% 

U unosima postova dajemo vrijednost varijabli, kao što su naslov, naslov, autor i datum. Ova vrijednost će proći kada nazovemo ime varijable na nadređenom predlošku. Zatim pišemo sadržaj našeg bloga uz Markdown.

Sada ćemo otvoriti indeksnu stranicu našeg bloga index.html u stranica imenik. Sadrži popis naših unosa u blog i poveznicu na svaki unos. Glavni kôd izgleda kao u nastavku:

 % proširuje "base.html"% % sadržaja sadržaja% -- 
 % za post u postovima% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

U ovom trenutku imamo jednostavan blog s dvije glavne stranice indeksna stranica koji sadrži unose bloga i stranicu unosa na blog sebe.

Idite na prozor Cactus i kliknite gumb za pregled kako biste pokrenuli poslužitelj. Automatski će otvoriti preglednik i otvoriti web-lokaciju.

Styling Blog koristeći SCSS

Velika značajka Cactusa je da radi sa SASS / SCSS iz kutije. Samo spustite .sass ili .scss datoteke u statički i svaki put kada uređujete i spremate datoteke, Cactus će automatski generirati CSS.

Ovdje ću dati primjer koristeći bootstrap-sass za styling našeg bloga. Pod pretpostavkom da koristite bower, otvorite terminal i idite do statički katalog našeg projekta pomoću CD naredba. Zatim instalirajte bootstrap-sass pomoću ove naredbe:

$ bower instalirati bootstrap-sass-službeni

Nakon dovršetka preuzimanja vidjet ćete bower_components direktorija unutar statičnog direktorija koji sadrži bootstrap-Sass-službena.

Sada idite na ovaj direktorij: statički / css. Napravite scss datoteku, dajte joj ime syle-bs.scss i umetnite ovaj kôd.

 @import "... / bower_components / bootstrap-sass-službeni / sredstva / stilovi / _bootstrap"; 

Ono što kod radi je da uvozi sve iz bootstrap-sass. Nakon što spremite stil-bs.scss, vidjet ćete stil-bs.css generiran u istom direktoriju koji sadrži sve stilove iz bootstrap-a.

Implementirajte svoj projekt

Konačno, kada je vaš projekt spreman, možete lako implementirati projekt u verziju uživo koristeći Amazon S3.