Учебники

Грав — Основы Темы

Январь 5, 2019

Темы контролируют внешний вид вашего сайта Grav. Темы в Grav создаются с помощью мощного движка Twig Templating .

Содержательные страницы и шаблоны веток

Страницы, которые вы создаете, ссылаются на определенный файл шаблона по имени или путем установки переменной заголовка шаблона для страницы. Использование имени страницы рекомендуется для более простого обслуживания.

После установки пакета Grav Base вы найдете файл defauld.md в папке user / pages / 01.home. Имя файла, то есть default, говорит Grav, что эту страницу следует отображать с помощью шаблона ветки default.html.twig, который находится в папке themes / <mytheme> / templates .

Например, если у вас есть файл с именем contact.md , он будет отображаться с шаблоном ветки как themes / <mytheme> /templates/contact.html.twig .

Тематическая организация

В следующих разделах мы обсудим организацию темы, то есть ее определение, конфигурацию и многое другое.

Определение и конфигурация

Информация о теме будет определена в файле user / themes / antimatter / blueprints.yaml, а определения форм, которые будут использоваться на панели администрирования, предоставляются по желанию. Вы увидите следующее содержимое в файле user / themes / antimatter / blueprints.yaml для темы Antimatter . 

name: Antimatter
version: 1.6.0
description: "Antimatter is the default theme included with **Grav**"
icon: empire
author:
   name: Team Grav
   email: devs@getgrav.org
   url: http://getgrav.org
homepage: https://github.com/getgrav/grav-theme-antimatter
demo: http://demo.getgrav.org/blog-skeleton
keywords: antimatter, theme, core, modern, fast, responsive, html5, css3
bugs: https://github.com/getgrav/grav-theme-antimatter/issues
license: MIT

form:
   validation: loose
   fields:
      dropdown.enabled:
         type: toggle
         label: Dropdown in navbar
         highlight: 1
         default: 1
         options:
            1: Enabled
            0: Disabled
         validate:
            type: bool

Чтобы использовать параметры конфигурации темы, необходимо указать параметры по умолчанию в файле с именем user / themes / <mytheme> / <mytheme> .yaml .

пример 

enable: true

Темы и Плагины События

Способность темы взаимодействовать с Grav через архитектуру плагинов — еще одна мощная особенность Grav. Для этого просто создайте файл user / themes / <mytheme> / <mytheme> .php (например, antimatter.php для стандартной темы Antimatter) и используйте следующий формат. 

<?php
namespace Grav\Theme;

use Grav\Common\Theme;

class MyTheme extends Theme {
   public static function getSubscribedEvents() {
      return [
         'onThemeInitialized' => ['onThemeInitialized', 0]
      ];
   }
   public function onThemeInitialized() {
      if ($this->isAdmin()) {
         $this->active = false;
         return;
      }
      
      $this->enable([
         'onTwigSiteVariables' => ['onTwigSiteVariables', 0]
      ]);
   }
   public function onTwigSiteVariables() {
      $this->grav['assets']
         ->addCss('plugin://css/mytheme-core.css')
         ->addCss('plugin://css/mytheme-custom.css');

      $this->grav['assets']
         ->add('jquery', 101)
         ->addJs('theme://js/jquery.myscript.min.js');
   }
}

Шаблоны

Структура темы Grav не имеет установленных правил, за исключением того, что в шаблонах / папках должны быть связаны шаблоны веточек для каждого типа страниц контента.

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

Предположим, что вы хотите поддерживать модульный шаблон в своей теме, вам нужно создать модульную папку / папку и хранить внутри нее файлы шаблонов веток. Если вы хотите поддерживать формы, вам следует создать форму / папку и хранить в ней шаблоны форм.

светокопий

Чтобы определить формы для параметров и конфигурации для каждого отдельного файла шаблона, используются чертежи / папки. Они не будут доступны для редактирования через панель администратора и могут использоваться по желанию. Тема полностью функциональна без папки с чертежами .

SCSS / МЕНЬШЕ / CSS

Если вы хотите разработать сайт с помощью SASS или LESS, то вам нужно создать подпапки в папке user / themes / <mytheme> / scss / или менее /, если вы хотите LESS вместе с папкой css /.

Для автоматически сгенерированных файлов, скомпилированных из SASS или LESS, используется папка css-compiled / . В теме Antimatter используется scss- вариант SASS.

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

  • В корне темы введите приведенную ниже команду для запуска сценария оболочки scss.

В корне темы введите приведенную ниже команду для запуска сценария оболочки scss. 

$ ./scss.sh
  • Введите следующую команду, чтобы запустить ее напрямую. 
$ scss --sourcemap --watch scss:css-compiled

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

Другие папки

Рекомендуется создавать отдельные папки images /, fonts / и js / в папке user / themes / <mytheme> / для любых изображений, шрифтов и файлов JavaScript, используемых в вашей теме.

Пример темы

Общая структура папок темы Antimatter, о которой мы говорили, показана ниже.

48
Share: