Как конфигурировать 11ty

Если вы дошли до этой статьи, то навер­няка уже прочи­тали заметку о препро­цес­сорах в 11ty и откры­вали eleventy.config.js. Если ещё нет, прочи­тайте и возвра­щай­тесь.

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

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

addPassthroughCopy

Инту­и­тивно понятная вещь: копи­рует файлы из папок проекта в подпапки статич­ного сайта, никак не изменяя их по пути.

	eleventyConfig.addPassthroughCopy({
		"./public/": "/",
		"./content/feed/pretty-atom-feed.xsl": "/rss/feed.xsl",
		"./content/blog/media/": "/me­di­a/",
		"./content/assets/": "/as­set­s/",
	});

addPreprocessor

Уже знакомый вам метод для редак­туры исходных файлов. Заметьте, что препро­цес­сить можно не только какой-­то опре­де­лённый тип файлов ("*"), а возвра­щать не только отре­дак­ти­ро­ванный con­tent или свой­ства заметки data. Кусок кода ниже стоит в самом начале конфига и анну­ли­рует черно­вики, не давая им отрен­де­рится и попасть на сайт.

	eleventyConfig.addPreprocessor("drafts", "*", (data, content) => {
		if (data.draft && process.env.ELEVENTY_RUN_MODE === "build") {
			re­turn false;
		}
	});

addFilter

Фильтры — это функции-­преобразователи для nunjucks-­шаблонов. Язык Nunjucks поддер­жи­вает очень огра­ни­ченный набор инструк­ций, но даёт подклю­чать полно­ценные Джаваскрипт-­функции через филь­тры.

Выглядит это так:

_config/filters.js

eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
	// Format­ting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
	return DateTime.fromJSDate(dateObj, { zone: zone || "utc" })
		.setLocale("ru")
		.toFormat(format || "MMM yyyy"); // 'апр. 2025'
	});

_includes/date-and-tags.js

<ul class="linklist post-metadata unvisitable">
	<li class="post-time linklist-­item"><time  datetime="{ { post.date | htmlD­ateString } }">{ { post.date | read­ableDate } }</time></li>

Заодно показал вам, в каком месте менять формат даты у поста.

Важ­но! Если приме­нить фильтр к объекту { { content } }, например в _includes/layoyts/post.njk, то он будет применён к отрен­де­рен­ному ХТМЛ, а не к сырому Марк­дауну  — я так один раз пого­рел, сделав расста­новщик пере­носов в виде филь­тра, а не препро­цес­сора.

addShortcode

Шорт­коды исполь­зу­ются внутри nunjucks-­синтаксиса как полно­ценные функции с пара­мет­рами и всем таким. В отличие от филь­тров, не требуют ника­кого объекта для изме­не­ния.

/eleventy.config.js

eleventyConfig.addShortcode("currentBuildDate", () => {
	return new Date().toISOString();
});

_includes/layouts/base.njk

<!doctype html>
		<!-- Эта стра­ница `{ { page.url }}` была собрана {× current­Build­Date ×} -->
		<!-- Движок: 11ty, тема: Трирема v1.0 -->

addTransform

Как препро­цес­сор, только для сгене­ри­ро­ванных ХТМЛ файлов. В Триреме исполь­зу­ется как костыль против растя­нутых и мутных изоб­ра­же­ний. Если вы хотите понять, зачем я уменьшаю размеры изоб­ра­жения в два раза и почему пиксели в CSS не равны физи­че­ским пикселям карти­нок, читайте заметку об изоб­ра­же­ниях в Триреме.

eleventyConfig.addTransform(
	"halve-­image-­dimensions",
	(content, outputPath) => {
		if (outputPath && outputPath.endsWith(".html")) {
			re­turn content.replace(
			/<img([^>]*?)\swidth="(\d+)"\sheight="(\d+)"([^>]*?)>/g,
			(_, pre, width, height, post) => {
				­const halfWidth = Math.round(Number(width) / 2);
				­const half­Height = Math.round(Number(height) / 2);
				re­turn `<img${pre} width="${halfWidth}" height="${halfHeight}"${post}>`;
				},
			);
		}
		re­turn content;
	},

addPlugin

Любой из методов выше можно доба­вить как отдельный плагин, дабы не засо­рять конфиг лишним кодом. Создайте .js файл внутри папки /_con­fig, придер­жи­вай­тесь в нём струк­туры вроде этой:

_config/markdown-it.js

import mark­downIt from "markdown-­it";
...

export default func­tion markdownItConfig(eleventyConfig) {
	eleventyConfig.setLibrary(
		"md",
		markdownIt({...});
	);
}

и добав­ляйте в конфиг импортом и методом addPlu­gin.

import mark­down­It­Config from "./_config/markdown-it.js";
...

export default async func­tion (eleventyConfig) {
	...
	eleventyConfig.addPlugin(markdownItConfig);
	...
}

Со всем остальным разбе­рё­тесь по ходу дела. ЧатГПТ тут не помош­ник, читайте доку­мен­та­цию: www.11ty.dev/docs/