Kaip sukurti statinį tinklaraštį naudojant kaktusą [OS X]

Atnaujinti: „Cactus“ programa buvo nutraukta.

Jei jums nereikia CMS ir norėtumėte tiesiog gauti statinę svetainę ar tinklaraštį, tuomet Jekyll yra gera priemonė, su kuria galėsite pasinaudoti. Tačiau, jei norite naudoti įrankį su GUI, o ne dirbti su komandinės eilutės įrankiais, galbūt norėsite patikrinti Kaktusas.

Kaktusas yra nemokamas statinis svetainės generatorius įrengti galingi įrankiai, kurie gali jums padėti kurti svetaines vietoje, greičiau ir lengviau naudojant modernią interneto technologiją. Jis suteikia jums pradinį tašką savo projekte su 4 iš anksto sukurtomis šablonais, kad galėtumėte pasiekti žemę.

Dirbdamas su projektu, Kaktusas stebėkite kiekvieną projekto pakeitimą ir automatiškai atnaujina naršyklę todėl galite tuoj pat matyti pakeitimus „Mac“ ar mobiliajame įrenginyje. Jis taip pat palaiko SASS / SCSS ir Coffescript iš dėžutės, todėl kiekvienas šio failo pakeitimas taip pat automatiškai generuojamas.

Pradėti

Visų pirma, turite atsisiųsti Cactus iš savo pagrindinio puslapio, tada paleisti diegimą. Baigę atidarykite jį, pamatysite keturis mygtukus: mygtuką „Sukurti“, „diegti“, „Redaguoti“ ir „Peržiūra“.

Norėdami sukurti naują projektą, spustelėkite Sukurti. Čia bus 4 šablonai. Dėl šios pamokos mes einame su „Blog“ šablonu. Spustelėkite Sukurti.

Jums bus paprašyta nurodyti savo projekto pavadinimą ir pasirinkti vietą, kurioje yra projektas. Čia aš pateikiu vardą “Mano nuostabus dienoraštis” projektui. Po to jūs matysite savo projektą jau Kaktuose.

Failų keitimas

Sukurtas projektas naudojant „Blog“ šabloną dabar yra jūsų „Finder“. Dabar tikrinsime elementus, reikalingus mūsų tinklaraščio kūrimui. Eikite į katalogą, kuriame saugomi jūsų failai. Pagrindiniai mūsų naudojami katalogai Šablonai, Puslapiai, ir Statinis katalogą. Dabar praleiskime kitus.

Norėdami, kad viskas būtų trumpas, čia yra, ką kiekvienas katalogas skirtas:

• Šablonai: Turi HTML failų, kurie elgiasi kaip šablonas, kuriuos naudoja HTML failai puslapiuose.
• Puslapiai: Turi visus HTML failus, kurie taps tuo pačiu keliu. pvz .: hello.html čia bus http://yoursite.com/hello.html
• Statinis: Turi visus statinius išteklius, pvz., CSS, „Javascript“ ir vaizdus.

Dabar redaguosime tris pagrindinius failus iš katalogų: base.html ir post.html kataloge Templates ir index.html kataloge Katalogai.

Kaktusas naudoja Django šablono variklis šablonų kalba. Šiuo būdu galite įtraukti HTML elementus iš kitų HTML failų, taigi jums nereikia kopijuoti kodų. Čia dažniausiai naudojamos funkcijos šablono paveldėjimas ir kintamasis.

Norėdami pamatyti, kaip jie veikia, pirmiausia atidarykite base.html šablonų kataloge.

             % block content% Pagrindinis turinys % endblock content% ---   

base.html yra paprastas html failas, kurį naudojame kaip skeleto šabloną. Jame yra bendri mūsų svetainės elementai. Galite pamatyti kai kuriuos “blokai” ten; mes naudosime vaiko šabloną, kad panaikintume šiuos blokus.

Dabar atidarykite post.html esančiame tame pačiame kataloge base.html.

 % pratęsia "base.html"% % block title% title | Kaktusas % endblock title% % block content% --- 
 
