Поиск по сайту:

Краткий обзор генератора статических сайтов Eleventy

Генераторы статических сайтов сейчас очень в моде, и JAMStack становится более чем жизнеспособной альтернативой для многих веб-проектов в наши дни, и это неудивительно!

JAMStack или нет, генераторы статических сайтов (SSG) предлагают некоторые важные преимущества по сравнению с более традиционными CMS, а когда дело доходит до SSG, есть из чего выбрать. Джекил, Хьюго, Гэтсби, Next.jst, Саппер,… Боже мой!

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

11ty прост в использовании, не мешает вам и выдает именно то, что вы ввели, так что нет сюрпризов или скрытого раздувания кода. По сути, 11ty просто компилирует файлы, найденные в вашем рабочем каталоге, в статические HTML-файлы. Кроме того, поскольку он написан на JavaScript, вы получаете доступ ко всему npm с точки зрения пакетов, которые вы можете использовать в своем проекте.

Давайте совершим экскурсию и посмотрим, как это работает…

Одиннадцать Настройка сайта

Начните с глобальной установки Eleventy на свой компьютер с помощью npm или Yarn:

# with npm
$ npm install -g @11ty/eleventy

# with Yarn
$ yarn global add @11ty/eleventy

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

Например, предположим, что у нас есть каталог с именем best-site-ever, в котором находится файл index.md:

## Chomp Chomp **Chomp** 🐊🐊🐊

Теперь вы можете запустить eleventy в этом каталоге. Вы увидите, что Eleventy создает каталог _site с файлом index.html, который содержит что мы ожидаем:

<h2>Chomp Chomp <strong>Chomp</strong> 🐊🐊🐊</h2>

Говоря о языках шаблонов, у вас есть множество вариантов. Вы можете использовать Markdown, Nunjucks, Liquid, Mustache,… И вы можете смешивать и сочетать, так что вы можете иметь некоторые файлы, написанные в Liquid, а некоторые в Nunjucks, и Eleventy справится со всем просто отлично.

одиннадцать вариантов команды

Команда eleventy также принимает несколько полезных флагов. Например:

  • –наблюдать: переписывать выходные файлы при изменении любого из файлов вашего проекта.
  • –обслуживать: обслуживать полученный сайт через локальный веб-сервер и следить за изменениями.
  • – пробный запуск: протестируйте обработку без фактического вывода каких-либо файлов.
  • –output: укажите другое место вывода.

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

$ eleventy --serve

Структура каталогов

С Eleventy вы не только можете выбрать свой любимый язык шаблонов, но также можете выбрать свою собственную структуру каталогов.

Скажем, у нас есть еще один файл уценки в нашем проекте, но на этот раз он находится в двух вложенных подкаталогах:

One day *I will write* my 1st blog post!

Теперь, если мы запустим eleventy, вывод в _site будет выглядеть так:

📁 _site/
  index.html
  📁 one/
    📁 two/
      📁 blog-post/
        index.html

Таким образом, вы заметите, что структура каталогов сохраняется, что имя файла используется в качестве slug/URI и что Eleventy создает каталог для каждого выводимого шаблона с файлом index.html внутри него, который содержит вывод HTML.

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

---
permalink: '/blog-post/'
---

One day *I will write* my 1st blog post!

Просто запустите eleventy еще раз, и вы увидите, что теперь blog-post появляется на корневом уровне в _site. Таким образом, указание постоянной ссылки обеспечивает полную гибкость.

Передний вопрос

Говоря о вступительной части, в нее можно поместить всевозможные метаданные, которые потом будут доступны для макетов (подробнее об этом позже). Например, в первую очередь вы указываете такие вещи, как заголовок, метаописание/отрывок и теги для сообщения, а большинство ключей можно назвать как угодно.

Вот пример для иллюстрации:

---
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
permalink: '/blog-post/'
emotion: happy
tags:
  - blog
  - getting-started
---

One day *I will write* my 1st blog post!

Коллекции

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

Существует также специальная коллекция под названием all, которая по умолчанию включает все записи. С коллекцией all у вас может получиться что-то вроде карты сайта, которая включает записи/страницы, которые вам не нужны, поэтому есть простой способ отказаться от включения публикации или страницы в коллекции:

---
eleventyExcludeFromCollections: true
---

Макеты

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

По умолчанию шаблоны макетов должны находиться в каталоге _includes.

Давайте создадим несколько образцов макетов, используя синтаксис Nunjucks. Один будет макетом по умолчанию с нашим шаблоном HTML, а другой будет макетом нашего блога:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }} | My Site</title>
</head>
<body>
   {{ content | safe }}
</body>
</html>

---
layout: default
---

<h1>{{ title }}</h1>
<div>
  Published on {{ date }}
</div>

<article>
  {{ content | safe }}
</article>

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

Мы можем использовать макет, указав его в начале любого из наших шаблонов контента:

---
layout: blog.njk
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
---

One day *I will write* my 1st blog post!

Одиннадцать Конфигурация

До сих пор мы делали все, даже не касаясь файла конфигурации, и это показывает простоту использования Eleventy. Но по мере того, как ваш веб-сайт становится все более сложным, вы наверняка захотите установить некоторые параметры конфигурации. Вы можете сделать это в файле .eleventy.js в корне вашего проекта.

Вот пример файла конфигурации, который копирует наши статические ресурсы в выходной каталог и указывает другое имя выходного каталога (public):

module.exports = eleventyConfig => {
  // Copy our static assets to the output folder
  eleventyConfig.addPassthroughCopy('css');
  eleventyConfig.addPassthroughCopy('js');
  eleventyConfig.addPassthroughCopy('images');

  // Returning something from the configuration function is optional
  return {
    dir: {
      output: 'public'
    }
  };
};

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

Использование стартера

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

Мне лично очень нравится стартер блога Eleventy, который также был бы отличным местом для начала.

Узнать больше

✨✨ Вот и все для этого краткого введения, но я приглашаю вас узнать больше, просмотрев эти ресурсы:

  • Официальные документы
  • Зак Лезерман, создатель Eleventy