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

В Последнее article¹Я посмотрел на почему статический поколения сайт растет в популярности, и я дал обзор на высоком уровне всех компонентов современного генератора .

В этой статье мы будем смотреть на четырех популярных статический сайт генераторов — Джекил, посредник, корни, Гюго — в гораздо более подробно.Это должно дать вам большую отправную точку для нахождения правильный выбор для вашего проекта.много другой ones²которые там, и многие из них могли бы сделать этот список.Те, которые я выбрал для этой статьи представляют собой различные тенденции, которые доминируют ландшафт сегодня .

Каждый генератор имеет хранилище с текстовым файлом, работает один или несколько фаз компиляции, и выплевывает папку со статическим веб-сайте, что можно разместить в любом месте.Нет PHP или базы данных needed.

Джекил Link

Ни одна статья сегодня о статической поколения веб-сайта не может обойтись без упоминания Джекил .

Мы не могли бы говорить о возрождении статических сайтов, если основатель GitHub, Том Престон-Вернер, не сел в своей квартире в Сан-Франциско в октябре 2008 года с бокалом яблочного сидра и желание написать свой собственный блогов двигатель .

Результат был Джекил, “простой, блог-известно, статическая генератор сайта.”

Один из блестящих идей, лежащих Джекила, что это позволяет любой нормальный статический сайт будет действителен Джекил project,Это делает его одним из самых легких генераторов, чтобы начать с:

1. Возьмите простой HTML макет блога .
2. Избавьтесь от повторения заголовки, меню, колонтитулы и так далее, работая с раскладками и включает в себя .
3. Включите страницы и сообщения в блоге в Markdown, и тянуть содержание в шаблоны .

По пути, Джекил может выступать в качестве местного веб-serverи следить за любыми файлами в вашем проекте, создавая все HTML, CSS и JavaScript файлов из шаблонов, уценки, Sass или CoffeeScript файлы .

Джекил был первым статический генератор ввести понятие “передней вопросу,” путь аннотирования шаблонов или Markdown файлы с мета-данных.Передняя дело немного YAML в верхней части любого текстового файла, с указанием трех ведущих и дефис (следующих ---):

title: A blog post
date: 2014-09-01
tags: ["meta", "yaml"]
---

# Blogpost with meta data

This is a short example of a Markdown document with meta data as front matter.

Шаблоны двигателяLink

Джекил построен на жидкость, движка шаблонов, который произошел с Shopify.Это как благословение и проклятие.Жидкость является сейф шаблонов engineзаставить работать ненадежных шаблоны для размещенную платформы Shopify в.Это означает, что нет пользовательского кода в шаблонах.С тех .

С одной стороны, это может сделать шаблоны проще и декларативный характер, и жидкость имеет хороший набор фильтров и помощников, построенных в из коробки .

С другой стороны, это означает, что вы должны начать создавать свои собственные Liquid помощников из Джекил плагинов, если вы хотите сделать что-нибудь, что не запеченная в .

Жидкость позволяет использовать переменные в шаблонах, как это: {{ some_variable }},И теги блог выглядит так: {% if some_variable %}Show this{% endif %},Джекил добавляет несколько тегов для обработки включает в себя и ссылки, а также некоторые помощники для сортировки, фильтрации и избежать содержание.Один вопиющее упущение является простым способ справиться с значения по умолчанию для variables,В какой-то момент в будущем, {{ some_variable | default: 'Default Value' }}должны начать работать, но это еще не там.Так, сейчас вы найдете много неуклюжим ifи elseзаявления в веб-сайтов, которые работают Джекил вокруг этого .

Модель содержимого Link

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

Сегодня, контент может храниться в нескольких различных формах и взять на различного поведения .

Простейшая форма является отдельный документ либо в Уценки или HTML,Этот файл преобразуется в соответствующий HTML страницы, когда строится страница.Документ может указать макет, который будет использоваться, когда он превратился в HTML странице, а также задать различные мета-данные, которые можно получить доступ из шаблонов ЧЕРЕЗ {{page}}Переменная .

Джекил имеет специальную поддержку для папки с именем _postsкоторый содержит Markdown файлы со схемой именования yyyy-mm-dd-title-of-the-post.md,Сообщений себя, как вы, как правило, ожидают от записей в блоге .

