eleventy
Насоветовали как очень гибкую штуку. И кажется, я склонна согласиться. Напоминает https://thewml.github.io/, тока помладше, на другом языке, всё вот это.
Пока у себя решила только задачу переноса содержимого (не этого сайта ;)), с тем, чтоб потом смотреть, как добавлять новое.
Это JavaScript как язык общего назначения в первую очередь.
- https://github.com/11ty/eleventy-base-blog - кажется, хорошая штука для старта, думаю поиграться.
- https://github.com/binyamin/eleventy-garden - в тему Digital garden.
- https://mozilla.github.io/nunjucks/ - один из templating languages. Кажется, собираюсь использовать его. Вот и https://andrewborstein.com/blog/moving-my-blog-to-eleventy-part-3/ так собирается. Тоже в нехватке инфы о том, как сравнить, что лучше и вообще :) https://www.11ty.dev/docs/languages/nunjucks/
- https://www.11ty.dev/docs/data-frontmatter-customize/ - занятное дополнение
- https://www.11ty.dev/docs/languages/nunjucks/ - про него на eleventy-сайте.
- https://www.11ty.dev/docs/config/ - о конфигурировании.
- https://www.reddit.com/r/eleventy/ - реддит. Хотя реддит сейчас все более таксебе место…
- https://learneleventyfromscratch.com/
- https://www.freecodecamp.org/news/learn-eleventy/ - посмотреть, как там сделано меню
Установка
Уже должен быть установленный 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
- https://www.11ty.dev/docs/collections/ - коллекции. Не из этого ли будет меню?
- https://www.11ty.dev/docs/layouts/ - как писать шаблоны страничек. По ходу, тут до фига всего кладётся либо в frontmatter, либо в файлы данных.
- https://www.11ty.dev/docs/plugins/
- https://www.11ty.dev/docs/plugins/navigation/ - плагин навигации, но вроде есть и более развесистый в плагинах от сообщества.
- https://www.11ty.dev/docs/plugins/image/ - для обработки картинок при сборке сайта
- https://www.11ty.dev/docs/plugins/rss/ - плагин для rss
- https://www.11ty.dev/docs/shortcodes/ - shortcodes, очевидно :)
- https://www.11ty.dev/docs/filters/slugify/ - по ходу, кириллические имена-названия могут оказаться слегка проблематичны, надо проверять.
- https://www.npmjs.com/package/eleventy-plugin-gen-favicons - типа правильный набор фавиконок.
- https://www.11ty.dev/docs/templates/
- https://jamstackthemes.dev/ssg/eleventy/ Eleventy Themes (31)
- https://www.11ty.dev/#built-with-eleventy - что бывает.
- https://github.com/topics/eleventy-template
- https://github.com/topics/11ty-template
- https://github.com/topics/eleventy-sample
- https://github.com/topics/11ty-sample
- https://github.com/topics/eleventy-theme
- https://github.com/topics/11ty-theme - ну, тут тока 3 :)
- https://github.com/topics/eleventy-starter
- https://github.com/topics/11ty-starter
- https://github.com/topics/eleventy-website
- https://github.com/topics/11ty-website
- https://github.com/topics/eleventy
- https://github.com/topics/11ty
- https://github.com/topics/digital-garden - вбоквеллом, но на 11ty есть темы именно про digital garden.
- https://github.com/binyamin/eleventy-garden как минимум
- https://11ty.rocks/posts/introduction-webc/ - ещё один язык шаблонов.
11ty и indieweb
11ty и org-mode
- https://beepboop.site/posts/adding-org-mode/
- https://github.com/sachac/ox-11ty/ - Eleventy (11ty) export for Org