Kā izveidot statisku emuāru, izmantojot kaktusu [OS X]

Atjaunināt: Cactus lietotne ir pārtraukta.

Ja jums nav nepieciešama CMS un vēlaties tikai iegūt statisku vietni vai emuāru, tad Jekyll ir labs līdzeklis, lai varētu izbaudīt iespēju. Tomēr, ja vēlaties izmantot rīku ar GUI, nevis strādāt ar komandrindas rīkiem, jūs varētu vēlēties pārbaudīt Kaktuss.

Kaktuss ir bezmaksas statiskā vietnes ģenerators aprīkoti ar spēcīgiem instrumentiem, kas var jums palīdzēt veidot vietnes vietējā līmenī, ātrāk un vieglāk ar modernām tīmekļa tehnoloģijām. Tas dod jums sākumpunktu jūsu projektā ar četrām iepriekš izstrādātajām veidnēm, lai jūs varētu nokļūt zemē.

Strādājot pie sava projekta, Cactus būs pārraudzīt visas izmaiņas, ko veicat savā projektā un automātiski atjaunina pārlūku lai jūs varētu redzēt izmaiņas nekavējoties savā Mac vai mobilajā ierīcē. Tā arī atbalsta SASS / SCSS un Coffescript no lodziņa, tāpēc visas izmaiņas šajā failā tiek ģenerētas arī automātiski.

Sāc

Pirmkārt, jums ir nepieciešams lejupielādēt Cactus no savas mājas lapas, pēc tam palaist instalēšanu. Kad tas ir pabeigts, atveriet to, jūs redzēsiet četras pogas: poga Izveidot, izvietot, rediģēt un priekšskatīt.

Lai izveidotu jaunu projektu, noklikšķiniet uz Izveidot. Tur jūs redzēsiet 4 veidnes. Šajā apmācībā mēs izmantojam emuāra veidni. Klikšķis Izveidot.

Jums tiks lūgts norādīt jūsu projekta nosaukumu un izvēlēties vietu, kur projekts ir. Šeit es dodu vārdu “Mans Awesome emuārs” projektam. Pēc tam jūs redzēsiet savu projektu jau Kaktusā.

Failu modificēšana

Radītais projekts, izmantojot Blog veidni, tagad ir jūsu meklētājā. Tagad mēs pārbaudīsim nepieciešamos elementus, lai izveidotu mūsu emuāru. Virzieties uz direktoriju, kurā tiek glabāti jūsu faili. Galvenie katalogi, kurus mēs izmantosim, ir Veidnes, Lapas, un Statisks direktoriju. Tagad izlaidīsim citus.

Lai saglabātu lietas īsu, šeit ir tas, ko katrs katalogs ir paredzēts:

• Veidnes: Satur HTML failus, kas uzvedas kā veidne, kuru HTML lapas izmanto lapās, lai tās izmantotu.
• Lapas: Satur visus HTML failus, kas kļūs par lapu ar tādu pašu ceļu. piemēram: hello.html šeit būs http://yoursite.com/hello.html
• Statisks: Satur visus statiskos resursus, piemēram, CSS, Javascript un attēlus.

Tagad mēs rediģēsim trīs galvenos failus no katalogiem: base.html un post.html mapē Veidnes un index.html mapē Pages.

Kaktuss izmanto Django Template Engine veidnes valodai. Ar to jūs varat iekļaut HTML elementus no citiem HTML failiem, tāpēc jums nav nepieciešams dublēt kodus. Šeit visbiežāk izmantotās funkcijas ir veidnes mantojums un mainīgais.

Lai redzētu, kā viņi strādā, vispirms atveriet base.html Template direktorijā.

             % bloķēt saturu% Galvenais saturs % endblock content% ---   

base.html ir vienkāršais html fails, ko izmantojam kā skeleta veidni. Tā satur kopīgus mūsu vietnes elementus. Jūs varat redzēt dažus “bloki” tur; mēs izmantosim bērna veidni, lai ignorētu šos blokus.

