На этом уроке мы создадим главную страницу блога, а также познакомимся с чанками и сниппетами системы MODX Revolution.

Перед созданием содержимого главной страницы создадим файл CSS, который будем использовать для задания стилей к элементам этой веб-страницы.

Например: создадим пустой файл styles.css, который расположим в каталоге assets/bootstrap/css/.

Создание файла styles.css

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

  • pdoMenu – для создания динамического меню на сайте (параметры сниппета: level – количество уровней в меню, tplOuter – код для обёртки всего блока меню, tplParentRow – код для оформления контейнера с потомками, rowClass – класс для одной строчки меню).
    [[pdoMenu?
      &startId=`0`
      &level=`2`
      &tplParentRow=`@INLINE
        <li class="[[+classnames]] dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"
            [[+attributes]]>[[+menutitle]]
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">[[+wrapper]]</ul>
        </li>`
      &tplOuter=`@INLINE [[+wrapper]]`
      &rowClass=`menuid[[+id]]`
    ]]
    
  • pdoPage – для вывода результатов работы других сниппетов с разбивкой на страницы (параметры сниппета: element – имя сниппета для запуска, parentsid категорий для поиска результатов, limit – лимит для выборки результатов).
    [[!pdoPage? 
      &element=`getTickets`
      &action=`tickets` 
      &parents=`2`
      &limit=`2`
    ]] 
    [[!+page.nav]]
    

Главная страница блога будет состоять из:

  • шапки сайта (чанк "chunk.header"),
  • навигационного меню (чанк "chunk.navbar"),
  • блока, содержащего основной контент (ширина блока – col-md-8),
  • сайдбара (ширина блока – col-md-4),
  • футера страницы (чанк "chunk.footer").

Разметка главной страницы блога

<!DOCTYPE html>
<html lang="ru">
[[$chunk.head]]
<body>
  <div class="container"> 
    <div class="row">
      [[$chunk.header]]
      [[$chunk.navbar]]
      <div class="main-block col-md-8">
        [[!pdoPage? &element=`getTickets`
          &action=`tickets` 
          &parents=`2`
          &limit=`2`
        ]] 
        [[!+page.nav]]
      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div>
  [[$chunk.footer]]
</body>
</html>

Код CSS:

.main-block {
background-color: rgba(255, 255, 255, 0.6);
padding:15px;
}

Кроме вышеперечисленных чанков для данной веб-странице создадим ещё один чанк (chunk.header), который будем использовать для вывода содержимого элемента <head>...</head>.

В CMS MODX Revolution для создания кусков статического текста, к которым относится заголовок, шапка и футер веб-страницы сайта можно использовать чанки (chunks).

Чанк "chunk.head" будем использовать для хранения HTML кода заголовка страницы <head>...</head>

Процесс создания чанка:

  • Для создания чанка необходимо открыть вкладку "Элементы" и нажать на кнопку "Новый чанк";
  • В открывшейся форме необходимо ввести имя и код (html) чанка:

    Чанк chunk.head

    Код чанка (html):

    <head>
      <meta charset="[[++modx_charset]]">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="[[*description]]">
      <base href="[[++site_url]]" /> 
      <title>[[*pagetitle]]</title> 
      <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link href="assets/bootstrap/css/styles.css" rel="stylesheet">
      <!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    </head>
    

При написании чанка мы использовали следующие теги MODX Revolution:

  • [[++modx_charset]] - выводим параметр системы MODX Revolution, который отвечает за кодировку символов (в нашем случае это значение равно UTF-8);
  • [[*description]] - выводим поле ресурса description (описание документа);
  • [[++site_url]] - выводим адрес сайта;
  • [[*pagetitle]] - выводим заголовок ресурса.

Чанк "chunk.head" будем использовать для хранения шапки веб-страницы.

Чанк chunk.header

Код чанка (html):

<div class="header">
</div>

Код CSS (styles.css):

.header {
height:75px;
background: url('/assets/images/logo/logo.png') no-repeat;
}

Чанк "chunk.navbar" будем использовать для генерации динамического меню на веб-странице, используя сниппет pdoMenu.

Чанк chunk.navbar

Код чанка (html):

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-myblog">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-myblog">
           <ul class="nav navbar-nav">
        [[pdoMenu?
	  &startId=`0`
	  &level=`2`
	  &tplParentRow=`@INLINE
	    <li class="[[+classnames]] dropdown">
	      <a href="#" class="dropdown-toggle" data-toggle="dropdown" [[+attributes]]>
                [[+menutitle]]
                <b class="caret"></b>
              </a>
	      <ul class="dropdown-menu">[[+wrapper]]</ul>
	    </li>`
	  &tplOuter=`@INLINE [[+wrapper]]`
          &rowClass=`menuid[[+id]]`
	]]
      </ul>
    </div>
  </div>
</div>

Чанк "chunk.footer" будем использовать для вывода подвала веб-страницы.

Чанк chunk.footer

Код чанка (html):

<footer>
  <div class="container">
    <p>Copyright © 2015 «Мой блог» <br>Копирование материалов сайта запрещено!    </p>
  </div>
</footer>
<script src="assets/bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap/js/jquery.backstretch.min.js"></script>
<script>
  $.backstretch("assets/images/logo/background.jpg");
</script>

Код CSS:

footer {
background-color: rgba(255, 255, 255, 0.6);
margin-top:15px;
padding-top:5px;
}

Созданные чанки

Созданную веб-страницу продемонстрируем с помощью 2 скриншотов.

Верхняя часть сайта

Нижняя часть сайта

Скачать блог + Denwer