Документация по работе с CMS GRAV — Часть 1

• Установка GRAV
  • Размещаем данный дистрибутив сайта на домен
• Админ панель сайта:
  • Dashboard
  • Configuration
  • Pages
    • Создание новых страниц
  • Plugins
  • Themes
• Файловая структура CMS GRAV
  • Структура файлов папки user
• Установка необходимых плагинов
• Установка своей темы(верстка)
  • Размещение собственного шаблона, когда он уже готов
  • Создание своего шаблона «с нуля»
  • Примеры
    • Подключение других Twig-ов
• Twig
  • Синтаксис twig:

Инструмент для работы с этим ТЗ на винде — markdownpad.com. Так же можно использовать другие среды разработки, где есть встроенный или подключаемый функционал markdown

Официальная документация по работе с GRAV — https://learn.getgrav.org

Установка GRAV

Более подробно по установке GRAV можно прочитать в официальной документации https://learn.getgrav.org/basics/installation 1. Качаем GRAV на странице https://learn.getgrav.org/basics/installation Необходима сборка с админ панелью: Либо качайте сразу по https://getgrav.org/download/core/grav-admin/1.3.3

Размещаем данный дистрибутив сайта на домен

• Подключаемся к серверу через FTP клиент, например этот — https://filezilla-project.org/. Данные для доступа спрашивайте у своих программистов.
• Копируем фалы дистрибутива на свой в папку своего сайта
  

  Необходимо распаковать архив CMS и потом заливать, либо можно залить архив, и распаковать, убедbвшись, что файлы архива GRAV находятся в корневой папке домена.

• После установки и переходу на сайт должен открыться GRAV: Необходимо заполнить данные для входа в админ панель сайта. Это будет созданный вами аккаунт администратора сайта, настройки которого, хранятся по адресу site\user\accounts\. О самих настройках аккаунта напишу чуть ниже.

Если сайт не открылся, возможно необходимо выставить настройку на сервере(лучше обратиться к своим программистам):

• После того, как сайт открылся, админ панель GRAV будет доступна по адресу: <www.site.ru/admin/> > Вместо site подставить свой адрес сайта(доменное имя).

Готово. GRAV размещен и готов к работе.

Админ панель сайта:

Более подробно по админ панели GRAV в документации https://learn.getgrav.org/admin-panel/introductio

После того, как вы зайдете в админку сайта, у вас откроется вот такой экран:

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

Dashboard

Более подробно по Dashboard в документации https://learn.getgrav.org/admin-panel/dashboard

Тут отображается статистика сайта.Обратить стоит внимание на пункт Clear Cache. По нажатию в выпадающем меню можно выбрать All cache — при необходимости почистить Cache — чистим всегда All cache.

Configuration

Данный пункт меню необходим для настройки сайта. Оставляем все эти настройки по умолчанию.

Основные пункты данного меню:

• Сверху надпись — адрес файла настроек, которые открыты на данный момент(Site, System или Media)
• Поля System, Site, Media, Info — выбор, что конфигурировать на сайте.
• Справа верху блок с возможностью сохранить изменения

Pages

Более подробно по Pages в документации https://learn.getgrav.org/admin-panel/pages-admin

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

На приведенном скрине видно, что Главная страница(Home) имеет шаблон default, а другие страницы blog и blog_item.

Если у страницы есть дочерние страницы — то будет отображаться символ + или - возле названия страницы.

Создание новых страниц происходит по нажатию на кнопку Add — в правом верхнем углу.

Создание новых страниц

Более подробно по созданию новых страниц в документации https://learn.getgrav.org/admin-panel/pages-admin

Экран, представленный ниже, открывается после нажатия на кнопку Add — описано в предыдущим пункте

В данных полях мы можем задать параметры страницы:

• Page Title — Заголовок Title Страницы
• Folder Name — имя страницы
• Parent Page — родительская страница. > Например, если необходимо создать дочернюю страницу страницы Blog — тут необходимо выбрать Blog
• Page Template — шаблон страницы.
• Visible — по умолчанию страница будет размещена(видимая) сразу.

Plugins

Более подробно по Plugins в документации https://learn.getgrav.org/plugins

Страница плагинов:

На экране — все установленные плагины, а справа — можно активировать или деактивировать любой плагин.

Стоит обратить внимание на блок в правом верхнем углу — по нажатию кнопки Add можно установить новый плагин, введя его имя.

Themes

