Генераторы статических сайтов похожи на серию Netflix.

Как только вы подумали, что видели их все, вы находите еще одного.

И все они прекрасно выглядят!

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

SSG в меню сегодня? 11ty (или Eleventy) перспективный генератор статических сайтов на JavaScript.

Вот что я расскажу в учебнике JAMstack ниже:

  1. Создание интернет-магазина с Eleventy.
  2. Создание продуктов и введение корзины.
  3. Добавление выделения кода в сообщения блога!
  4. Вывод файла JSON для продуктов.

Но давайте сначала познакомимся с 11ty.

Что такое Eleventy?

Что ж, эта картинка сжег мою строчку, но все же:

Eleventy - простой генератор статических сайтов, написанный на JavaScript.

Возможно, вы еще не слышали о нем, в основном из-за его юного возраста. Он был выпущен на заре 2018 года, но быстро завоевывает признание на сцене SSG.

Как работает это маленькое чудо? Просто преобразовав каталог шаблонов разных типов в HTML. Eleventy не воспринимает слова «различные типы» легкомысленно - одной из основных особенностей является гибкость системы шаблонов.

Он поддерживает:

  • HTML
  • Уценка
  • Жидкость
  • Nunjucks
  • Рули
  • Усы
  • EJS
  • Haml
  • Мопс
  • ES2015

Он представляет собой альтернативу Джекилу, и, судя по тому, что я видел до сих пор, довольно неплохой. Чтобы быстро начать проект без конфигурации, 11ty, вероятно, даже более эффективен, чем его предшественник.

С другой стороны, у Jekyll все еще есть более широкая экосистема плагинов, и, вероятно, будет проще масштабировать, если это то, что вам нужно. Однако нельзя сказать, что 11ty не догонит их по мере взросления.

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

Примечание: прочтите это, чтобы начать работу с Jekyll.

Еще не заинтригованы? Давайте углубимся в технические детали.

Подробнее об Eleventy словами ее создателя здесь.

Техническое руководство 11ty: создание небольшого приложения для электронной коммерции

Первое, что нужно понять, это то, что 11ty управляется файлами шаблонов. Один файл во входном каталоге равен одной странице на вашем веб-сайте. Хотите статью в блоге? Добавьте .md и установите макет. Список этих постов? Добавьте файл шаблона, в котором вы перебираете список сообщений.

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

Предварительные требования

  • Установка Node.js.
  • Базовые знания о пакетах npm.

1. Установка Eleventy

Начните с создания пустого репозитория с package.json.

Я решил установить Eleventy в папку node_modules моего проекта, а не глобально, выполнив команду:

npm install --save-dev @11ty/eleventy

Таким образом, вы можете вызывать команды, используя npm start в разработке и npm run build для своей производственной сборки, добавляя эти строки в package.json:

Во-первых, вам нужна домашняя страница. Для этого можно использовать ejs шаблон:

Заметили здесь главный вопрос о YAML? Если вы знакомы с Джекилом, это тот же подход. Вы можете добавить вступление к любому файлу, чтобы определить некоторые параметры или новые переменные.

Самое главное, layout определит родительский шаблон, загруженный из папки _includes. Повторное использование кода FTW!

Основной макет прост: заголовок, нижний колонтитул и обязательные элементы корзины:

Добавьте пустой title в начало, чтобы переменная всегда была определена. page содержит информацию о текущей странице, такую ​​как URL-адрес и его заголовок в page.data.

Переменная content содержит весь сгенерированный HTML-код дочернего шаблона или страницы.

2. Создание магазина

Теперь, чтобы получить список продуктов, создайте группу файлов уценки в папке _products, используя следующий формат:

--- 
name: My Awesome Product 
price: 59.99 
image: /assets/products/product.svg 
---

Вы можете создавать коллекции автоматически в 11ty, добавляя теги в начало ваших файлов, но здесь я решил объявить свою коллекцию продуктов из файла конфигурации .eleventy.js:

При использовании getFilteredByGlob("_products/**/*.md") коллекция продуктов состоит из каждого .md файла в папке _products.

В templateFormats вы определяете каждый механизм шаблонов, который будет использоваться для входных файлов (т. Е. Файлов, которые будут обрабатываться 11ty), включенные макеты или частичные файлы не зависят от этой конфигурации.

Добавьте в этот список файлы других типов с опцией passthroughFileCopy, чтобы статические файлы также копировались в выходной каталог.

Наконец, для отдельных страниц продукта мы могли бы установить макет и параметр постоянной ссылки для каждого файла уценки, или вы можете использовать файл данных каталога, который представляет собой файл JSON, названный так же, как его родительский каталог.

В данном случае это _products/_products.json:

Я использовал для этого шаблон Nunjucks.

Переменная config берется из файла глобальных данных в _data/config.json:

3. Изучение плагинов Eleventy

На этом я мог бы остановиться, но я хотел поиграть с плагинами 11ty’s.

Добавление еще нескольких строк конфигурации и установка нового пакета npm (@11ty/eleventy-plugin-syntaxhighlight) позволяет добавить подсветку синтаксиса в демонстрацию.

Зарегистрируйте плагин в .eleventy.js файле конфигурации:

С его помощью я добавил выделение кода кнопки Добавить в корзину в шаблон продукта:

Наконец, я загрузил файл CSS для языков, которые хочу выделить, из prism js.

4. Вывод JSON-файла для товаров.

В некоторых случаях полезно использовать искатель JSON Snipcart, но не каждый генератор статических сайтов позволяет легко создавать список коллекций в двух разных форматах.

С Eleventy это так же просто, как добавить новый шаблон ввода. А с шаблоном .ejs это сделать еще проще, вызвав JSON.stringify:

Живая демонстрация и репозиторий на GitHub

Посмотреть живую демонстрацию здесь

См. репозиторий GitHub здесь

Заключительные мысли

Честно говоря, я был ошеломлен тем, насколько элегантен и прост в использовании Eleventy. Фактически, единственная проблема, с которой я столкнулся, заключалась в использовании .mustache шаблонов для каламбура с темой демонстрации. Не проблема 11ty, просто усы, на мой взгляд, не лучший шаблонизатор среди всех альтернатив, предлагаемых 11ty.

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

Очевидным улучшением здесь было бы добавление правильной нумерации страниц в список продуктов. Кроме того, добавление препроцессора CSS в процесс сборки сделало бы его более удобным в обслуживании в долгосрочной перспективе.

Также меняются цвета, по словам нашего товарища по команде Франка. ¯_ (ツ) _ / ¯

В общем, я настоятельно рекомендую Eleventy всем, кто ищет простой, но мощный генератор статических сайтов.

Теперь я считаю, что это действительно отличная альтернатива Джекилу. Вы пробовали оба? Если да, то согласны? Поговорим об этом в комментариях ниже!

Изначально я опубликовал это в блоге Snipcart и поделился им в нашем информационном бюллетене.