Блог
Заметки, статьи, инструкции
Страница 4
Реализация функции Cycler из Nunjucks в шаблонах Astro
В шаблонизаторе Nunjucks имеется очень полезная функция - Cycler. При вёрстке сайта на Astro мне очень недоставало этой функции в шаблонах .astro. Но Astro тем и хорош, что позволяет, без особых усилий, самостоятельно добавить в шаблонизатор любую недостающую функцию...
Как в Astro программно задать Layout для всех файлов Markdown в коллекции
Для вставки статьи, написанной c помощью Markdown, в шаблон страницы сайта на Astro, в документации предлагается указать Layout в секции Frontmatter файла Markdown. Но у этого способа есть существенный недостаток - корректный Layout необходимо явно указать во всех файлах Markdown и, при этом, не ошибиться. А если таких файлов сотни или даже тысячи? Можно не прописывать Layout в каждом файле Markdown, а указать его один раз для всех файлов Markdown в коллекции...
Как удалить неиспользуемый CSS при создании сайта на Astro
При создании сайта с использованием библиотек построения интерфейса разработчик часто сталкивается с тем, что значительная часть подключённого CSS остаётся невостребованной. Например, сжатый CSS одной из самых популярных библиотек Bootstrap (на текущий момент версия 5.2.3) весит 195 Кбайт. На примере этого сайта, после удаления неиспользованного CSS осталось менее 25 Кбайт, что в 8 раз меньше первоначального размера...
Подключение Tailwind CSS к проекту на Eleventy
Tailwind CSS работает, сканируя все ваши HTML-файлы, компоненты JavaScript и любые другие шаблоны на предмет имён классов, генерируя соответствующие стили и затем записывая их в статический CSS-файл. Это означает, что в конечный CSS-файл попадают не все стили Tailwind, а только те, которые были задействованы в процессе вёрстки. Это минимизирует объем загружаемых данных при открытии сайта и благоприятно влияет на его SEO-оптимизацию...
Создание адаптивных изображений при рендеринге Markdown в Eleventy
Адаптивные изображения – это набор методов, используемых для загрузки изображения подходящего размера, в зависимости от разрешения устройства, ориентации, размера экрана, сетевого подключения и макета страницы. Браузер не должен растягивать изображение, чтобы оно соответствовало макету страницы, а его загрузка не должна приводить к потере времени и трафика. Это улучшает взаимодействие с посетителями сайта, поскольку изображения загружаются быстро и выглядят чёткими для человеческого глаза...