Модульные страницы⚓︎

Концепция модульных страниц сначала немного сложна для понимания, но когда вы с этим справитесь, вы увидите, насколько удобны они в использовании. Модульная страница — это набор страниц, уложенных друг на друга для создания единой страницы. Это позволяет создавать сложную структуру страниц, используя подход кирпичиков LEGO — и кто не любит LEGO?!

Что такое модульные страницы и чем они не являются?⚓︎

В Grav страницы — это широкая концепция, охватывающая практически любые комбинации элементов, которые вы можете себе представить при посещении веб-сайта. Важно отметить, что модульные страницы — это подмножество этой концепции, но не то же самое, что и обычные страницы. Обычная страница является достаточно автономной в том смысле, что Grav будет отображать и отображать её независимо от другого контента, такого как другие страницы или дочерние страницы. Однако модульная страница не имеет дочерних страниц. Это можно проиллюстрировать, представив простую структуру страницы.

На обычной странице по адресу domain.com/books есть подробная информация о том, какие книги продаются. Для этой страницы существует несколько дочерних страниц, например domain.com/books/gullivers-travels и domain.com/books/the-hobbit. Их папки названы так же, как и адрес, который отображает Grav: /pages/books, /pages/books/gullivers-travels и /pages/books/the-hobbit. Эта структура не будет работать на модульной странице.

Модульная страница не имеет дочерних страниц в том же смысле, скорее у нее есть модули, которые составляют части страницы. Таким образом, вместо различных книг, расположенных под страницей верхнего уровня, модульная страница отображает свои модули на той же странице. «Путешествия Гулливера» и «Хоббит» появляются в domain.com/books с путями /pages/books/_gullivers-travels и /pages/books/_the-hobbit. Таким образом, модульные страницы не совместимы напрямую с обычными страницами и имеют свою собственную структуру.

Пример структуры папки⚓︎

Используя наш одностраничный каркас в качестве примера, мы более подробно объясним, как работают модульные страницы.

Модульная страница состоит из страниц, которые существуют во вложенных папках, находящихся в основной папке страницы. В случае нашего одностраничного скелета эта страница находится в папке 01.home. В этой папке находится единственный файл modular.md, который сообщает Grav, какие подстраницы нужно использовать для сборки модульной страницы и в каком порядке их отображать. Имя этого файла важно, потому что оно указывает Grav использовать modular.html.twig — шаблон из текущей темы для рендеринга страницы.

Эти подстраницы находятся в папках, имена которых начинаются с символа подчеркивания (_). Используя подчеркивание, вы сообщаете Grav, что это модули, а не отдельные страницы. Например, папки-подстраницы могут называться _features или _showcase. Эти страницы не маршрутизируемы — на них нельзя указывать непосредственно в браузере, и они не видны — они не отображаются в меню.

В случае нашего одностраничного скелета мы создали структуру папок, показанную ниже.

Листинг

Каждая подпапка содержит файл Markdown, который действует как страница.

Данные в этих папках модулей, включая файлы Markdown, изображения и т. д., затем извлекаются и отображаются на странице Modular. Это достигается путем создания первичной страницы, определения Коллекции страниц в блоке метаданных YAML первичной страницы, а затем повторения этой коллекции в шаблоне Twig для создания объединенной HTML-страницы. В теме уже должен быть шаблон modular.html.twig, который будет делать это и будет использоваться при создании типа модульной страницы. Вот простой пример из modular.html.twig:

{% for module in page.collection() %}
    {{ module.content }}
{% endfor %}

Вот пример полученной модульной страницы с выделением различных используемых модульных папок.

Листинг

Настройка основной страницы⚓︎

Как видите, каждый раздел извлекает контент из разных папок модуля. Определение того, какие папки модуля используются и в каком порядке, происходит в первичном файле Markdown в родительской папке модуля. Вот содержимое файла modular.md в папке 01.home.

---
title: One Page Demo Site
menu: Home
onpage_menu: true
body_classes: "modular header-image fullwidth"

content:
    items: '@self.modular'
    order:
        by: default
        dir: asc
        custom:
            - _showcase
            - _highlights
            - _callout
            - _features
---

Как видите, в этом файле нет фактического содержимого. Всё обрабатывается в YAML FrontMatter в шапке. Здесь находятся Заголовок страницы, Меню и другие настройки, которые можно найти на обычной странице. Параметр Content инструктирует Grav создавать контент на основе коллекции модульных страниц и даже предоставляет настраиваемый ручной порядок их рендеринга.

Модули⚓︎

Листинг

Markdown-файл для каждого модуля может иметь свой собственный шаблон, настройки и т. д. Для всех целей и задач он имеет большинство функций и настроек обычной страницы, просто он не отображается как единое целое. Мы рекомендуем разместить настройки всей страницы, такие как taxonomy, в основном файле Markdown, который контролирует всю страницу.

Сами модульные страницы обрабатываются так же, как и обычные страницы. Вот пример использования файла text.md на странице _callout, которая появляется в середине модульной страницы.

---
title: Homepage Callout
image_align: right
---

## Content Unchained

Вы больше не раб своей CMS. **Grav** дает вам возможность создавать что угодно: [простой одностраничный сайт](#), [красивый блог](#), мощный и многофункциональный [сайт продукта](#) или почти все, что вы можете придумать!

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

Файл шаблона для файла text.md должен находиться в папке /templates/modular вашей темы и называться text.html.twig. Этот файл, как и любой файл шаблона Twig для любой другой страницы, определяет настройки, а также любые различия в стилях между ним и базовой страницей.

<div class="modular-row callout">
    {% set image = page.media.images|first %}
    {% if image %}
        {{ image.cropResize(400,400).html('','','align-'~page.header.image_align) }}
    {% endif %}
{{ content }}
</div>

Как правило, модульные страницы очень просты. Вам просто нужно привыкнуть к мысли, что каждый раздел на вашей странице определяется в Модуле, который имеет свою собственную папку под фактической страницей. Все они отображаются для ваших посетителей сразу, но организованы несколько иначе, чем обычные страницы. Не стесняйтесь экспериментировать и узнайте, сколько вы можете сделать с модульной страницей в Grav.