• en
  • Language: ru
  • 3.7.x
  • Documentation version: 3.9

2. Шаблоны и заполнители

В этом уроке мы представим вам Placeholders, а также покажем, как вы можете сделать свои собственные HTML-шаблоны CMS-совместимыми.

2.1. Шаблоны

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

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

Шаблоны сайта вы найдете в разделе tutorial-project/mysite/mysite/templates.

По умолчанию страницы вашего сайта будут использовать шаблон fullwidth.html, первый из перечисленных в кортеже проекта settings.py CMS_TEMPLATES:

CMS_TEMPLATES = (
    ## Customize this
    ('fullwidth.html', 'Fullwidth'),
    ('sidebar_left.html', 'Sidebar Left'),
    ('sidebar_right.html', 'Sidebar Right')
)

2.2. Placeholders

Placeholders - это простой способ определить разделы в HTML-шаблоне, которые будут заполнены содержимым из базы данных при отображении страницы. Это содержимое редактируется с помощью механизма редактирования django CMS во фронтенде, используя теги шаблона Django.

fullwidth.html содержит единственный заполнитель, {% placeholder "content" %}.

Вы также увидите {% load cms_tags %} в этом файле - cms_tags это необходимая библиотека тегов шаблона.

Если вы еще не знакомы с тегами шаблонов Django, вы можете узнать больше в разделе Django documentation.

Добавьте пару новых заполнителей в fullwidth.html, {% placeholder "feature" %} и {% placeholder "splashbox" %} внутри секции {% block content %}. Например:

 {% block content %}
     {% placeholder "feature" %}
     {% placeholder "content" %}
     {% placeholder "splashbox" %}
 {% endblock content %}

Если вы переключитесь в режим Структура (кнопка в правом верхнем углу страницы), вы увидите новые доступные для использования местоположения.

новое место для 'splashbox

2.3. Статические держатели

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

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

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

Итак, давайте добавим нижний колонтитул на все наши страницы. Поскольку мы хотим, чтобы колонтитул был на каждой странице, мы должны добавить его в наш базовый шаблон (mysite/templates/base.html). Поместите его рядом с концом элемента HTML <body>:

     <footer>
       {% static_placeholder 'footer' %}
     </footer>


     {% render_block "js" %}
 </body>

Сохраните шаблон и вернитесь в браузер. Обновите любую страницу в режиме структуры, и вы увидите новый статичный заполнитель.

статическое место

Примечание

Чтобы уменьшить беспорядок в интерфейсе, плагины в статических заполнителях по умолчанию скрыты. Щелкните или коснитесь названия статического плагина, чтобы открыть/скрыть его.

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

2.4. Рендеринг меню

Для того чтобы отобразить меню CMS в вашем шаблоне, вы можете использовать тег show_menu.

Любой шаблон, использующий show_menu, должен сначала загрузить библиотеку CMS menu_tags:

{% load menu_tags %}

Меню, которое мы используем в mysite/templates/base.html, следующее:

<ul class="nav">
    {% show_menu 0 100 100 100 %}
</ul>

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

Далее мы рассмотрим Интеграция приложений.