Кастомизация⚓︎

Есть много способов настроить тему, и Grav действительно не ограничивает ваш творческий потенциал в этом отношении. Тем не менее, есть несколько функций и некоторые функциональные возможности, которые Grav предоставляет, чтобы сделать этот процесс проще.

Пользовательский CSS⚓︎

Самый простой способ настроить тему - предоставить свой собственный файл custom.css. Тема Quark по умолчанию предоставляет ссылку на файл css/custom.css через менеджер активов. К счастью, менеджер активов делает это за нас, и если файл не найден, ссылка не добавляется в HTML.

Однако, если вы предоставите файл с именем custom.css в папке css/, он будет взят и на него будет ссылаться. Вам просто нужно убедиться, что вы предоставили элементы CSS с достаточной специфичностью, чтобы переопределить CSS по умолчанию. Например:

custom.css

body a {
  color: #cc0000;
}

Это переопределит цвет ссылки по умолчанию и вместо него будет использоваться красный цвет.

Пользовательский SCSS/LESS⚓︎

Следующим шагом после предоставления пользовательского файла CSS является использование файла _custom.scss. Quark написан с использованием SCSS, который представляет собой препроцессор, совместимый с CSS, который позволяет более эффективно писать CSS за счёт использования переменных, вложенных структур, фрагментов, импортов, операторов и примесей.

Сначала это может показаться немного пугающим, но вы можете использовать столько или меньше SCSS, сколько захотите, и как только вы начнете, у вас возникнут проблемы с возвращением к традиционному CSS. Обещаю!

В теме Quark есть папка scss/, содержащая множество файлов .scss. Они должны быть скомпилированы в папку css-compiled/.

Вы можете создать файл с именем scss/theme/_custom.scss и импортировать его в файл theme.scss внизу, используя @import 'theme/custom';. Размещение кода в этом файле дает несколько больших преимуществ:

Полученные изменения будут скомпилированы в файл css-compiled/theme.min.css вместе со всеми остальными CSS.
У вас есть доступ ко всем переменным и добавкам, которые доступны для любого другого SCSS, используемого в теме.
У вас есть доступ ко всем стандартным функциям и функциям SCSS, облегчающим разработку.

Примером этого файла может быть:

_custom.scss

body {
  a {
    color: darken($core-accent, 30%);
  }
}

Обратной стороной этого подхода является то, что этот файл перезаписывается во время любого обновления темы, поэтому вам следует убедиться, что вы создали резервную копию любой настраиваемой работы, которую вы выполняете. Эта проблема решается с помощью наследования тем, как описано ниже.

Wellington SCSS⚓︎

Wellington это собственная оболочка для libsass, доступная как для Linux, так и для MacOS. Он обеспечивает гораздо более быстрое решение для компиляции SCSS, чем компилятор scss по умолчанию на основе Ruby. Под «быстрее» мы подразумеваем примерно в 20 раз быстрее!. Очень просто установить (через brew):

brew install wellington

Чтобы использовать это преимущество для компиляции папки scss в папку css-compiled, как в примере выше, вы можете использовать этот черновик.

Wellington это то, что мы использовали для всех тем Team Grav, и оно отлично работает!

Наследование темы⚓︎

Это предпочтительный подход к изменению или настройке темы, но он требует немного дополнительных настроек.

Основная концепция заключается в том, что вы определяете тему как базовую тему, от которой наследуете, и предоставляете только те биты, которые хотите изменить, а остальное позволяете базовой теме обрабатывать. Большим преимуществом этого является то, что вы можете более легко поддерживать базовую тему в актуальном состоянии, не влияя напрямую на настроенную унаследованную тему.

Есть два способа наследования существующей темы:

Использование интерфейса командной строки (CLI) с подключаемым модулем DevTools.
Вручную.

Наследование с использованием CLI⚓︎

Как описано в Учебнике по темам, вы можете создать новую тему, используя плагин DevTools. Но вы также можете наследовать существующую тему. Процедура проста.