Начиная с версии 2.0, поддерживает Джекил collections,Коллекция представляет собой папку с Markdown документов.Вы можете получить доступ к коллекции в шаблонах через специальный {{site.collections}}Переменная, и вы можете настроить каждый документ в коллекции, чтобы иметь свой собственный ссылка.Один большой предстоящей изменение Джекила 3.0, что различие между _postsи collectionsбудут устранены .

Последняя форма содержания файлов данных.Они хранятся в специальной _dataПапка, и они могут быть YAML, JSON или CSV файлов.Оттуда, вы можете вытащить данные в любой файл шаблона через {{site.data}}Переменная .

Активами трубопровода Link

Трубопровод активов Джекила чрезвычайно прост.Так же, как с логической менее жидкость, это и хорошо, и плохо.Там это нет встроенной поддержки дляживая перезагрузка, minification или bundling;Однако, Сасс и CoffeeScript довольно проста в обращении.Любое .sass.scssили .coffeeфайл, который начинается с YAML передней вопросу будут обработаны Джекила и превратился в соответствующий .cssили .jsподать в конечной продукции для статического сайта .

Это означает, что файл CoffeeScript бы выглядеть так, чтобы получить обработанного Джекила:

---
---

alert "Hello from CoffeeScript"

Подсветка синтаксиса Ваш редактор не может быть супер-взволнованы ведущих дефис .

Если вы посмотрите на код для крупных веб-сайтов Джекил там в дикой природе, вы увидите, что многие из них падение встроенный конвейер активов Джекила в пользу комбинации Грунт или залпом с Джекила запустить их строит.Для большого проекта, как правило, это путь, потому что вы можете воспользоваться большим инфраструктуры вокруг этих проектов и получить BrowserSync или LiveReload работать .

Собираем все вместе Link

Давайте посмотрим на фактическое сайте Джекил, чтобы увидеть, как все эти части подходят друг к другу.Что лучше исходный учиться на чем официальный Jekyll³Веб-сайт.Мы будем смотреть на разделе документации здесь.Вы можете следить вместе в repository⁴.

⁵

Продление Джекил Link

Джекил довольно просто расширить, а Экосистема плагинов довольно large,Простейший способ расширить Джекил, это добавить файл Рубин в _pluginsПапка.Есть пять типов плагинов: генераторы, преобразователи, команды, теги и фильтры .

Как упоминалось ранее, жидкий шаблонов двигатель строг, не позволяя любой код в шаблонах.Теги и фильтры обойти это, позволяя добавлять собственные теги и фильтры .

Генераторы и преобразователи позволяют подключить к процессу сборки Джекила и генерировать дополнительные страницы или поддержки новых форматов файлов .

Команды позволяют добавлять новые функции к интерфейсу .__ 0 командной строки Джекила |

В Сводка Link

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

Посредник Link

Посредник является примерно того же возраста, как Джекил.В то время как он никогда не получил широкого распространения, что Джекил достигнутый от интеграции последнего умолчанию с GitHub страниц, он спокойно стать основой веб-сайты для некоторых из наиболее конструктивных подкованных компаний Интернета: Веб-сайты для MailChimp, гнездо и простой все построено сПосредник .

Это процветает открытым исходным кодом проекта с более чем ста участников.Мышца за ним Томас Рейнольдс, технический директор Портленд основе Instrument⁷.

В то время как Джекил был рожден от желания простого, статического блогов двигателя, посредник был построен как рамки для более продвинутой маркетинга и документации websites,Это мощный инструмент и быстро подобрать, если вы едете из мира Рельсы .

Шаблоны двигателя Link

Заявленная цель его автора, чтобы сделать Посредник чувствовать себя, как Ruby On Rails для статических сайтов.Так же, как в Rails, по умолчанию шаблонов двигатель является стандартным Руби встроенные Рубин (ЕРБ) templates, Но обмен за них Haml или жидкость просто .

Еврорадио является прямым шаблонов двигателя, что позволяет использовать в свободной форме Руби в шаблонах, без ограничений.Это дает двигателю намного больше энергии, чем жидкость, но, очевидно, она также требует больше дисциплины с вашей стороны, потому что вы можете написать столько кода, как вы хотите прямо в шаблонах .

Трубопровод активами Link

В течение многих лет стабильная версия посредника была версия 3. Теперь, версия 4 находится в бета-версии и принесет некоторые большие изменения как для модели контента и трубопровода активов .