title
 
headline 
 
 
 % block body% Tai yra skelbimo turinys. % endblock body% 
 --- % endblock content% 

The post.html yra mūsų tinklaraščio įrašo puslapio žymėjimas. Pirmoje eilutėje galite tai pamatyti post.html pratęsia base.html. Tai reiškia, kad mes ignoruosime blokus base.html su blokais čia.

Čia taip pat galima rasti kintamųjų, pvz title ir headline. Nustatysime šių kintamųjų reikšmes dienoraščio įrašuose po to.

Dabar pažvelkite į % blokuoti kūno% blokuoti. Tai bus panaikinta vaiko šablone, kuriame yra mūsų tinklaraščio įrašų.

Eikite į katalogą puslapiai / žinutės. Čia yra kitų mūsų įrašų.

 pavadinimas: Mano įrašų įrašų antraštė: Mano įrašo antraštės autorius: Agus data: 15-01-2015 % pratęsia "post.html"% % blokuoti kūno dalį % filtras sumažinimas% Lorem ipsum dolor sit amet, consectetur elit. „Earum“, „perferendis inventore dolorem rerum et tempora sint nemo illum ab saepe“, „assumenda“, „amet illo deleniti officiis“, „voluptatem maxime atque vero sunt“. --- % endfilter% % endblock body% 

Įrašų įrašuose mes suteikiame reikšmės kintamajam, pvz., Pavadinimui, antraštei, autoriui ir datai. Ši vertė praeis, kai vadiname pagrindinio šablono kintamąjį. Tada rašome savo dienoraščio turinį su „Markdown“.

Dabar eisime į mūsų dienoraščio rodyklės puslapį, atidarytą index.html viduje konors puslapius katalogą. Jame yra mūsų tinklaraščio įrašų sąrašas ir nuoroda į kiekvieną įrašą. Pagrindinis kodas atrodo taip:

 % pratęsia „base.html“% % block content% -- 
 % skelbimams įrašuose% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

Šiuo metu mes turime paprastą dienoraštį su dviem pagrindiniais puslapiais indekso puslapis , kuriame yra tinklaraščio įrašai, ir dienoraščio įrašo puslapis pats.

Eikite į „Cactus“ langą ir spustelėkite peržiūros mygtuką, kad paleistumėte serverį. Jis automatiškai atidarys naršyklę ir atidarys jūsų svetainę.

Tinklaraščio kūrimas naudojant SCSS

Puikus „Cactus“ bruožas yra tai, kad jis veikia su SASS / SCSS iš dėžutės. Tiesiog ištrinkite .sass arba .scss failus į statinis ir kiekvieną kartą, kai redaguojate ir išsaugote failus, „Cactus“ automatiškai generuoja CSS.

Čia pateiksiu pavyzdį naudodamas „bootstrap-sass“, kad galėtumėte formuoti mūsų tinklaraštį. Darant prielaidą, kad naudojate bower, atvirą terminalą ir pereikite prie statinis mūsų projekto katalogas cd komandą. Tada įdiekite „bootstrap-sass“ naudodami šią komandą:

$ bower įdiegti „bootstrap-sass“ pareigūną

Kai parsisiuntimas bus baigtas, pamatysite bower_components kataloge, kuriame yra statinis katalogas „Bootstrap-Sass“ pareigūnas.

Dabar eikite į šį katalogą: statinis / css. Sukurkite scss failą, nurodykite jį syle-bs.scss ir įterpti šį kodą.

 @import "… / bower_components / bootstrap-sass-Official / turtas / stylesheets / _bootstrap"; 

Ką kodas daro, jis importuoja viską iš „bootstrap-sass“. Išsaugoję stiliaus bs.scss, pamatysite stiliaus bs.css, sukurtų tame pačiame kataloge, kuriame yra visi „bootstrap“ stiliai.

Įdiegti savo projektą

Galiausiai, kai jūsų projektas yra parengtas, galite lengvai įdiegti savo projektą į gyvą versiją naudojant „Amazon S3“.