Стили на сайте - это сосредоточение творческой свободы. Назначение всех стилей - придать страницам сайта совершенный вид, сделать их красивыми, простыми, функциональными. В Jekyll работать со стилями не сложно, требуется лишь небольшая предварительная подготовка. В этой статье добавим немного стилей на сайт, зададим подсветку навигации.
Исходные данные
- Имеем рабочую навигацию на сайте. (Вот там добавлял навигацию.)
- При необходимости по прошлой статье исходники как обычно 4-includes-nav.
- А также все что будет в этой статье содержится в 5-add-css.
Добавление стилей без использования SASS
Если не использовать никаких CSS препроцессоров, то добавление стилей на сайт задача почти тривиальная. Помещаем файл стилей в проект - можно создать файл как в корне проекта, так и в своей папке. Например, добавлю css/main.css, там опишем несколько простых селекторов.
body {
background-color: rgb(209, 227, 233);
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
a {
text-decoration: none;
}
.active {
background: rgb(74, 74, 143);
color: rgb(255, 255, 255);
}Из проделанных операций: поменяли фон, изменили расположение навигации, убрали подчеркивание в ссылках, оформили активную вкладку навигации.
Чтобы теперь задействовать стили на сайте, в файле шаблона в <head> добавим ссылку на main.css. В текущем примере это будет выглядеть следующим образом.
<!-- default.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Jekyll блог</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<header>
{% include nav.html %}
</header>
<main>
{{ content }}
</main>
</body>
</html>При этом раскладе будут работать все прописанные стили, кроме селектора класса .active, поскольку он нигде не задействован в HTML коде.
По названию класса можно догадаться, что этим стилем будет наделяться активная в данный момент вкладка нашего меню. Соответственно потребуется произвести изменения в HTML коде файла includes/nav.html. Суть этих изменений будет заключаться в следующем: ссылке присваивается класс .active, если в данный момент в браузере открыт адрес именно этой ссылки. Все условия для проверки этих требований будут выполняться с помощью тэгов liquid. (еще раз приведу ссылку на документацию).
<!-- nav.html -->
<nav>
<ul>
<li><a class="{% if page.url == '/' %} active {% endif %}" href="/">Новости</a></li>
<li><a class="{% if page.url == '/biography' %} active {% endif %}" href="/biography">Биография известных космонавтов</a></li>
<li><a class="{% if page.url == '/media' %} active {% endif %}" href="/media">Медиа</a></li>
<li><a class="{% if page.url == '/about' %} active {% endif %}" href="/about">Информация о сайте</a></li>
</ul>
</nav>В результате должен обновиться внешний вид сайта. Выглядеть все будет как на следующем скриншоте.
Добавление стилей с использованием SASS
Jekyll также поддерживает SASS при написании стилей. Чтобы Jekyll обработал ваш sass файл со стилями, в шапке файла необходимо разместить две линии, каждая по три тире длинной.
---
---
/* start content with SASS*/Файл будет обработан и помещен в такую же директорию, из которой был взят. Например, файл css/main.scss будет сгенерирован в css/main.css.
Если предполагается работа с несколькими файлами .scss, то их всех нужно размещать в папке _sass по умолчанию, а в главном файле использовать выражения @import для подгрузки их из папки _sass. Изменить расположение по умолчанию можно, указав в _config.yml следующее:
sass:
sass_dir: _sassПовторюсь - эта папка только для файлов, которые будут подгружаться в главный файл стилей посредством @import. Более наглядно на практике это можно посмотреть на этом примере или же в исходниках kiviok.
Итог
Считаю, что по стилям Jekyll дает все что нужно разработчику. То есть использовать сторонние системы сборки проектов и компиляторы нет острой необходимости. Именно с Jekyll начал изучать SASS, пока разумеется задействую все возможности по минимуму, но со временем и с опытом думаю по достоинству оценю всю пользу и преимущества этого препроцессора.