HarpJs

Январь 21, 2014 ||  kak-to-tak ||  комментарии

Статические генераторы стали модной темой, их появилось много. Раз в месяц мне попадается статья типа - Как я перешел от вордпресса к статике.

Я начал использовать статические генераторы просто как инструмент для верстки, на этапе превращения дизайнерского макета в статические html, css, js. Эта верстка потом идет дальше к программерам или еще куда. Это удобно потому что у тебя в распоряжении сразу приятные мелочи типа препроцессинг стилей, инклуды. Тот же CoffeeScript например, если вы им пользуетесь. Сначала я пробовал пользоваться для этих целей грантом, но стало не хватать возможностей, типа метаданные для страниц. Хотя это можно каким то боком сделать, скажем, с помощью Jade, но это не так удобно как это бывает в статических генераторах. Возможно я не прав и все это можно сделать при помощи Grunt или Gulp.

Первым генератором которым я пользовался более-менее продолжительно был Docpad. Очень неплохой генератор, супернавороченный, с тонной плагинов и хорошим сообществом. В какой то момент у меня появилась бага, которую я не мог разрешить. Она была очень надоедливая, и решил посмотреть другие генераторы. Ничего плохого в адресс докпада сказать не хочу, он хороший.

Harp сразу же удивил тем как он просто устроен. Можно не делать никаких конфигураций, нарисовал три файла в папке, запустил сервер и работаешь. Пользоваться я им стал не сразу, сначала просто почитал документацию. И сразу хочу им нарисовать жирный плюс за отличную доку, все что надо находится быстро, обьясняется просто.

HarpJs это статический сервер со встроенным препроцессингом (The static web server with built-in preprocessing), умеет процессить Less, Stylus, Sass, Jade, Coffee. Я думаю назван он именно так намеренно, а не просто например - статический генератор сайтов, потому что Harp можно использовать не только для генерации статики. Можно скажем просто в проекте запустить и пользоваться как сервером, можно в ваше нод-приложение подключить и использовать для процессинга например стилуса.

Как с ним начать работать отлично обьясняется в документации, у меня до начала работы с ним заняло пару часов чтения доки. Действительно очень просто.

Возможности которые вы имеете с harp:

  • Прозрачный процессинг плюшек - styl, coffee, jade, ejs, sass, less
  • Глобальные метаданные для всего сайта
  • Метаданные для конкретных страниц, все что придумаете - от даты до тегов, ключевые слова и так далее
  • Инклуды с возможностью передачи в них данных
  • Сервер который можно использовать отдельно от возможностей harp, например просто запустить в нужной папке
  • Компиляция из коммандной строки когда закончили работу и хотите получить кучку конечных файлов

Вроде бы немного, но сделать с этим можно довольно много всякого. Этот сайт сделан на харпе, можете посмотреть исходники если интересно. Приведу пример как сделан в сайдбаре вывод недавних записей.

<h5>Недавно</h5>
<ul class="list-simple c-small">
  <% 
    /* latest 5 post */
    var recent = [], i = 6
    if (category == "blog") {
      var data = public.blog._data
      var path = "/blog/"
    }else{
      var data = public.folio._data
      var path = "/folio/"
    };
    for(var slug in data){
      if (typeof(data[slug].tags) !== 'undefined' && data[slug].published ) {
        recent.push([slug, data[slug].date])
      }
    };
    /* sorting by date */
    recent.sort(function(a,b){
      return new Date(b[1]) - new Date(a[1])
    });
    recent = recent.slice(0,i)
    /* removing latest post for the index page */
    if (current.path == "index") {
      recent = recent.slice(1,i)
    }
  %>
  <%/* displays latest 5 posts */ %>
  <%  recent.forEach( function (slug) {  %>
    <%  if (current.source != slug[0]) { %>
      <li><a href="<%= path + slug[0] %>.html" class="c-link--sidebar"><%= data[slug[0]].title %></a></li>
    <% } %>
  <% }); %>
</ul>

Пример записи из файла _blog/data.json

"harpjs": {
    "title": "HarpJs",
    "date": "2014-01-21",
    "postdate": "Январь 21, 2014",
    "keywords": "harpjs статический генератор сайтов",
    "disqus": "harpjs-disqus",
    "tags": ["kak-to-tak"],
    "published": false
  },
  ...

У меня есть два типа постов - блог и фолио, когда я делаю инклуд сайдбара я передаю категорию.

<%- partial("../_inc/html/l-sidebar", {"category": "blog"}) %>

Это означает что у меня есть отдельный layout для постов и для фолио.

if (category == "blog") { ...

Проверяю мы в блоге или в портфолио.
Метаданные из файла _data.json получаем таким образом:

var data = public.blog._data

blog - это имя папки в которой лежат посты.

if (typeof(data[slug].tags) !== 'undefined' && data[slug].published )

Проверяю чтобы в метаданных было свойство tags, так я отсеиваю всякие другие вспомогательные страницы, например индекс в портфолио в которой список работ. published - отсеиваю страницы которые пока не закончены.

slug - это обьект в public.blog._data и одновременно это имя соотвествующего файла с контентом.

Короче говоря дальше обычный javascript. Ну и делать с этим можно все что позволяет js и фантазия.

К примеру если получить контент страницы при помощи partial:

<% var mypost = partial("mypost"); %>

в котором есть комментарий - <!-- more -->, то можно обрезать и получить цитату

<%- mypost.split("<!-- more -->")[0]; %>

Плюс ко всему могу добавить что авторы очень отзывчивы и реагируют на вопросы или замечания быстро и по делу.

Само собой к харпу уже есть заготовки, вот пара которые мне понравились - baseline, casper.

comments powered by Disqus