Grav - учебник по теме

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

антивещество

При установке базового пакета Grav устанавливается тема Antimatter по умолчанию, в которой используется Nucleus (простой базовый набор стилей CSS). Nucleus — это легкий CSS-фреймворк, содержащий основные стили CSS и разметку HTML, которые придают уникальный внешний вид.

начальная загрузка

Давайте создадим тему, которая использует популярный фреймворк Bootstrap . Bootstrap — это популярная платформа HTML, CSS и JS с открытым исходным кодом, позволяющая быстрее и проще создавать интерфейсные веб-разработки.

Следующие шаги описывают создание темы —

Шаг 1: Настройка базовой темы

Как мы изучали в главе « Основы темы», в теме Grav есть несколько ключевых элементов, которые необходимо соблюдать, чтобы создать новую тему.

После установки базового пакета Grav создайте папку с именем bootstrap в папке user / themes, как показано ниже.

После установки базового пакета Grav создайте папку с именем bootstrap в папке user / themes, как показано ниже.

Внутри папки user / themes / bootstrap создайте css /, fonts /, images /, js / и templates /, как показано ниже.

Внутри папки user / themes / bootstrap создайте css /, fonts /, images /, js / и templates /, как показано ниже.

Создайте файл темы с именем bootstrap.php в вашей папке user / themes / bootstrap и вставьте в него следующее содержимое.

Создайте файл темы с именем bootstrap.php в вашей папке user / themes / bootstrap и вставьте в него следующее содержимое.

<?php
namespace Grav\Theme;
use Grav\Common\Theme;
class Bootstrap extends Theme {}

Теперь создайте файл конфигурации темы bootstrap.yaml в папке themes / bootstrap и запишите в него следующее содержимое.

Теперь создайте файл конфигурации темы bootstrap.yaml в папке themes / bootstrap и запишите в него следующее содержимое.

enable: true

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

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

Шаг 2: Добавить Bootstrap

Чтобы создать тему начальной загрузки, вы должны включить в нее Bootstrap. Поэтому вам нужно скачать последнюю версию Bootstrap, нажав на эту ссылку, как показано ниже.

Разархивируйте пакет, и вы увидите три папки, а именно: css, fonts и js. Теперь скопируйте содержимое этих 3 папок в папки с одинаковыми именами в user / themes / bootstrap, которые были созданы ранее.

Шаг 3: Базовый шаблон

Как мы изучали в предыдущей главе, содержимое хранится в файле default.md, который инструктирует Grav искать шаблон рендеринга с именем default.html.twig . Этот файл включает в себя все, что вам нужно для отображения страницы.

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

Выполните следующие шаги, чтобы создать простой базовый шаблон Bootstrap —

Создайте папку с именем partials в папке user / themes / bootstrap / templates . Это используется для хранения нашего базового шаблона.
В папке partials создайте файл base.html.twig со следующим содержимым.

Создайте папку с именем partials в папке user / themes / bootstrap / templates . Это используется для хранения нашего базового шаблона.

В папке partials создайте файл base.html.twig со следующим содержимым.