Tagad atveriet post.html atrodas tajā pašā direktorijā ar base.html.

 % paplašina "base.html"% % bloķēt nosaukumu% title | Kaktuss % endblock title% % block content% --- 
 
title
 
headline 
 
 
 % bloķēt ķermeņa% Tas ir, ja ziņojuma saturs ir. % endblock body% 
 --- % endblock content% 

The post.html ir mūsu emuāra ieraksta lapas atzīme. Pirmajā rindā to var redzēt post.html paplašina base.html. Tas nozīmē, ka mēs ignorēsim blokus base.html ar blokiem šeit.

Šeit var atrast arī mainīgos, piemēram, title un headline. Šo mainīgo lielumu vērtības emuāra ierakstos definēsim vēlāk.

Tagad ļaujiet apskatīt % bloķēt ķermeņa% bloķēt. To ignorēs bērna veidne, kas satur mūsu emuāra ierakstus.

Dodieties uz direktoriju lapas / ziņas. Šeit ir pārējie mūsu ierakstu ieraksti.

 nosaukums: My Post Entries virsraksts: My Post virsraksts autors: Agus datums: 15-01-2015 % paplašina "post.html"% % bloķēt ķermeņa% % filtrs markdown% elit. Earum, perferendis izgudrojums dolorem rerum un tempora sint nemo illum ab saepe, assumenda, amet ilo deleniti officiis. --- % endfilter% % endblock body% 

Post ierakstos mēs sniedzam vērtību mainīgajam, piemēram, virsraksts, virsraksts, autors un datums. Šī vērtība tiks pārsūtīta, kad mēs mainīsim mainīgā nosaukuma nosaukumu mātes veidnē. Tad mēs rakstām mūsu emuāra saturu ar Markdown.

Tagad mēs dosimies uz mūsu emuāra lapu, kas atvērta index.html iekš lapas direktoriju. Tā satur mūsu emuāru ierakstu sarakstu un saiti uz katru ierakstu. Galvenais kods izskatās šādi:

 % paplašina "base.html"% % block content% -- 
 % ziņojumam ziņās% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

Šajā brīdī mums ir vienkāršs emuārs ar divām galvenajām lapām indeksa lapa kas satur emuāra ierakstus un emuāra ieraksta lapa pati.

Atveriet logu Kaktuss un noklikšķiniet uz pogas Priekšskatīt, lai sāktu serveri. Tas automātiski atvērs pārlūkprogrammu un atver jūsu vietni.

Blogu veidošana, izmantojot SCSS

Lieliska Cactus iezīme ir tā, ka tā darbojas ar SASS / SCSS no kastes. Tikai nometiet .sass vai .scss failus iekšā statisks un katru reizi, kad rediģējat un saglabājat failus, Cactus automātiski ģenerēs CSS.

Šeit es sniegšu piemēru, izmantojot bootstrap-sass, lai veidotu mūsu emuāru. Pieņemot, ka izmantojat bower, atvērt termināli un dodieties uz statisks izmantojot mūsu projektu cd komandu. Pēc tam instalējiet bootstrap-sass, izmantojot šo komandu:

$ bower instalēt bootstrap-sass-ierēdni

Kad lejupielāde ir pabeigta, jūs redzēsiet a bower_components direktorija, kas atrodas statiskajā direktorijā, kas satur bootstrap-sass-ierēdnis.

Tagad dodieties uz šo direktoriju: statisks / css. Izveidojiet scss failu, piešķiriet tai nosaukumu syle-bs.scss un ievietojiet šo kodu.

 @import "… / bower_components / bootstrap-sass-oficiāls / aktīvi / stylesheets / _bootstrap"; 

Kāds kods ir tas, kas importē visu no bootstrap-sass. Kad būsiet saglabājis stila bs.scss, jūs redzēsiet stilā bs.css, kas ģenerēti tajā pašā direktorijā, kurā ir visi sāknēšanas logi.

Izvietojiet savu projektu

Visbeidzot, kad jūsu projekts ir gatavs, varat viegli izvietot savu projektu tiešraides versijā izmantojot Amazon S3.