Привет, друзья!
В предыдущем выпуске мы установили и настроили рабочую площадку на чистом linux-сервере и развернули базовый костяк движка ApostropheCMS.
Напомню, что этот движок был выбран за его универсальность, гибкость, чистоту технологического стека (100% Javascript + MongoDB) и легкость как в наполнении контентом, так и доработке. Это не просто CMS, но полноценный CMF-фреймворк с удобным административным интерфейсом и мощной модульной системой.
Сегодня мы продолжим развивать наш сайт: заведем простой шаблон на Bootstrap4, создадим и наполним первые страницы.
Гайд будет достаточно кратким и направленным исключительно на практику. Теории и подробным описаниям применяемых объектов и функций будут посвящены отдельные статьи.
Общий шаблон сайта
ApostropheCMS из коробки использует в качестве шаблонизатора Nunjucks. На мой вкус он один из самых удобных, и мне он нравится гораздо больше всяких куцых pug/jade и им подобных. Так что я полностью разделяю выбор разработчиков.
Общие шаблоны в ApostropheCMS вынесены в отдельную директорию /views/.
Откройте файл /views/layout.html - это центральная часть шаблона, в которой содержатся блоки, отвечающие за отдельные глобальные части страницы. Наполним их.
{% block title %} - содержимое этого блока попадет в тег title. Оставим дефолтный код, который выведет заголовок текущей страницы
{% block title %}
{% if data.piece %}
{{ data.piece.title }}
{% elseif data.page %}
{{ data.page.title }}
{% endif %}
{% endblock %}
{% block extraHead %} - этот блок попадет в head сайта. Т.е. в него можно добавлять дополнительные метатеги, стили, скрипты (хотя их по возможности лучше переносить в конец страницы).
Подключим bootstrap из CDN:
{% block extraHead %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
{% endblock %}
{% block beforeMain %} - шапка сайта. Разместим в ней простое одноуровневое меню на плавающей панельке (оно доступно в массиве data.home):
{% block beforeMain %}
<header class="navbar navbar-expand-lg border-dark border-bottom bg-light mb-4">
<div class="container">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="{{ data.home._url }}">{{ data.home.title }}</a></li>
{% for tab in data.home._children %}
<li class="nav-item"><a class="nav-link" href="{{ tab._url }}">{{ tab.title }}</a></li>
{% endfor %}
</ul>
{% if not data.user %}
<a class="btn btn-primary" href="/login">Войти</a>
{% endif %}
</div>
</header>
{% endblock %}
{% block afterMain %} - футер. Просто оставим окантовку страницы:
{% block afterMain %}
<footer class="container border-top border-dark mt-3 py-3">
<div class="row">
<div class="text-center">
© demosite.com
</div>
</div>
</div>
{% endblock %}
Также в шаблоне присутствует {% block main %}, но нам не нужно его трогать, т.к. вместо него будет выводиться содержимое конкретной страницы.
Шаблон и содержимое страниц
Осталось сформировать шаблон для контентной области и сделать его редактируемым через админку.
ApostropheCMS представляет из себя модульную систему. За вывод страниц отвечает модуль apostrophe-pages, поэтому шаблон мы будем править внутри него. Его шаблоны лежат в каталог /lib/modules/apostrophe-pages/views/pages/. Каждый из шаблонов в этой папке можно будет выбирать в качестве шаблона для конкретной страницы.
Пока оставим один шаблон для всех страниц и разместим на нем визуальный редактор. Подобного рода отдельные блоки на страницах в ApostropheCMS называются виджетами (widgets). В шаблоне страниц они могут размещаться либо как единичный блок (singleton), либо в рамках области (area), в которой из админки можно будет добавить любое количество определенных виджетов в любом порядке. Для базового шаблона область подходит как нельзя кстати, так что ей и воспользуемся.
Из коробки их предлагается достаточно широкий выбор виджетов. Сейчас мы воспользуемся wysiwyg-редактором (apostrophe-rich-text), готовым слайдером/галереей (apostrophe-images) и списком файлов (apostrophe-files).
Откройте файл /lib/modules/apostrophe-pages/views/pages/home.html и внесите код {% block main %} (это и есть переопределение, о которой я говорил выше, причем при необходимости можно переопределить и остальные блоки при необходимости):
{% block main %}
<div class="container content">
<h1>{% if data.piece %}{{ data.piece.title }}{% elseif data.page %}{{ data.page.title }}{% endif %}</h1>
{{ apos.area(data.page, 'body', {
widgets: {
'apostrophe-rich-text': {
toolbar: [ 'Bold', 'Italic', 'Link', 'Unlink', 'BulletedList' ]
},
'apostrophe-images': {
size: 'max'
},
'apostrophe-files': {}
}
}) }}
</div>
{% endblock %}
Работа в админке
Наконец все подготовительные работы завершены. Теперь мы можем без проблем создавать страницы в админке и редактировать их прямо в браузере. Авторизуйтесь под админом.
Вы увидите такой интерфейс:
Пока он не переведен, но в целом и так интуитивно понятен за счет своей лаконичности.
В нем всего 2 элемента:
- Кнопка Page Menu для редактирования настроек текущей страницы (Page Settings).
- Кнопка со стилизованной буквой "A", открывающей остальное меню. В нем можно завести дополнительных пользователей, добавить страницы, загрузить картинки и файлы, которые потом можно использовать в контенте.
Непосредственно контент страницы добавляется кликом на центральную серую область с кнопкой "+", при нажатии на которую можно выбрать любой из определенных виджетов.
Все ваши изменения мгновенно отразятся на экране!
Такой простоте работы с контентом позавидует большинство других CMS!
При этом ApostropheCMS одинаково лоялен и к программистом, обладая потрясающей масштабируемостью и простоте добавления собственных модулей, компонентов, виджетов и многого другого.
В следующем выпуске мы установим несколько дополнительных модулей, сделав наш сайт SEO-friendly и превратив его в небольшой блог.