#^eleventyСодержание
Насоветовали как очень гибкую штуку. И кажется, я склонна согласиться. Напоминает
https://thewml.github.io/, тока помладше, на другом языке, всё вот это.
Пока у себя решила только задачу переноса содержимого (не этого сайта ;)), с тем, чтоб потом смотреть, как добавлять новое.
Это
JavaScript как язык общего назначения в первую очередь.
Установка
Уже должен быть установленный npm, и это у меня есть.
Дальше настоятельно советуют ставить eleventy в проект, а не глобально. Прям слегка непривычно. :)
npm init -y
npm install @11ty/eleventy --save-dev
В результате образуется папка
node_modules и файлы
package.json,
package-lock.json.
Всё, можно начинать пользоваться, а для начала проверить:
npx @11ty/eleventy
По идее, в пустой папке должно отрапортовать что-то типа
[11ty] Wrote 0 files in 0.07 seconds (v2.0.0).
В целом эта команда для того, чтоб сделать сайт из материалов.
npx @11ty/eleventy --serve ещё и запустит сервер на localhost:8080, где можно будет посмотреть результаты.
Тупо перенести существующие файлы, чтоб теперь они были в eleventy
Завела рядом с
package.json файл
.eleventy.js. В него:
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("_src");
};
, предполагая, что собственно содержимое сайта в подкаталоге
_src.
https://www.11ty.dev/docs/copy/И тогда даж ничего не обрабатывается. Правда, чтоб всё-таки был какой-то интерес в использовании eleventy, придётся копировать более выборочно. По подпапкам, по расширениям (
eleventyConfig.addPassthroughCopy("*.jpeg");). (
чтобы было, а то чот от звездочки разметка дальше чуток подглюкивает.)
Permalink
Если до html-файлов таки добирается их обработчик по умолчанию - liquid, то условный файл
history.html превращался в
history/index.html. Что, может, и идейно правильно, но я бы предпочла оставить, как было :)
Это решилось пока только через добавление в начало копируемого файла
---
permalink: "history.html"
---
(или какое там мне нужно название).
https://www.11ty.dev/docs/permalinks/Может, более изящные способы и есть, но я их пока не знаю. Возможно, альтернатива
templateEngineOverride: false там же, но это мне влом проверять.
Теперь надо будет помаленьку разбираться, что можно делать сверх существующего :)
Обновлять eleventy
npm update @11ty/eleventy
Заметим,
npm update годится и для ситуации «склонировала себе репозиторий без папки с npm-ным всяким», чтоб npm поставил недостающее.
По ходу
- https://github.com/11ty/eleventy/issues/2725#issuecomment-1372722241 - крайне внезапным для меня оказалось, что
{{ content | safe }} дает на выходе html как есть, «рабочий», а {{ content }} — заменяет теги на всякие амперсанд-последовательности, чтоб их было видно как теги в отображении.- Как выяснилось, если «content | safe», то оказывается, это я типа пометила этот контент как безопасный, можно оставить как есть. Мне дико, конечно, для меня это история про поэтапную обработку должна бы быть.
- Всё индивидуальное для страницы, что не основной контент, по ходу, надо совать во frontmatter. Да, yaml по дефолту для этого неплохой выбор. Но так несложно доиграться до ситуации, когда frontmatter будет обширнее основной части, дааа. 2023-08-29 https://indieweb.org/frontmatter - к слову о. Ну, и понятно, отображается это в редакторе на сейчас таксебе…
- Самостоятельные фрагменты для использования в шаблонах - в инклюды. 2023-08-29
- В yaml-овой части никаких табуляций! 2023-10-19
- https://www.11ty.dev/docs/data-eleventy-supplied/ в том числе позволяет
Ярлыки:
juststarted
