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

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

09.01.2024

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/ Может, более изящные способы и есть, но я их пока не знаю. Мейби permalink: "{{ page.filePathStem }}.html" куда-то в layouts или templates. Или в спецуевый файлик в каталоге? https://www.11ty.dev/docs/data-eleventy-supplied/#filepathstem – про то, что будет в этой переменной.

https://www.11ty.dev/docs/data-eleventy-supplied/#changing-your-project-default-permalinks — уф, самое норм решение тут.

eleventyConfig.addGlobalData("permalink", () => {
    return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
  });

Теперь надо будет помаленьку разбираться, что можно делать сверх существующего :)

Обновлять eleventy

npm update @11ty/eleventy

Заметим, npm update годится и для ситуации «склонировала себе репозиторий без папки с npm-ным всяким», чтоб npm поставил недостающее.

По ходу

  • https://github.com/11ty/eleventy/issues/2725#issuecomment-1372722241 - крайне внезапным для меня оказалось, что {{ content | safe }} дает на выходе html как есть, «рабочий», а {{ content }} — заменяет теги на всякие амперсанд-последовательности, чтоб их было видно как теги в отображении.
    • Как выяснилось, если «content | safe», то оказывается, это я типа пометила этот контент как безопасный, можно оставить как есть. Мне дико, конечно, для меня это история про поэтапную обработку должна бы быть.
    • https://www.11ty.dev/docs/layouts/#prevent-double-escaping-in-layouts — о похожем для разных template languages.
  • Всё индивидуальное для страницы, что не основной контент, по ходу, надо совать во 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/ в том числе позволяет <meta name="generator" content="{{ eleventy.generator }}"> 2023-10-19. Похожим образом можно и даты: https://www.11ty.dev/docs/dates/
  • Прикольная штука для навигации https://www.11ty.dev/docs/plugins/navigation/, но пока в душе не понимаю, как там добавить отсебятины, чтоб сделать в одну строчку и ссылки на страницы коллекции, и ссылки на отдельные заголовки одной из страниц.

Про устройство проекта

Конфигурационные файлы

https://www.11ty.dev/docs/config/

  • .eleventy.js в корне проекта. Самый основной конфиг.
    В нем, в числе прочего, указывается, где что искать. Каталог источников (в том числе layouts, includes и data могут быть в отдельных подкаталогах) и каталог результатов.
  • при установке eleventy образуются каталог node_modules и файлы package.json и package-lock.json. Node-modules, как и каталог с результатами – хранить не обязательно, если есть интернет и исходные данные.
  • там же могут жить всякие настроечные файлы для редактора, .git и прочие полезности, которые нужны, но не исходник сайта непосредственно.

Страницы контента. В принципе, можно мыслить как «шаблоны самих себя» :)

  • В начале frontmatter, который по умолчанию yaml, но может быть json, js (JavaScript object literals in front matter) и другие варианты — https://www.11ty.dev/docs/data-frontmatter/
    • Если заморочиться сильнее, то https://www.11ty.dev/docs/data-frontmatter-customize/ говорит, что eleventy использует gray-matter npm package, и можно сделать уйму всего интересного с учетом этого. В том числе использовать javascript в более свободном виде. Использовать toml. Вроде бы даже определить свои «языки» для этого.
      • Можно указать разделитель, чтобы получить excerpts from content, то, что позволяет начало страницы до разделителя как-то иначе показывать (и мне теперь интересно, насколько реально в странице со списком записей из блога показывать кроме названия еще и такой excerpt, если он есть). Мне такая возможность помнится еще по вордпрессу, кажется приятной.
    • permalink and eleventyComputed front matter values can contain variables and shortcodes like you would use in the body of your templates. If you need to use variables or shortcodes in other front matter values, use eleventyComputed to set them.
    • Можно задать вручную язык шаблона для обработки конкретно этого файла, например templateEngineOverride: njk, а templateEngineOverride: false заставит скопировать содержимое без изменений.
  • Дальше основное содержание. Ряд вариантов языков. Вроде бы, можно указать свой и обработчик для него. https://www.11ty.dev/docs/languages/custom/.

Шаблоны-макеты

https://www.11ty.dev/docs/layouts/ – «макет» страницы.

  • You can use any template language in your layout file—it doesn’t need to match the template language of the content: an ejs template can use a njk layout.
  • Layouts can contain their own front matter data! It’ll be merged with the content’s data on render. Content data takes precedence, if conflicting keys arise.
  • https://www.11ty.dev/docs/layouts/#layout-aliasing - как сказать, что layout, указанный во frontmatter файла, означает, что надо обращаться к вот этому файлу с layout-ом. Условно, там указано post, и с этим надо ходить в posts-from-my-very-old-blog.njk. :))
  • Из них можно делать цепочку независимо от возможностей конкретного языка шаблонов — https://www.11ty.dev/docs/layout-chaining/. Есть одно место для вставки содержимого, которое content. И eleventy как-то смерживает данные из frontmatter-ов, куда тож много что можно засунуть :) Ну, и возможности используемого языка никуда не деваются :))

Файлы данных

  • https://www.11ty.dev/docs/data-computed/ — специфическая штука, которую можно засунуть в js-файлы, и оно будет приоритетно. Типа, вычисляем недостающее из имеющегося — вот так.
  • Глобальные, применяются ко всему проекту. https://www.11ty.dev/docs/data-global/. Но находятся на последнем месте по приоритету в «каскаде». Типа, если ничего не нашлось приоритетнее, то берем отсюда.

    • «One way to create global data is through global data files: JSON and JavaScript files placed inside of the global data folder. The global data folder is placed inside the project's input directory (set by the dir.input configuration option), and the name of the global data folder is set by the dir.data configuration option (_data by default). All *.json and module.exports values from *.js files in this directory will be added into a global data object available to all templates.»
    • https://www.11ty.dev/docs/data-global-custom/ «global data can be added to the Eleventy config object using the addGlobalData method. This is especially useful for plugins. The first value of addGlobalData is the key that will be available to your templates and the second value is the value of the value returned to the template». На странице есть ряд примеров — значение, функция, promise, асинхронная функция. Чуть приоритетнее предыдущих, кажется.
    • Каталожные. Относятся к содержимому конкретного каталога. Типа, к условному posts/subdir/my-first-blog-post.md будут относиться posts/subdir/subdir.11tydata.js и posts/posts.11tydata.js, аналогично для *.11tydata.json и *.json. Ближе к файлу — приоритетнее.
    • Околофайловые. Относятся к одноименному файлу. Типа, к условному posts/subdir/my-first-blog-post.md можно поскладывать всякого интересного в файлы рядышком posts/subdir/my-first-blog-post.11tydata.js, posts/subdir/my-first-blog-post.11tydata.json, posts/subdir/my-first-blog-post.json. Приоритетнее только то, что внутри и в шаблоне-layout файла. :)

Папка результата

Содержимое образуется в ней. Кажется, временами стоит чистить от того, что не нужно.


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

Задонатить.


An IndieWeb Webring 🕸💍