Установите плагин DevTools, если это ещё не сделано.
Затем следуйте процедуре создания базовой темы, но когда скрипт предложит выбрать тип шаблона (Please choose a template type), введите inheritance («наследование»). Если Quark единственная тема, она будет отображаться как 0. Поэтому введите 0, чтобы наследовать от Quark. Будет создана ваша новая унаследованная тема.
Скопируйте все параметры из файла YAML темы, который вы наследуете (или из папки user/config/themes, если вы её настроили), вверху вновь созданного файла конфигурации YAML вашей темы: / user/themes/mytheme/mytheme.yaml.
Скопируйте раздел form из /user/themes/quark/blueprints.yaml' в/user/themes/mytheme/blueprints.yaml` для того, чтобы включить настраиваемые элементы темы в админке. (Или просто замените файл и отредактируйте его содержимое.)
Измените тему по умолчанию, чтобы использовать новую mytheme, отредактировав параметр pages: theme: в вашем файле конфигурации user/config/system.yaml:

pages:
 theme: mytheme

Наследование вручную⚓︎

Для этого вам необходимо выполнить следующие шаги:

Создайте новую папку: user/themes/mytheme для размещения вашей новой темы.
Скопируйте файл YAML темы из темы, которую вы наследуете (или из папки user/config/themes, если вы её настроили), в /user/themes/mytheme/mytheme.yaml и добавьте следующий контент (заменив user/themes/quark названием темы, которую вы наследуете):

streams:
  schemes:
    theme:
      type: ReadOnlyStream
      prefixes:
        '':
          - user/themes/mytheme
          - user/themes/quark

Скопируйте файл /user/themes/quark/blueprints.yaml в /user/themes/mytheme/blueprints.yaml, чтобы включить настраиваемые элементы темы в админку.
Измените тему по умолчанию, чтобы использовать новую mytheme, отредактировав параметр pages: theme: в вашем файле конфигурации user/config/system.yaml:

pages:
  theme: mytheme

Создайте новый файл класса темы, который можно использовать для добавления расширенной функциональности, управляемой событиями. Создайте файл user/themes/mytheme/mytheme.php:

<?php
namespace Grav\Theme;

class Mytheme extends Quark
{
    // Some new methods, properties etc.
}
?>

Теперь вы создали новую тему под названием mytheme и настроили потоки так, чтобы сначала они просматривали тему mytheme, а затем пробовали quark. По сути, Quark является базовой темой для этой новой темы.

Затем вы можете предоставить только те файлы, которые вам нужны, включая JS, CSS или даже модификации файлов шаблонов Twig, если хотите.

Использование SCSS⚓︎

Чтобы изменить определённые файлы SCSS, нам нужно использовать небольшую конфигурацию, чтобы он знал, что сначала нужно искать в вашем новом местоположении mytheme, а затем - quark. Для этого требуется несколько вещей.

Во-первых, вам нужно скопировать основной файл SCSS из quark, который содержит все вызовы @ import для различных субфайлов. Итак, скопируйте файл theme.scss из quark/ scss/ в папку mytheme/scss/.
Находясь внутри файла theme.scss, измените начало всех строк импорта на @import '/quark/scss/theme/';, чтобы он знал, что нужно использовать файлы из Quark. Так, например, первая строка будет @import '/quark/scss/theme/variables';.
Добавьте @import 'theme/custom'; в самый конец файла theme.scss.
Следующим шагом является создание файла, расположенного по адресу mytheme/scss/theme/_custom.scss. Вот куда пойдут ваши модификации.
Скопируйте файлы gulpfile.js иpackage.json в базовую папку новой темы.

Чтобы скомпилировать новый scss для mytheme, вам нужно будет открыть терминал и перейти в папку темы. Quark использует gulp для компиляции sass, поэтому вам понадобятся установленные и пряжа для зависимостей. Запустите npm install -g gulp, yarn install, а затем gulp watch. Теперь любые изменения, внесенные в файлы, будут перекомпилированы.