Учебники

Grav — настройка темы

Январь 5, 2019

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

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

Вы можете предоставить свой собственный файл custom.css для настройки вашей темы. Тема Antimatter ссылается на файл css / custom.css с помощью Asset Manager . Если ссылка на файл CSS не найдена, Менеджер активов не добавит ссылку на HTML. Создание CSS-файла в папке css / Antimatter переопределит CSS по умолчанию. Например —

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

body a {
   color: #FFFF00;
}

Цвет ссылки по умолчанию переопределяется и устанавливается на желтый.

Custom SCSS / LESS

Другой способ предоставить пользовательский файл CSS — использовать файл custom.scss . SCSS (синтаксически удивительные таблицы стилей) — это препроцессор CSS, который позволяет эффективно создавать CSS за счет использования операторов, переменных, вложенных структур, импорта, частичных операций и дополнений. Антивещество написано с использованием SCSS.

Чтобы использовать SCSS, вам нужен компилятор SCSS. Вы можете использовать инструменты командной строки и приложения с графическим интерфейсом для установки компиляторов SCSS на любую платформу. Антиматерия использует папку scss / для размещения всех ваших файлов .scss . Скомпилированные файлы хранятся в папке css-compiled / .

Файлы SCSS следует отслеживать на наличие обновлений, которые можно выполнить с помощью следующей команды: 

scss --watch scss:css-compiled

Приведенная выше команда указывает компилятору SCSS следить за каталогом с именем scss, и всякий раз, когда папка css-compiled обновляется, компилятор SCSS должен скомпилировать ее.

Вы можете сохранить свой собственный код SCSS в файле scss / template / _custom.scss . Сохранение кода в этом файле дает много преимуществ.

  • Любое обновление из файлов SCSS и других файлов CSS компилируется в файл css-compiled / template.css

  • Вы можете получить доступ к любому из SCSS, которые используются в вашей теме, и использовать все доступные для нее переменные и дополнения.

  • Для облегчения разработки вам предоставляется доступ ко всем функциям и функциям стандартного SCSS.

Любое обновление из файлов SCSS и других файлов CSS компилируется в файл css-compiled / template.css

Вы можете получить доступ к любому из SCSS, которые используются в вашей теме, и использовать все доступные для нее переменные и дополнения.

Для облегчения разработки вам предоставляется доступ ко всем функциям и функциям стандартного SCSS.

Пример файла _custom.scss показан ниже — 

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

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

Тема Наследования

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

  • Чтобы сохранить новую тему, создайте новую папку с именем mytheme / inside / user / themes / folder.

  • Затем вам нужно создать новый YAML-файл темы под названием mytheme.yaml в папке недавно созданной / user / themes / mytheme / со следующим содержимым.

Чтобы сохранить новую тему, создайте новую папку с именем mytheme / inside / user / themes / folder.

Затем вам нужно создать новый YAML-файл темы под названием mytheme.yaml в папке недавно созданной / user / themes / mytheme / со следующим содержимым. 

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

  • Создайте файл YAML с именем blueprints.yaml в папке / user / themes / mytheme / со следующим содержимым.

Создайте файл YAML с именем blueprints.yaml в папке / user / themes / mytheme / со следующим содержимым. 

name: MyTheme
version: 1.0.0
description: "Extending Antimatter"
icon: crosshairs
author:
   name: Team Grav
   email: devs@getgrav.org
   url: http://getgrav.org

Теперь мы поймем, как определить тему blueprints.yaml, которая состоит из основных элементов. Более подробная информация может быть предоставлена ​​для определения формы для управления функциональностью формы. Файл blueprints.yaml можно изучить для получения более подробной информации по этому вопросу.

  • В вашем файле user / config / system.yaml отредактируйте страницы: theme: опция, чтобы изменить тему по умолчанию на новую тему, как показано ниже.

В вашем файле user / config / system.yaml отредактируйте страницы: theme: опция, чтобы изменить тему по умолчанию на новую тему, как показано ниже. 

pages:
   theme: mytheme

Теперь новая тема создана, и Antimatter станет основной темой для этой новой темы mytheme . Если вы хотите изменить конкретный SCSS, нам нужно настроить компилятор SCSS так, чтобы он сначала смотрел вашу тему mytheme, а затем тему Antimatter.

Используются следующие настройки —

  • Сначала скопируйте файл template.scss, который находится в папке antimatter / scss /, и вставьте его в папку mytheme / scss / . Этот файл будет содержать все вызовы @import для различных файлов, таких как template / _custom.scss и вложенные файлы.

  • Путь загрузки указывает на папку antimatter / scss /, которая содержит большое количество файлов SCSS. Чтобы запустить компилятор SCSS, вам нужно указать путь к нему, как показано ниже.

Сначала скопируйте файл template.scss, который находится в папке antimatter / scss /, и вставьте его в папку mytheme / scss / . Этот файл будет содержать все вызовы @import для различных файлов, таких как template / _custom.scss и вложенные файлы.

Путь загрузки указывает на папку antimatter / scss /, которая содержит большое количество файлов SCSS. Чтобы запустить компилятор SCSS, вам нужно указать путь к нему, как показано ниже. 

scss --load-path ../antimatter/scss --watch scss:css-compiled

  • Теперь создайте файл с именем _custom.scss в mytheme / scss / template / . Этот файл будет содержать все ваши модификации.

Теперь создайте файл с именем _custom.scss в mytheme / scss / template / . Этот файл будет содержать все ваши модификации.

Когда пользовательский файл SCSS изменяется, автоматически все файлы SCSS будут снова скомпилированы в template.css, который находится в папке mytheme / css-compiled /, и затем Grav точно ссылается на это.

40
Share: