menu-btn

Шаблоны ( Макеты, Layouts )

October CMS Documentation Docs
/

Шаблоны ( Макеты, Layouts )

# Введение

Шаблоны определяют каркас страницы, т.е. все, что повторяется на странице: шапка, подвал и т.д. Шаблоны часто содержат следующие html-теги: head, title, body.

Шаблоны находятся в папке с темой в подпапке /layouts и должны иметь расширение htm. Внутри шаблона должен использоваться тег {% page %} для отображения содержимого страницы. Простой пример шаблона (макета, layout):

<html>
    <body>
        {% page %}
    </body>
</html>

Для того, чтобы страница могла использовать шаблон, необходимо в Конфигурацях указать его название. Помните, если шаблон находится в подпапке, то ее тоже надо указать. Пример главной страницы, которая использует шаблон default.htm:

url = "/"
layout = "default"
==
<p>Hello, world!</p>

Теперь при отображении страницы должен появиться следующий код:

<html>
    <body>
        <p>Hello, world!</p>
    </body>
</html>

Обратите внимание на то, что Вы можете использовать фрагменты в шаблонах. Например, у Вас есть фрагмент с набором стилей и скриптов. Теперь, если Вы захотите добавить еще один скрипт или файл со стилями, Вам не надо будет редактировать каждый шаблон по отдельности. Достаточно будет изменить только фрагмент.

Раздел Конфигурации необязателен для шаблонов и используются только в административной части сайта. Поддерживаемые параметры: name и description. Пример шаблона с описанием:

description = "Basic layout example"
==
<html>
    <body>
        {% page %}
    </body>
</html>

# Заменители ( Placeholders )

Заменители позволяют страницам вставлять содержимое в шаблон при помощи тега {% placeholder name %}. Пример шаблона с заполнителем head:

<html>
    <head>
        {% placeholder head %}
    </head>
    ...

Страницы могут вставлять содержимое в заменители при помощи тегов {% put %} и {% endput %}. Следующий пример показывает, как страница вставляет CSS файл в заменитель head, который использовался в предыдущем примере:

url = "/my-page"
layout = "default"
==
{% put head %}
    <link href="/themes/demo/assets/css/page.css" rel="stylesheet">
{% endput %}

<p>The page content goes here.</p>

Вы можете найти больше информации о заменителях в Руководстве по Разметке.

# Динамический шаблон

В шаблонах, как и в страницах, можно использовать любые возможности Twig (см. Динамические страницы).

# Жизненный цикл шаблонов

Внутри PHP раздела Вы можете задать следующие функции: onInit(), OnStart (), onBeforePageStart () и OnEnd ().

Функция onInit() выполняется, когда все компоненты инициализированы, но перед обработкой AJAX запросов. Функция onStart() выполняется в начале процесса загрузки страницы. onBeforePageStart() - после работы компонентов, но перед выполнением функции onStart() страницы. Функция onEnd() выполняется после того, как страница была отображена. Последовательность выполнения обработчиков:

  1. Шаблон - onInit().
  2. Страница - onInit().
  3. Шаблон - onStart().
  4. Компоненты шаблона м- onRun().
  5. Шаблон - onBeforePageStart().
  6. Страница - onStart().
  7. Компоненты страницы - onRun().
  8. Страница - onEnd().
  9. Шаблон - onEnd().

← Содержимое ( Content ) →