Ядро модели содержимого посредника является sitemap,Карта сайта представляет собой список всех файлов, что делает ваш посредник файл, называемые “ресурсы” в терминологии Middleman .

Каждый ресурс имеет source_fileи destination_fileи получает подается через трубопровод активов посредника, когда веб-сайт построен .

Простой source/about/index.htmlисходный файл будет в конечном итоге, как build/about/index.htmlфайл назначения без каких-либо преобразований.Так же, как при использовании трубопровода активов Rails ‘, вы можете соединить вместе расширения файлов, чтобы указать, какие преобразования применять к файлам .

Файл с именем source/about/index.html.erbбудет получить прошли через движка шаблонов ERB и трансформируются в build/about/index.html,Файл с именем source/js/app.js.coffeeбудет составлен по состоянию на CoffeeScript и в конечном итоге, как build/js/app.js.

Трубопровод актив построен на Sprockets⁸, Как Rails, что означает, вы можете использовать “волшебные” комментарии в ваших JavaScript и CSS файлов, чтобы включить зависимостей:

//= require 'includes/test.js'

Это делает его легко разделить ваш передний конец в небольшой modulesи есть посредник разрешения зависимостей во время сборки .

Предстоящий версии 4 вводит понятие Внешний pipelines,Они позволяют Посредник управления внешних инструментов, таких как Ember CLI и Webpack в процессе сборки и делает его трубопровод активов еще более мощным.Это действительно удобно для получения посредником раскручиваться отдельный процесс работает Ember CLI, а затем прокси правильные запросы через сервер ember.js .

Модель содержимого Link

В шаблонах, вы можете получить доступ к карте сайта и использовать Ruby, легко доступа, фильтровать и сортировать содержимое .

Текущая стабильная версия посредника (3) поставляется с интерфейсом запроса в карте сайта, который имитирует Active Record (объектно-реляционного отображения, что полномочия Рельсы).Вот был лишен в предстоящийВерсия 4, в пользу простых методов Руби для запроса данных .

Скажем, у вас есть папка с именем source/faq,Справку записи хранятся в файлах с Markdown немного вводной части, и один смотрит что-нибудь подобное:

---
title: What is Middleman?
position: 1
---

Middleman is a [static website generator](https://www.staticgen.com) with all of the shortcuts and tools of modern web development.

Предположим, вы хотите, чтобы вытащить все из этих записей в шаблон ERB и заказать их по положению.Наша мнимая source/faq.html.erbбудет выглядеть так:

<h1>FAQ</h1>
<% sitemap.resources
   .select { |resource| resource.path =~ /^faq\// }
   .sort_by { |resource| resource.data.position }
   .each do |resource| %>
   <h2 class="question"><%= resource.data.title %></h2>
   <div class="answer"><%= resource.render(:layout => false) %></div>
<% end %>

Версия 4 вводит понятие collections, Которые позволяют превратить эти виды фильтров в карте сайта в коллекции.При работе в режиме LiveReload, Посредник следит за вашей файловой системы и автоматически обновлять коллекции (и восстанавливает любой файл, который от него зависит), когда что-то меняется .

Как только вы получите повесить этого, построения любую тему архитектуры, вам может понадобиться для вашего сайта очень проста.Если что-то может быть построен статически, посредник может быть, чтобы построить его для вас .

Там также поддержка файлов данных (YAML и JSON файлы, хранящиеся в data/ папки), как и в последних версиях Джекила .

Продление посредника Link

Посредник позволяет авторам расширение вклиниться в разных точках через мощный API,Это не требуется так часто, как это в Джекил, хотя, потому что свобода для создания одноранговой вспомогательные функции, отфильтрованные коллекции и новые страницы, наряду с движка шаблонов, который позволяет Еврорадио, означает, что вы можете сделать много из изокно, в котором потребуется расширение во многих других генераторов .

Авторская расширения посредник не очень straightforwardили хорошо документированы.Чтобы действительно получить собирается, копаться в некоторых существующих расширений и выяснить, как все это делается .

После того, как вы собираетесь получить, однако, посредник предлагает крючки в обоих CLI и модели содержимого.Официальный каталог extensions⁹перечисляет широкий выбор .

Корни Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 16.11.2015 by coding.smashingmagazine.com