Как да създадете статичен блог с помощта на Cactus [OS X]

Актуализация: Приложението Cactus е прекратено.

Ако не се нуждаете от CMS и бихте предпочели просто да получите статичен сайт или блог, то Jekyll е добър инструмент, с който да се възползвате. Въпреки това, ако предпочитате инструмент с графичен потребителски интерфейс, вместо да работите с инструменти на командния ред, може да искате да проверите кактус.

Кактусът е безплатен статичен генератор на сайта оборудвани с мощни инструменти, които могат да ви помогнат изграждане на уебсайтове локално, по-бързо и по-лесно с модерни уеб технологии. Тя ви дава начална точка във вашия проект с 4 предварително проектирани шаблона, така че можете да се справите на земята.

Докато работите по проекта си, Cactus ще го направи наблюдавайте всяка промяна, която правите в проекта си и автоматично обновява браузъра така че можете да видите промените незабавно на вашия Mac или мобилно устройство. Той също така поддържа SASS / SCSS и Coffescript от кутията, така че всяка промяна в този файл също се генерира автоматично.

Първи стъпки

Първо, трябва да изтеглите Cactus от началната му страница, след това да стартирате инсталацията. След като го завършите, отворете го и ще видите четири бутона: бутон Създаване, Разполагане, Редактиране и Преглед.

За да създадете нов проект, кликнете върху създавам. Там ще видите 4 шаблона. За този урок ще използваме шаблона на блога. Кликнете създавам.

Ще бъдете помолени да посочите името на проекта си и да изберете мястото, където проектът съществува. Тук давам име “Моят Страхотен блог” за проекта. След това ще видите проекта си вече в Cactus.

Промяна на файлове

Генерираният проект, използващ шаблона на блога, вече съществува на вашия Finder. Сега ще инспектираме елементите, необходими за изграждането на нашия блог. Отправете се в директорията, където се съхраняват файловете ви. Основните директории, които ще използваме, са Templates, Страници, и статичен директория. Нека сега прескочим останалите.

За да бъдете кратки, ето какво е за всяка директория:

• Templates: Съдържа HTML файлове, които се държат като шаблон, използвани от HTML файлове на страници, върху които се изгражда.
• Страници: Съдържа всички HTML файлове, които ще се превърнат в страница със същия път. Например: hello.html тук ще стане http://yoursite.com/hello.html
• статичен: Съдържа всички статични ресурси като CSS, Javascript и изображения.

Сега ще редактираме три основни файла от директориите: base.html и post.html в директорията Шаблони и index.html в директорията Страници.

Кактус използва Джанго двигател за шаблони за езика на шаблоните. С това можете да включите HTML елементи от други HTML файлове, така че не е необходимо да дублирате кодове. Най-използваните функции тук са наследяване на шаблон и променлив.

За да видите как работят, първо отворете base.html в директорията с шаблони.

             % блок съдържание% Основно съдържание % endblock content% ---   

base.html е простият html файл, който използваме като 'скелетен' шаблон. Той съдържа общи елементи на нашия сайт. Можете да видите някои “блокове” вътре; ще използваме шаблона на детето, за да заменим тези блокове.

Сега отворете post.html в същата директория с base.html.

 % разширява "base.html"% % заглавието на блока% title | Cactus % endblock title% % блокира съдържанието% --- 
 
 заглавие 
 
 заглавие  
 
 
 % block body% Това е съдържанието на публикацията. % endblock body% 
 --- % endblock content% 

Най- post.html съдържа маркировката за страницата ни за влизане в блога. На първия ред можете да видите това post.html разширява base.html. Това означава, че ще заменим блоковете base.html с блоковете тук.

Тук можем да открием и променливи, като например заглавие и заглавие . Ще дефинираме стойностите на тези променливи в публикациите в блога по-късно.

Сега, нека да разгледаме % block body% блок. Това ще бъде отменено от шаблона на детето, който съдържа публикациите в нашия блог.

Отидете в директорията страници / постове. Ето и останалите публикации.

 заглавие: Моята публикация Заглавие: Моята публикация Заглавие: Агус дата: 15-01-2015 % разширява "post.html"% % блок тяло% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipisicing Елит. Earum, perferendis изобретяваме reel reper et tempora sint nemo illum ab saepe, предположения, amet illo delenciis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock body% 

В записите за публикацията даваме стойност на променливата, като заглавие, заглавие, автор и дата. Тази стойност ще премине, когато наричаме името на променливата върху родителския шаблон. След това пишем съдържанието на нашия блог с Markdown.

Сега ще отидем на индексната страница на нашия блог, отворен index.html в страници директория. Той съдържа списъка с нашите блог записи и връзката към всеки запис. Основният код изглежда по-долу:

 % разширява "base.html"% % блокира съдържанието% -- 
 % за публикация в публикации% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

На този етап имаме обикновен блог с две основни страници индексна страница който съдържа записите в блога и страница за влизане в блога себе си.

Отидете в прозореца Cactus и кликнете върху бутона preview, за да стартирате сървъра. Тя автоматично ще отвори браузъра и ще отвори уебсайта ви.

Оформяне на блога с помощта на SCSS

Голяма черта на Cactus е, че работи с SASS / SCSS извън кутията. Просто свалете вашите .sass или .scss файлове в статичен всеки път, когато редактирате и запазвате файловете, Cactus автоматично ще генерира CSS.

Тук ще дам пример, използвайки bootstrap-sass за да стилизираме нашия блог. Ако приемем, че използвате bower, отворете терминала и се придвижете до статичен директорията на нашия проект CD команда. След това инсталирайте bootstrap-sass, като използвате тази команда:

$ bower инсталирате bootstrap-sass-официален

След като изтеглянето приключи, ще видите a bower_components директория в статичната директория, съдържаща фърмуера-дързък-официален.

Сега отидете в тази директория: статичен / CSS. Създайте scss файла, дайте му името почерк-bs.scss и вмъкнете този код.

 @import "… / bower_components / bootstrap-sass-официален / активи / стилове / _bootstrap"; 

Това, което прави кодът, е да импортира всичко от bootstrap-sass. След като запишете style-bs.scss, ще видите style-bs.css, генерирани в същата директория, която съдържа всички стилове от първоначалното зареждане.

Разположете проекта си

И накрая, когато проектът ви е готов, можете лесно да разположите проекта си на живо версия използване на Amazon S3.