Более подробно по Themes в документации https://learn.getgrav.org/themes Данная страница — установленные темы на сайте. Добавить тему можно так же, нажав на кнопку Add в правом вернем углу.

Файловая структура CMS GRAV

Структура сайта имеет следующий вид:

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

Структура файлов папки user

Внимание! По умолчанию, структура данной папки может выглядеть немного иначе. По этому описываю только то, что есть в стандартной сборке GRAV+admin. Структура может измениться, при установке некоторых плагинов, или выставления каких-либо параметров и настроек сайта.

• Папка accounts — настройки аккаунтов или аккаунта, созданные нами ранее, при установке GRAV. Полный адрес настроек — site\user\accounts\. Все настройки сайта, аккаунтов, тем, плагинов имеет формат файлов .yaml. Более подробно про файлы .yaml и их синтаксис можно узнать тут — https://learn.getgrav.org/basics/grav-configuration
• Папка config — настройки сайта и ситемы, рассмотренные ранее.
• Особое внимание нужно уделить папке pages — тут размещены все контентные страницы сайта.
  

  На данном скрине видно, что в этой сборке(так как она пустая) — только одна страница Home

А в папке Home хранится файл с контентом, формата .md (MarkDown) — весь контент, в админ панели сайта, можно размещать с помощью обычного редактора(без какого либо синтаксиса) — автоматически переведет в синтаксис MarkDown. Либо в режиме эксперта, уже прям через админку размещать контент в синтаксисе MarkDown

• Папка plugins

В данной папке находятся все установленные вами плагины.

• Папка themes

В этой папке хранятся установленные темы.

Обязательно уделяем этой папке внимание — там находятся все шаблоны страниц(типы), которые имеют формат .html.twig, файлы дизайна темы (CSS, JS, Картинки):

На данном скриншоте видно, что существуют шаблоны страницы такие как:

• blog.html.twig
• default.html.twig
• error.html.twig
• form.html.twig
• item.html.twig
• modular.html.twig

В папке partialsтак же имеются шаблоны страниц. Многие шаблоны страниц или плагинов будут хранится именно в этой папке.

Установка необходимых плагинов

Более подробно по установке плагинов в документации https://learn.getgrav.org/admin-panel/plugins

Устанавливаем ниже приведенные плагины через админ панель сайта.

Напоминаю, находится вот в этом пункте админ панели сайта:

• https://github.com/getgrav/grav-plugin-admin
• https://github.com/david-szabo97/grav-plugin-admin-addon-revisions
• https://github.com/trilbymedia/grav-plugin-tntsearch
• https://github.com/naucon/grav-plugin-cookieconsent
• https://github.com/getgrav/grav-plugin-form
• https://github.com/sojimaxi/grav-plugin-widget
• https://github.com/iusvar/grav-plugin-thumb-ratings
• https://github.com/clemdesign/grav-plugin-social-seo-metatags
• https://github.com/aradianoff/recaptchacontact
• https://github.com/getgrav/grav-plugin-sitemap
• https://github.com/leotiger/grav-plugin-backup-manager
• https://github.com/escopecz/grav-ganalytics
• https://github.com/GittiHab/grav-recent-posts
• https://github.com/Perlkonig/grav-plugin-blogroll
• https://github.com/getgrav/grav-plugin-relatedpages
• https://github.com/getgrav/grav-plugin-breadcrumbs
• https://github.com/getgrav/grav-plugin-pagination
• https://github.com/helios-ag/grav-metrika
• https://github.com/Gertt/grav-plugin-cachebuster

Установка плагина происходит путем нажатия на кнопку Add и в поиске вводим название плагина.

Например, для установки плагина https://github.com/getgrav/grav-plugin-relatedpages вводим его имя и нажимаем кнопку Install:

Удаление плагинов происходит следующим путем:

• Переходим в плагин
• Жмем кнопку Remove Plugin

Grav-plugin-admin

https://github.com/getgrav/grav-plugin-admin

Данный плагин уже встроен в сборку Grav + Admin panel

Если вы устанавливали дистрибутив GRAV по https://getgrav.org/download/core/grav-admin/1.3.3

Grav-plugin-admin-addon-revisions

https://github.com/david-szabo97/grav-plugin-admin-addon-revisions

При установки данного плагина появляется возможность «откатывать» изменения страниц. Появляется новый блок в админке Revisions:

Grav-plugin-tntsearch

https://github.com/trilbymedia/grav-plugin-tntsearch

Данный плагин необходим для внедрения в сайт поиска. Обязательным пунктом является перейти в плагин, и нажать на кнопку Re-Index Content, при первой активации кнопка может называться Index Content.

