Я давно был поклонником Джекила . Он имеет некоторые недостатки и не всегда является лучшим инструментом для работы, однако в некоторых ситуациях он может быть отличным инструментом. Я потерял счет тому, сколько сайтов я построил с ним.
Недавно я создал еще один сайт для Jekyll, на этот раз для упрощенного JavaScript Jargon, и я столкнулся с не столь нетипичной проблемой — включением стилей в <head>
Необходимость
Возможно, вы слышали о критических CSS. Идея, лежащая в основе этой концепции, заключается в том, чтобы как можно скорее предоставить браузеру критические стили (отвечающие за внешний вид верхней и основной областей содержимого страницы), чтобы не было задержки перед доступом к содержимому.
Существует общее правило, которое гласит, что хорошо отправлять то, что необходимо для рендеринга верхней части страницы, размером менее 14 КБ, потому что это примерно столько, сколько сервер может обработать за один прием. Google PageSpeed Insights дает больше информации об этом в своей документации , так что не стесняйтесь посмотреть, если вы хотите знать, почему это работает таким образом.
В этом случае, если ваш CSS достаточно мал (как, например, для SJSJ ), вы можете встроить все это в <head> Это не супер распространено, но когда это так, это довольно рад.
Вернуться к Джекилу
Поэтому я хотел включить стили в <style> Моей первой ставкой было создать сайт, а затем переместить сгенерированный файл CSS в папку _includes{% include %} Это работало, но было немного утомительно как процесс.
Затем я понял, что если мне удастся встроить все мои стили в заголовок страницы, это было потому, что у меня их было не так много, и я мог бы определенно решить проблему наоборот.
Вместо того, чтобы перемещать мои стили внутри папки _includes Тогда я мог бы импортировать файл CSS внутри заголовка документа.
/* _includes/styles.css */
.foo-bar {
color: pink;
}
А потом:
<!-- _includes/head.html -->
<style>
{% include styles.css %}
</style>
Тада! Это дает нам именно то, что мы хотим:
<!-- … -->
<style>
.foo-bar {
color: pink;
}
</style>
<!-- … -->
А как насчет Sass?
Хорошо, вы можете подумать: «Да, но это означает, что мы больше не можем использовать Sass». Да и нет. По сути, мы полностью вывезли весь трубопровод Sass из Джекилла, но путь еще есть.
Если вы когда-нибудь читали документацию от Jekyll , вы могли заметить, что есть фильтр scssifysassify Документация говорит, что это позволяет нам:
Преобразовать строку в формате Sass или SCSS в CSS.
Ницца. Это означает, что мы все еще можем использовать Sass, добавив в него весь наш файл Единственная проблема заключается в том, что мы не можем применить фильтры к блоку, как {% include %} Хитрость заключается в том, чтобы захватить содержимое файла в переменной (благодаря {% capture %}
<!-- _includes/head.html -->
{% capture styles %}
{% include styles.css %}
{% endcapture %}
<style>
{{ styles | scssify }}
</style>
Тада (снова)!
Как насчет минификации?
Хорошая вещь с этим фильтром scssify_config.yml Таким образом, если вы установили compressed
# _config.yml
sass:
style: compressed
Тада (еще раз)!
<!-- … -->
<style>
.foo-bar{color:pink}
</style>
<!-- … -->
Последние мысли
Как видите, в этой статье не было ничего революционного. Тем не менее, я должен сказать, что мне никогда не приходило в голову, что я мог бы просто написать свои стили в папке _includes
Конечно, вся эта идея может не сработать при работе с таблицей стилей, размер которой превышает 14 КБ, где вам необходимо извлечь критический CSS с помощью какого-либо инструмента . Но для маленьких страниц и сайтов — это очень удобно!
Если вы хотите посмотреть, как это работает в реальном проекте, вы можете проверить файлы в репозитории SJSJ :
Надеюсь, это поможет, и счастливого кодирования!