0
277
2018-09-24

Grav - Часто используемые настройки и сниппеты кода (MarkDown, Twig, редактор Atom)

Что бы не держать в голове часто используемые сниппеты кода, настроек и прочего хлама при работе с контентом для CMS Grav. Я решил создать данный пост в котором хранятся часто используемые полезности для работы с контентом в CMS
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT
Содержание:

Grav - HEADER по умолчанию для всех страниц сайта

title: ''
date: '2018-11-01 20:23'
published: true
media_order: poster.jpg
metadata:
    description: ''
taxonomy:
    category:
        - WordPress
    tag:
        - 'WordPress - Плагины'
        - 'WordPress - Админка'
page-toc:
    active: true  
template: blog_item
highlight:
    enabled: true
    lines: true   
page-addon:
    ifarmelazy: true

MARKDOWN настройки - для заголовков страниц записей

Title (Название) страницы

title: 'Grav + Gantry 5 - Самые необходимые дополнения и ресурсы для работы'

Description (Описание) страницы

metadata:
    description: 'Из данной записи Вы узнаете о 7 веселых расширениях для Chrome которые были разработаны веселыми людьми из Github'

Дата создания страницы (Auto Date)

date: '2018-09-15 05:19'

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

Auto Date -https://github.com/getgrav/grav-plugin-auto-date

Таксономии страницы

Вариант №1 в случае одиночного использования таксономий

taxonomy:
    category: WEB
    tag: Markdown

Вариант №2 в случае использования таксономий более одной штуки

taxonomy:
    category:
        - Grav
    tag:
        - Grav - Gantry 5
        - Grav - Плагины

Автоматические заголовки на основе H1-H6 в теле страницы (Page Toc)

page-toc:
    active: true  

Для автоматической генерации заголовков должен быть установлен плагин:

Page Toc -https://github.com/trilbymedia/grav-plugin-page-toc

Шаблон дочерней страницы блога

template: blog_item

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

Кастомные настройки контента для страниц

  page-addon:
      ifarmelazy: true

Данные настройки на самом деле придуманы мной для упрощения работы с выводом того или иного типа контента. Например в данной записи хедера я активировал ленивую загрузку iframe. И в случае если данная опция активна, в файле \user\themes\g5_helium\custom\templates\partials\blog_item.html.twig

скрипт отложенной загрузки будет подключен:

{% if attribute(page.header, 'page-addon').ifarmelazy %}
  <script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>
{% endif %}

Но естественно что для отображения iframe необходимо добавить например видео с YouTube:

<div class="YouTubeVideo" style="background:linear-gradient(rgba(0, 0, 0, 0.752), rgba(0, 0, 0, 0.52)), transparent url(/user/images/YouTubeVideoPreloader.gif);left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;"><iframe data-iframely-url="https://www.youtube.com/embed/54WI1XSilb4" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no"></iframe></div>

Активация TWIG и MARKDOWN препроцессоров в теле страницы

Данная опция активирует или дезактивирует обработчики TWIG и MARKDOWN в теле страницы.

process:
    markdown: true
    twig: true
twig_first: true

Подсветка синтаксиса кода (Highlight)

В данном случае срабатывает подсветка синтаксиса которая зависит от плагина:

Highlight -https://github.com/getgrav/grav-plugin-highlight

highlight:
    enabled: true
    lines: true   

TWIG настройки - для тела страниц записей

Автоматические заголовки на основе H1-H6 в теле страницы (Page Toc)

Для автоматической генерации заголовков должен быть установлен плагин:

Page Toc -https://github.com/trilbymedia/grav-plugin-page-toc

В идеале лучше всего прописать данный код:

        {% if attribute(page.header, 'page-toc').active %}
  <div class="page-toc">
      {% set table_of_contents = toc(page.content) %}
      {% if table_of_contents is not empty %}
      <div class="h3 page_toc_table">Содержание:</div>
      {{ table_of_contents|raw }}
      {% endif %}
  </div>
{% endif %}

В файле:

\user\themes\g5_helium\custom\templates\partials\blog_item.html.twig

Галерея изображений плагина Unitegallery

Естественно для начала устанавливаем сам плагин, его можно установить из списка доступных плагинов в панели администрирования Grav или загрузить здесь: https://github.com/variar/grav-plugin-unitegallery

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

<div class="modular-row gallery-container {{ page.header.class }}">
    {{ unite_gallery(page.media.images) | raw}}
</div>

ATOM настройки - для работы с контентом страниц для Grav

Поиск и замена всех изображений по маске для Writage экспортов *.md файлов

При помощи данной операции поиска и замены мы удаляем “media/” в marcdown формате изображений после экспорта из WordPress. Плюс присваиваем классы figure-img и img-fluid для активации отложенной загрузки изображений. За отложенную загрузку изображений ответчает плагин:

Lazy Image -https://github.com/unsaturated/grav-plugin-lazy-image

Найти (в режиме регулярных выражений):

(!\[\.*]\()(media\/)(.*)(\))

Заменить кодом ниже для отображения картинки с ленивой загрузкой и с прмменением лайтбокса плагина FeatherLight:

$1$3?lightbox&cropResize=900,900&classes=figure-img,img-fluid)

Заменить кодом ниже только для отображения картинки с ленивой загрузкой:

$1$3?classes=figure-img,img-fluid)

Реультат:

![](4cc06aeac59ea5111e029ddaa4d123e5.png?classes=figure-img,img-fluid)

Работа с изображениями

Эскиз страницы:

![ALT  Image](https://mediadoma.com/wp-content/uploads/2017/10/VueJs-Click-Events-and-Scrolls-to-Elements-Component-FreebiesMall-768x433.jpg?thumbnail=default&display=thumbnail)

Подробнее о работе с изображениями здесь:

https://learn.getgrav.org/content/media