Kako ustvariti statični blog z uporabo kaktusov [OS X]

Nadgradnja: Aplikacija Cactus je bila prekinjena.

Če ne potrebujete CMS in bi raje dobili samo statično spletno mesto ali blog, potem je Jekyll dobro orodje, s katerim lahko izkoristite priložnost. Če pa imate raje orodje z grafičnim uporabniškim vmesnikom, namesto da bi delali z orodji ukazne vrstice, boste morda želeli preveriti Kaktus.

Kaktus je brezplačen statični generator mesta opremljena z zmogljivimi orodji, ki vam lahko pomagajo graditi spletne strani lokalno, s sodobnimi spletnimi tehnologijami. To vam daje začetno točko v vašem projektu s 4 predhodno oblikovane predloge, tako da lahko zadeti tla teče.

Med delom na vašem projektu bo Cactus spremljajte vsako spremembo, ki jo naredite na svojem projektu in samodejno osveži brskalnik tako boste lahko takoj videli spremembe na vašem Macu ali mobilni napravi. Podpira tudi SASS / SCSS in Coffescript iz škatle, zato se tudi vsaka sprememba v tej datoteki samodejno generira.

Začeti

Najprej morate prenesti Cactus z njegove domače strani in nato zagnati namestitev. Ko končate, ga odprite in videli boste štiri gumbe: gumb za ustvarjanje, uvajanje, urejanje in predogled.

Če želite ustvariti nov projekt, kliknite Ustvari. Tam boste videli 4 predloge. V tej vadnici gremo s predlogo za Blog. Kliknite Ustvari.

Prosili vas boste, da navedete ime vašega projekta in izberete lokacijo, kjer projekt obstaja. Tukaj dajem ime “Moj Awesome Blog” za projekt. Po tem boste svoj projekt videli že v Kaktusu.

Spreminjanje datotek

Ustvarjeni projekt s predlogo za Blog zdaj obstaja v vašem iskalniku. Zdaj bomo pregledali elemente, potrebne za izgradnjo našega spletnega dnevnika. Nadaljujte v imenik, kjer se shranjujejo vaše datoteke. Glavni imeniki, ki jih bomo uporabili, so Predloge, Strani, in Statično imenik. Preskočimo ostale za zdaj.

Za kratek opis je za vsako mapo na voljo:

• Predloge: Vsebuje datoteke HTML, ki se obnašajo kot predlogo, ki jo uporabljajo datoteke HTML na straneh za gradnjo.
• Strani: Vsebuje vse datoteke HTML, ki bodo postale stran z isto potjo. npr .: hello.html tukaj bo postal http://yoursite.com/hello.html
• Statično: Vsebuje vse statične vire, kot so CSS, Javascript in slike.

Zdaj bomo uredili tri glavne datoteke iz imenikov: base.html in post.html v imeniku Predloge in index.html v imeniku strani.

Kaktus uporablja Django Template Engine za jezikovni jezik. S tem lahko vključite elemente HTML iz drugih datotek HTML, tako da vam ni treba podvajati kod. Značilnosti, ki se tukaj najbolj uporabljajo predlogo dedovanja in spremenljivko.

Če želite videti, kako delujejo, najprej odprite base.html v imeniku predlog.

             % blok vsebine% Glavna vsebina % endblock content% ---   

base.html je preprosta html datoteka, ki jo uporabljamo kot "skeletno" predlogo. Vsebuje skupne elemente naše spletne strani. Vidiš nekaj “blokov” tam; za prepoved teh blokov bomo uporabili podrejeno predlogo.

Odprite post.html v istem imeniku z base.html.

 % razširja "base.html"% % naslova bloka% title | Kaktus % endblock title% % blok vsebine% --- 
 
title
 
headline 
 
 
 % block body% Tu je vsebina objave. % endblock body% 
 --- % endblock content%) 

The post.html vsebuje oznako za našo stran vnosa v blog. Na prvi vrstici lahko to vidite post.html razširja base.html. To pomeni, da bomo preglasili bloke naprej base.html s bloki tukaj.

Tu lahko najdemo tudi spremenljivke, kot npr title in headline. Vrednosti teh spremenljivk bomo definirali v vnosih v dnevnik, ki bodo objavljeni pozneje.

Zdaj pa poglejmo % blok telo% blok. To bo preglasila podrejena predloga, ki vsebuje vnose v naš blog.

Pojdite v imenik strani / objav. Tukaj so še ostali prispevki.

 title: Moja objava Naslov: My Post Headline Avtor: Agus datum: 15-01-2015 % razširja "post.html"% % blok telo% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perferendis inventore, dolorem rerum in tempora sint nemo illum ab saepe, predpostavke, amet illo deleniti officiis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock body% 

V vnosih objav objavljamo vrednost spremenljivke, kot so naslov, naslov, avtor in datum. Ta vrednost bo prešla, ko pokličemo ime spremenljivke na nadrejeni predlogi. Nato s Markdownom napišemo vsebino našega bloga.

Sedaj bomo odprli indeksno stran našega bloga index.html v strani imenik. Vsebuje seznam naših vnosov v blog in povezavo do vsakega vnosa. Glavna koda izgleda spodaj:

 % razširja "base.html"% % vsebine bloka% -- 
 % za objavo v objavah% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content%) 

Na tej točki imamo preprost blog z dvema glavnima stranema indeksna stran , ki vsebuje vnose v spletni dnevnik, in stran za vpis v blog sam.

Pojdite v okno Kaktus in kliknite gumb Predogled, da zaženete strežnik. Samodejno bo odprl brskalnik in odprl vašo spletno stran.

Styling Blog z uporabo SCSS

Velika lastnost Cactusa je, da deluje s SASS / SCSS iz škatle. Samo spustite datoteke .sass ali .scss v statično in vsakič, ko uredite in shranite datoteke, bo Cactus samodejno ustvaril CSS.

Tukaj bom podal primer uporabe bootstrap-sass za oblikovanje našega bloga. Ob predpostavki, da uporabljate bower, odprite terminal in se pomaknite do statično imenik našega projekta z uporabo cd ukaz. Nato namestite bootstrap-sass s tem ukazom:

$ bower namestite bootstrap-sass-uradnika

Ko je prenos končan, boste videli a bower_components imenik znotraj statičnega imenika, ki vsebuje bootstrap-sass-uradnik.

Sedaj pojdite v ta imenik: static / css. Ustvarite datoteko scss, dajte ji ime syle-bs.scss in vstavite to kodo.

 @import "… / bower_components / bootstrap-sass-uradni / sredstva / sloge / _bootstrap"; 

Koda pa je, da uvozi vse iz bootstrap-sass. Ko shranite style-bs.scss, boste v istem imeniku videli slog-bs.css, ki vsebuje vse sloge iz zagonskega zapisa..

Razvijte svoj projekt

Nazadnje, ko je vaš projekt pripravljen, lahko projekt preprosto namestite v različico v živo z uporabo Amazon S3.