Данный плагин необходим для внедрения в сайт поиска. Обязательным пунктом является перейти в плагин, и нажать на кнопку Re-Index Content, при первой активации кнопка может называться Index Content.

Данное действие необходимо для сканирования всех страниц сайта данным плагином.

Grav-plugin-cookieconsent

https://github.com/naucon/grav-plugin-cookieconsent

При активации данного плагина в футере(нижней части сайта) появляется оповещение посетителей сайта о использования сайта Cookie:

Grav-plugin-form

https://github.com/getgrav/grav-plugin-form

Плагин для создания форм заявок, обратных звонков.

Grav-plugin-widget

https://github.com/sojimaxi/grav-plugin-widget

Данный плагин позвляет создавать виджеты через админку. После установки данного плагина автоматически создается для него папка widgets в /user/pages/ А так же новый пункт в адин панели сайта на странице Pages — в правом верхнем углу появляется кнопка Create Widget

Подробная информация тут — https://github.com/sojimaxi/grav-plugin-widget

Grav-plugin-thumb-ratings

https://github.com/iusvar/grav-plugin-thumb-ratings

Данный плагин позволяет внедрить рейтинг для каких либо страниц

Grav-plugin-social-seo-metatags

https://github.com/clemdesign/grav-plugin-social-seo-metatags

Плагин, необходимый для использования SEO метатегов для конкретных страниц:

В контенте страницы(.md) указываем SEO параметры — можно сделать через админку.

Recaptchacontact

https://github.com/aradianoff/recaptchacontact

Данный плагин необходим для установки reCAPTCHA на сайт, в частности например на формы заявок.

В контенте страницы(.md) указываем recaptchacontact: true. Так же, можно сделать это через админку редактируя конкретную страницу.

Grav-plugin-sitemap

https://github.com/getgrav/grav-plugin-sitemap

Плагин для создания sitemap вашего сайта.

После установки и активации плагина карта сайта XML уже достпна по адресу /sitemap

Grav-plugin-backup-manager

https://github.com/leotiger/grav-plugin-backup-manager

Плагин предназначен для автоматического создания backup-ов сайта. Время, объем, период — выставляются в настройках плагина.

Grav-ganalytics

https://github.com/escopecz/grav-ganalytics

Плагин для внедрения в сайт статистки Google Analytics.

В настройках плагина необходимо ввести Tracking ID вашего счетчика

Ggrav-recent-posts

https://github.com/GittiHab/grav-recent-posts

Плагин необходмый для вывода последних записей вашего блога

Grav-plugin-blogroll

https://github.com/Perlkonig/grav-plugin-blogroll

Grav-plugin-relatedpages

https://github.com/getgrav/grav-plugin-relatedpages

Для нормальной работы плагина вам необходимо скопировать файл user/plugins/relatedpages/relatedpages.yaml в папку user/config/plugins/relatedpages.yaml — с заменой старого файла.

Так же обратите внимание на параметр score_threshold: 20 # minimum score needed to show up in the list — сколько в баллов должно быть соответствие страниц что бы выводить их в похожие. По умолчанию этот параметр равен 20. В таком случае, я заметил что плагин не выводит похожие страницы. Выход нашелся изменением данного параметра до 1. Причем я правил в самом файле(user/config/plugins/relatedpages.yaml), а не через админ панель сайта и настройки плагина. Если зайти в настройки плагина, и нажать сохранить — файл перезаписывается в исходный — и похожие страницы уже выводится не будут. Исходный код файла user/config/plugins/relatedpages.yaml который будет работать:

enabled: true # set to false to disable this plugin completely
limit: 5 # the number of related pages to display
show_score: true # toggle to determine if scores should be displayed in output
score_threshold: 1 # minimum score needed to show up in the list
filter: # filter a configurable collection of pages to compare
items:
@page: /blog # supports @self, @page, and @taxonomy collections
order:
by: date # order type by default
dir: desc # order direction
page_in_filter: true # true if the current page must be in the filtered collection
explicit_pages:
process: true # true|flase to enable this explicit page matching
score: 100 # score (0 - 100) to give explicit pages
taxonomy_match: # taxonomy type matching
taxonomy: tag # which taxonomy type to use
taxonomy_taxonomy:
process: true # true|false to enable taxonomy to taxonomy matching
score_scale: # scores for number of matches
1: 50
2: 75
3: 100
taxonomy_content:
process: true # true|false to enable taxonomy to content matching
score_scale: # scores for number of matches
1: 20
2: 30
3: 45
4: 60
5: 70
6: 80
7: 90
8: 100
content_match: # Disable this if you have lots of posts, performance implications...
process: false # true|false to enable content to content matching

Grav-plugin-breadcrumbs

https://github.com/getgrav/grav-plugin-breadcrumbs

Grav-plugin-pagination

https://github.com/getgrav/grav-plugin-pagination

Плагин дял внедрения пагинации на ваш сайт.

Работает только когда есть более 10 дочерних страниц у родительской.

Настройка URL страниц пагинации идет в этом файле: \user\plugins\pagination\templates\partials\pagination.html.twig, а именно в этом блоке: `\ {% for paginate in pagination %}

    {% if paginate.isCurrent %}
            <li><span>{{ paginate.number }}</span></li>
    {% elseif paginate.isInDelta %}
            {% set url = (base_url ~ pagination.params ~ paginate.url)|replace({'//':'/'}) %}
            <li><a href="{{ url }}">{{ paginate.number }}</a></li>
    {% elseif paginate.isDeltaBorder %}
            <li class="gap"><span>&hellip;</span></li>
    {% endif %}

{% endfor %} `\

Grav-metrika

https://github.com/helios-ag/grav-metrika

Плагин для внедрения Яндекс.Метрики.

Необходимо просто вставить номер счетка в настройках:

Grav-plugin-cachebuster

Плагин, который позволяет вам легко очистить Cache.

По умолчанию плагин выключен

Установка своей темы(верстка)

Размещение собственного шаблона, когда он уже готов

Как и говорилось ранее, файлы темы находятся по адресу user\themes\ Там и можно создать папку со всеми системными файлами темы(js, css и другие):

Если в шаблоне все подготовлено верно — останется создать несколько системных файлов для GRAV(defult.html.twig, blog.html.twig и так далее). Предлагаю обратить внимание на неплохой мануал по созданию темы https://cmscafe.ru/docs/grav/themes/785-sozdanie-temy-dlya-grav

Создание своего шаблона «с нуля»

Для создания своей темы предлагаю для начала ознакомится с мануалом https://cmscafe.ru/docs/grav/themes/785-sozdanie-temy-dlya-grav

После создания темы по данному примеру в админке в разделе Themes: Где мы уже сможем активировать нашу тему

Примеры

Для начала нужно создать шаблоны страниц(именно те файлы, которые мы например defult.html.twig), которые в свою очередь должны хранится по адресу user/themes/test1/templates/

И имеют следующие содержание: `\ {% extends ‘partials/base.html.twig’ %}

{% block content %} {{ page.content }}

{% endblock %} `\

На примере видно, что командой {% extends 'partials/base.html.twig' %} мы «присвоим этому шаблону контент из файла» partials/base.html.twig

А далее идет блок:{% block content %} {{ page.content }} {% endblock %} — начало блока контента, контент страницы и конец блока контента. {{ page.content }} — это как раз тот контент, который вы будете добавлять в страницы, например через админку.

Подключение других Twig-ов

Создаем папки, сохраняю стандартную структуру: user\themes\название вашей темы\templates\partials\

Создаем там файлы header.html.twig footer.html.twig а так же основной шаблон страницы base.html.twig

Базовый шаблон base.html.twig:

Уже в файлах header.html.twig и подобных — мы можем добавлять простой HTML код — в данном случае код Хидера:

<header class="global-header">
///
</header>

Примерно по такому же принципу подготовлены файлы footer.html.twig Подключение header.html.twig либо других twig-ов идет по такому примеру: В файле, например base.html.twig прописываем команду {% include 'partials/header.html.twig' %} — где адрес и название файла(partials/header.html.twig) может быть любым.

Twig

Работа с twig-ами достаточно сложная. Есть документация по их работе на GRAV — https://learn.getgrav.org/themes/twig-primer

А так же, полная официальная документация https://twig.symfony.com/doc/2.x/»>https://twig.symfony.com/doc/2.x/

Русская документация(не официальный сайт) — http://x-twig.ru

Синтаксис twig:

{# Так записываются комментарии #} — т.е. комментарии записываются внутри скобок {# и #}

Так же, есть два вида разделителей: {% ... %} и {{ ... }}.

Первый из них используется для выполнения операторов, таких как for-циклы, а второй печатает результат выражения в шаблон. Более подробно синтаксис twig предлагаю посмотреть тут -http://x-twig.ru