CMS, Новичкам

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

grav logo

Инструмент для работы с этим ТЗ на винде – 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

Похожие записи:

Поддержать автора:

Please Donate To Bitcoin Address: [[address]]

Donation of [[value]] BTC Received. Thank You.
[[error]]

8 Comments

  1. Очень хорошая статья, объемная. Добавлю, что тут можно скачать СMS GRAV на русском языке gravcms.ru

    1. Очень во многом) Это же CMS не требующая sql. Не помню точно как они называются. Да и вообще, очень много всего, например, сжатие и оптимизация кода и всех файлов в один клик – без плагинов.

      1. believeindream, спасибо за ответ! Так и GetSimple вроде тоже такая же, но почему то не получившая широкое распространение в Рунете!

      2. Grav CMS сейчас позиционируют как платформу, на которой можно создать информационный или корпоративный портал. Разве можно на такой CMS создавать многостраничный сайт, равноценный сайту, созданному на CMS WordPress?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *