CMS, Новичкам

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

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

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

Установка GRAV

Более подробно по установке GRAV можно прочитать в официальной документации Installation 1. Качаем GRAV на странице https://getgrav.org/downloads Необходима сборка с админ панелью: картинка Либо качайте сразу по этой ссылке

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

  • Подключаемся к серверу через FTP клиент, например этот – FileZilla. Данные для доступа спрашивайте у своих программистов. картинка
  • Копируем фалы дистрибутива на свой в папку своего сайта картинка

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

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

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

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

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

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

Более подробно по админ панели GRAV в документации Introduction

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

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

Dashboard

Более подробно по Dashboard в документации Dashboard

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

Configuration

картинка

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

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

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

Pages

Более подробно по Pages в документации Pages

картинка

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

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

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

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

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

Более подробно по созданию новых страниц в документации Pages

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

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

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

Plugins

Более подробно по Plugins в документации Plugins

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

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

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

Themes

Более подробно по Themes в документации 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так же имеются шаблоны страниц. Многие шаблоны страниц или плагинов будут хранится именно в этой папке.

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

Более подробно по установке плагинов в документации Plugins

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

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

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

Например, для установки плагина Related Pages вводим его имя и нажимаем кнопку Install: картинка

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

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

Grav-plugin-admin

Ссылка на плагин

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

Если вы устанавливали дистрибутив GRAV по этой ссылке

Grav-plugin-admin-addon-revisions

Ссылка на плагин

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

Grav-plugin-tntsearch

Ссылка на плагин

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

картинка

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

Grav-plugin-cookieconsent

Ссылка на плагин

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

Grav-plugin-form

Ссылка на плагин

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

Grav-plugin-widget

Ссылка на плагин

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

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

Grav-plugin-thumb-ratings

Ссылка на плагин

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

Grav-plugin-social-seo-metatags

Ссылка на плагин

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

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

Recaptchacontact

Ссылка на плагин

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

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

Grav-plugin-sitemap

Ссылка на плагин

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

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

картинка

Grav-plugin-backup-manager

Ссылка на плагин

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

Grav-ganalytics

Ссылка на плагин

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

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

Ggrav-recent-posts

Ссылка на плагин

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

Grav-plugin-blogroll

Ссылка на плагин

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

Ссылка на плагин

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

Ссылка на плагин

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

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

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://werstey.ru/x-twig.ru

Синтаксис twig:

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

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

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

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

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

14VinUNfGTCaxQB9qPCfngHxzUhoNch1bJ

One Comment

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

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