mitorun studio
  1. Главная
  2. Блог
  3. Памятка по Eleventy

Памятка по Eleventy

Олег Миторун Фото Олег Миторун

Eleventy (11ty) — генератор статических сайтов (SSG). Он полезен для создания многостраничных сайтов со множеством однообразных страниц и блоков. Вместе с Элевенти можно использовать обычные NPM-пакеты, превращая его в мощный инструмент сборки.

Установка Eleventy

Пошаговая установка с нуля и начало работы. Нужно иметь браузер, редактор кода и терминал (командную строку), например браузер Chrome и редактор VS Code со встроенным терминалом.

Установка Node и NPM

Скачать и установить Node.js, версию LTS. Вместе с Node.js устанавливаются пакеты NPM. Проверить установлены ли Node/NPM и их версию: node --version или npm --version.

Создание папки и файла package.json

Создать папку для будущего сайта-проекта: /eleventy.site.

Перейти в терминале в нашу папку (сделать её текущей): cd eleventy.site. Далее все команды в терминале нужно вводить из этой папки!

Создать и настроить файл “package.json” для проекта: npm init -y. Приставка “-y” отвечает ДА на все вопросы и сразу создаёт файл по умолчанию.

Установка Eleventy

Локальная установка Eleventy в наш проект и в devDependencies файла package.json: npm install --save-dev @11ty/eleventy.

Локальная установка означает, что Eleventy будет работать только для файлов внутри этого каталога. После установки в нашей папке появляется папка “node_modules” со множеством папок-файлов и файл package-lock.json (для блокировки версий пакетов).

Запуск Eleventy

npx @11ty/eleventy --serve --quiet

Выдало ответ: [11ty] Wrote 0 files in 0.02 seconds (v1.0.2). Теперь можно посмотреть наш сайт в браузере по адресу http://localhost:8080/.

Настройка конфига

В корне проекта нужно создать файл конфига eleventy.config.js, в нём будут все настройки Eleventy. Вот хороший пример для старта:

// Место для подключения плагинов.
module.exports = function (eleventyConfig) {
	// Чтобы сайт открывался при запуске 11ty:
	eleventyConfig.setBrowserSyncConfig({ open: true, });

	// Копирование файлов в выходную папку:
	eleventyConfig.addPassthroughCopy('src/**/*.css');
	eleventyConfig.addPassthroughCopy('src/img');
	eleventyConfig.addPassthroughCopy('src/*.{js,php,txt,xml,json,ico}');

	// Настройка путей, папок и движков:
	return {
		addPassthroughFileCopy: true,
		dataTemplateEngine: "njk",
		markdownTemplateEngine: "njk",
		htmlTemplateEngine: "njk",
		templateFormats: ["html", "njk", "md"],
		dir: {
			input: "src",
			output: "site",
			includes: "_includes",
			layouts: "_includes",
			data: "_includes"
		}
	};
};

В низу файла мы указываем (относительно корня проекта): исходную папку, выходную папку, а также места расположения наших будущих файлов инклюдов, лейаутов и общих данных.

Структура проекта

  • eleventy.site
    • .eleventy.js
    • package.json
    • src
      • _includes
      • img
      • index.html
      • styles.css
      • scripts.js
    • site

Основные примеры применения

Создадим страницу статьи для блога eleventy.site/blog/post-1/index.html.

Внешний шаблон всех страниц eleventy.site/src/_includes/_page-base.njk:

<!doctype html>
	<html lang="ru">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>{{ title }}</title>
		<meta name="description" content="{{ description }}">
	</head>
	<body>
		{% include "_header.njk" %}
		<main class="main">
			{{ content | safe }}
		</main>
		{% include "_footer.njk" %}
	</body>
	</html>

Необязательный средний (промежуточный/расширяющий) шаблон страницы eleventy.site/src/_includes/_page-post.njk:

---
layout: _page-base.njk
---
<section class="container blog-article">
	<h1>{{ title }}</h1>
	{{ content | safe }}
</section>

Файл (шаблон) страницы поста eleventy.site/src/blog/post-1/index.html:

---
title: Тайтл статьи №1
description: 'Дескрипшн "статьи" №1'
layout: _page-post.njk
---
<h1>Заголовок статьи №1</h1>
<p>Какой-то длинный текст статьи №1.</p>

Файл страницы поста eleventy.site/src/blog/post-2/index.html:

---
title: 'Тайтл статьи №2'
description: 'Дескрипшн "статьи" №2'
layout: _page-post.njk
---
# Заголовок статьи №2
Какой-то длинный текст статьи №2.