<!DOCTYPE html>
<html lang = "en">
   <head>
      {% block head %}
      <meta charset = "utf-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      {% if header.description %}
      <meta name = "description" content = "{{ header.description }}">
      {% else %}
      <meta name = "description" content = "{{ site.description }}">
      {% endif %}
      {% if header.robots %}
      <meta name = "robots" content = "{{ header.robots }}">
      {% endif %}
      <link rel = "icon" type = "image/png" href="{{ theme_url }}/images/favicon.png">

      <title>{% if header.title %}{{ header.title }} | {% endif %}{{ site.title }}</title>

      {% block stylesheets %}
         {# Bootstrap core CSS #}
         {% do assets.add('theme://css/bootstrap.min.css',101) %}

      {# Custom styles for this theme #}
         {% do assets.add('theme://css/bootstrap-custom.css',100) %}

         {{ assets.css() }}
      {% endblock %}

      {% block javascripts %}
         {% do assets.add('https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', 101) %}
         {% do assets.add('theme://js/bootstrap.min.js') %}

         {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
            {% do assets.add('https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js') %}
            {% do assets.add('https://oss.maxcdn.com/respond/1.4.2/respond.min.js') %}
         {% endif %}

         {{ assets.js() }}
      {% endblock %}

      {% endblock head %}
   </head>
      <body>
         {# include the header + navigation #}
         {% include 'partials/header.html.twig' %}

         <div class = "container">
            {% block content %}{% endblock %}
         </div>

         <div class = "footer">
            <div class = "container">
               <p class = "text-muted">Bootstrap Theme for <a href = "http://getgrav.org">Grav</a></p>
            </div>
         </div>
      </body>
   {% block bottom %}{% endblock %}
</html>

Шаг 4: сломать его

Давайте посмотрим, как работает код в файле base.html.twig, как показано ниже.

Синтаксис {% block head%} {% endblock head%} используется для определения области в базовом шаблоне Twig. Головка внутри {% endblock head%} является необязательной.
Оператор if проверяет, установлено ли мета-описание в заголовках страниц или нет. Если не установлен, то шаблон должен отображаться с использованием site.description, как определено в файле user / config / site.yaml .
Путь к текущей теме определяется переменной theme_url .
Синтаксис {% do assets.add (‘theme: //css/bootstrap.min.css’,101)%} используется для использования диспетчера активов . Theme: // представляет текущий путь к теме, а 101 представляет порядок, в котором более высокое значение идет первым, за которым следует более низкое значение. Мы также можем предоставить ссылки на CDN явно как —

Синтаксис {% block head%} {% endblock head%} используется для определения области в базовом шаблоне Twig. Головка внутри {% endblock head%} является необязательной.

Оператор if проверяет, установлено ли мета-описание в заголовках страниц или нет. Если не установлен, то шаблон должен отображаться с использованием site.description, как определено в файле user / config / site.yaml .

Путь к текущей теме определяется переменной theme_url .

Синтаксис {% do assets.add (‘theme: //css/bootstrap.min.css’,101)%} используется для использования диспетчера активов . Theme: // представляет текущий путь к теме, а 101 представляет порядок, в котором более высокое значение идет первым, за которым следует более низкое значение. Мы также можем предоставить ссылки на CDN явно как —

{% do assets.addCss('http://fonts.googleapis.com/css?family = Open + Sans') %}

или же,

{% do assets.addJs(' https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js') %}

Все теги JavaScript и теги ссылок CSS отображаются шаблоном при выполнении вызова {{assets.css ()}} или {{assets.js ()}} соответственно.
Синтаксис {# … #} используется для написания комментариев в Twig.
Для включения другого шаблона Twig используется тег {% include ‘partials / header.html.twig’%} .
Содержимое шаблона предоставляется тегом {% block content%} {% endblock%} .
Чтобы добавить пользовательскую инициализацию JavaScript или аналитические коды, тег {% block bottom%} {% endblock%} используется в качестве заполнителя для шаблонов.

Все теги JavaScript и теги ссылок CSS отображаются шаблоном при выполнении вызова {{assets.css ()}} или {{assets.js ()}} соответственно.

Синтаксис {# … #} используется для написания комментариев в Twig.

Для включения другого шаблона Twig используется тег {% include ‘partials / header.html.twig’%} .

Содержимое шаблона предоставляется тегом {% block content%} {% endblock%} .

Чтобы добавить пользовательскую инициализацию JavaScript или аналитические коды, тег {% block bottom%} {% endblock%} используется в качестве заполнителя для шаблонов.

Шаг 5: Шаблон заголовка

Когда выполняется {% include ‘partials / header.html.twig’%} , механизм рендеринга Twig ищет шаблон Twig. Поэтому создайте файл шаблона header.html.twig в папке user / themes / bootstrap / templates / partials со следующим содержимым.

<nav class = "navbar navbar-default navbar-inverse navbar-static-top" role = "navigation">
   <div class = "container">
      <div class = "navbar-header">
         <button type = "button" class = "navbar-toggle"
            data-toggle = "collapse" data-target = ".navbar-collapse">
               <span class = "sr-only">Toggle navigation</span>
               <span class = "icon-bar"></span>
               <span class = "icon-bar"></span>
               <span class = "icon-bar"></span>
         </button>
         <a class = "navbar-brand" href = "#">Grav</a>
      </div>
      
      <div class = "navbar-collapse collapse">
         <ul class = "nav navbar-nav navbar-right">
            {% for page in pages.children %}
            {% if page.visible %}
            {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
            <li class = "{{ current_page }}"><a href = "{{ page.url }}">{{ page.menu }}</a></li>
            {% endif %}
            {% endfor %}
         </ul>
      </div>
      
   </div>
</nav>

Приведенный выше код создает панель навигации и автоматически отображает все пункты меню при создании новой страницы в папке user / pages .

Шаг 6 — Шаблон по умолчанию

Каждый элемент содержимого имеет определенное имя файла, например default.md, которое инструктирует Grav искать файл шаблона с именем default.html.twig . Теперь давайте создадим файл default.html.twig в вашей папке user / themes / bootstrap / templates / со следующим содержимым.

{% extends 'partials/base.html.twig' %}
{% block content %}
   {{ page.content }}
{% endblock %}

Приведенный выше файл default.html.twig расширяет partials / base.html.twig и указывает базовому шаблону использовать {{page.content}} для блока контента .

Шаг 7: Тема CSS

В файле partials / base.html.twig мы ссылались на пользовательскую тему css с помощью assets.add (‘theme: //css/bootstrap-custom.css’,100) , в которой хранится любой пользовательский CSS, используемый на вашем сайте.

Теперь давайте создадим файл bootstrap-custom.css в папке user / themes / bootstrap / css со следующим содержимым:

/* Restrict the width */
.container {
   width: auto;
   max-width: 960px;
   padding: 0 12px;
}

/* Place footer text center */
.container .text-muted {
   margin: 18px 0;
   text-align: center;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
   position: relative;
   min-height: 80%;
}

body {
   /* Margin bottom by footer height */
   margin-bottom: 60px;
}

.footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 50px;
   background-color: #dcdcdc;
}

/* Typography */
/* Tables */
table {
   width: 100%;
   border: 1px solid #f0f0f0;
   margin: 30px 0;
}

th {
   font-weight: bold;
   background: #f9f9f9;
   padding: 5px;
}

td {
   padding: 5px;
   border: 1px solid #f0f0f0;
}

/* Notice Styles */
blockquote {
   padding: 0 0 0 20px !important;
   font-size: 16px;
   color: #666;
}

blockquote > blockquote > blockquote {
   margin: 0;
}

blockquote > blockquote > blockquote p {
   padding: 15px;
   display: block;
   margin-top: 0rem;
   margin-bottom: 0rem;
   border: 1px solid #f0f0f0;
}

blockquote > blockquote > blockquote > p {
   /* Yellow */
   margin-left: -75px;
   color: #8a6d3b;
   background-color: #fcf8e3;
   border-color: #faebcc;
}

blockquote > blockquote > blockquote > blockquote > p {
   /* Red */
   margin-left: -100px;
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
}

blockquote > blockquote > blockquote > blockquote > blockquote > p {
   /* Blue */
   margin-left: -125px;
   color: #31708f;
   background-color: #d9edf7;
   border-color: #bce8f1;
}

blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p {
   /* Green */
   margin-left: -150px;
   color: #3c763d;
   background-color: #dff0d8;
   border-color: #d6e9c6;
}

Шаг 8: Тестирование

Измените тему по умолчанию с новой темой начальной загрузки . Откройте файл user / config / system.yaml и отредактируйте строку, которая содержит —

pages:
   themes: antimatter

и измените приведенный выше код на —

pages:
   theme: bootstrap

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

Grav — учебник по теме

антивещество

начальная загрузка

Шаг 1: Настройка базовой темы

Шаг 2: Добавить Bootstrap

Шаг 3: Базовый шаблон

Шаг 4: сломать его

Шаг 5: Шаблон заголовка

Шаг 7: Тема CSS

Шаг 8: Тестирование

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности