Цифровой садик - приветственная

Цифровой садик - приветственная | Полный список всего, что тут есть | RSS | Подписаться через follow.it

01.09.2023

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 - к слову о. Ну, и понятно, отображается это в редакторе на сейчас таксебе…

Ссылки про запас

Собственно 11ty

11ty и org-mode

Ярлыки: juststarted

Если у вас есть мысли, комментарии, предложения или отклики по поводу этой страницы или этого цифрового сада в целом, напишите мне сообщение на agnessa@agnessa.pp.ru. Мне ооочень интересно!

Задонатить.


An IndieWeb Webring 🕸💍