MODX - Создание главной страницы блога

На этом уроке мы создадим главную страницу блога, а также познакомимся с чанками и сниппетами системы 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



   MODX Revo 0    8592 0

Комментарии (81)

  1. Аня 07 февраля 2015, 17:25 # 0
    почему то ничего не получилось… пустая страница. Там же как то шаблоны загружаются?
    1. Александр Мальцев 08 февраля 2015, 03:28 # 0
      На этом уроке мы сделали только главную страницу, и выводиться должна только она. Страницы, содержащие посты сделаем на следующем уроке, там уже будем применять шаблоны, т.к. таких страниц может быть много.

      Для главной страницы делать шаблон – это дело вкуса, т.к. такая страница всего одна. На этом уроке мы поместили содержимое, которое будут выводиться на главной странице в поле «Содержимое ресурса». Шаблон для главной страницы в этом случае необходимо выбрать (пустой).

      Кому нравиться создавать шаблоны можно поступить следующим образом: создать шаблон и поместить содержимое, которое мы создали в поле «Содержимое ресурса» в код шаблона. А затем привязать шаблон к главной странице «Мой блог».

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

      Настройка главной страницы в MODX Revolution
    2. Аня 08 февраля 2015, 11:46 # +1
      спасибо. получилось. Просто непонятно было, что код страницы надо вставить в содержимое ресурса.
      ещё хочу сказать, у вас на сайте не работают лайки
      1. Александр Мальцев 08 февраля 2015, 12:10 # 0
        Работают только для зарегистрированных пользователей. И ещё за свои записи нельзя лайки ставить.
      2. Аня 08 февраля 2015, 12:12 # 0
        а для не зарегистрированных возможно настраивать чтобы работали? спасибо
        1. Александр Мальцев 08 февраля 2015, 13:38 # 0
          Аня, это очень плохая практика настраивать различные права для гостей сайта, обычно все сайты (modx.com, habrahabr.ru, youtube.com и др.) требует обязательную регистрацию пользователей для написания комментариев, голосования и много другого. Это защищает сайт от спама и многих других вещей.

          Тем более регистрация на сайте itchief.ru очень простая, которая заключается вводе вашего email и пароля для входа на сайт. После этого приходит письмо на ваш email, где необходимо подтвердить ваш аккаунт. После этого вы являетесь авторизированным пользователем и вам доступны все возможности.

          Аня, к сожалению, у гостей голосования не будет, т.к. у них нет идентификатора (id), а это может привести к накруткам счётчиков.
        2. Zaikace 17 февраля 2015, 20:02 # 0
          Страно все сделал как вы описали и ни разу ошибку не допустил а итог получилось такой не как у вас
          1. Александр Мальцев 18 февраля 2015, 12:46 # 0
            Добрый день, Zaikace. Из представленного изображения можно сделать следующие выводы:
            1. У Вас, возможно, не опубликованы ресурсы, т.к. они у вас не отображаются в главном меню. Проверьте, чтобы у всех ресурсов стояли галочки «Опубликован», а так же у ресурсов в разделе «Блог».
            2. Необходимо проверить значение &parents, оно у Вас должно содержать id ресурса, который содержит посты. Иначе просто нечего будет выводить.
            Сниппет getTickets
            1. Zaikace 18 февраля 2015, 14:49 # 0
              Все сделал как ты сказал блог появил на главной а навбар не появил блог и карта блога и о себе почему?

              И хотел узнать будеш ли дальше делать такой урок только авторизация и регистрация.
              1. Александр Мальцев 18 февраля 2015, 15:46 # 0
                Т.к. сниппет PdoMenu (для генерации меню) вызывается кэшированным, то Вы возможно не обновили кэш сайта.
                В главном меню пункт Управление -> Обновить сайт (Очистить кэш сайта).

                На вопрос связанный с продолжением уроков могу ответить утвердительно. Продолжение уроков по созданию блога планируется, но конкретных сроков назвать не могу.
                1. Zaikace 18 февраля 2015, 16:57 # 0
                  Понятно! Кеш не помогло, лишь помогло когда зайди свои профиля и вкладка ресурсы и там поставить опубликован «нет» на «да» и появил его. Видимо вы работали со старого версии.



                  1. Zaikace 20 февраля 2015, 14:39 # 0
                    Вот урок нормальный авторизация и регистрация

                    ilyaut.ru/tips-and-tricks/authorization-registration-personal-cabinet/
            2. Тимофей 08 апреля 2015, 11:51 # 0
              Привет! Можешь подсказать — при установленном Tickets как сделать, чтобы инпут комментария выводился только после нажатия на кнопку «Оставить новый комментарий», как на этом сайте сделано? Интересует именно пошагово, и желательно стандартными методами, потому что все пишут «там всего 3 строчки js». А я в этом самом js пока не силен. Спасибо.
              1. Александр Мальцев 08 апреля 2015, 13:35 # 0
                Добрый день, Тимофей.
                Что-то ты сильно перемудрил в вопросе.
                Данный момент решается на уровне CSS. Тебе необходимо добавить следующее правило в свой файл стилей CSS:
                #comment-form {
                display: none;
                }
                
              2. Тимофей 09 апреля 2015, 10:00 # 0
                Александр, спасибо! Очень хороший сайт, добавил в закладки. Будут еще вопросы ))
                1. Алексей 06 ноября 2015, 01:17 # 0
                  Здравствуйте!
                  Подскажите как реализовать с помощью pdomenu трех и выше уровневое меню (использую стили Вootstrap2 в B3 dropdown-submenu нет) с подобным кодом.
                   <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Дом и дача </a>
                  	<ul class="dropdown-menu" >
                  		<li><a href="#">Название меню</a></li>
                                  	<li class="dropdown-submenu"><a href="#"  data-toggle="dropdown">Action</a>
                                    		<ul class="dropdown-menu">
                  					<li><a href="#" tabindex="-1">Sub Action</a></li>
                  Очень нужно…
                  Спасибо!
                  1. Александр Мальцев 07 ноября 2015, 08:54 # 0
                    Здравствуйте, Алексей!
                    Компонент pdoMenu такое не позволяет сделать, т.к. он содержит только один параметр (&tplParentRow) с помощью значения которого он оборачивает потомков. Т.е. Вы не сможете задать для первого выпадающего списка один шаблон, а для второго другой.
                    1. Андрей 11 ноября 2015, 20:53 # 0
                      Александр, спасибо за Ваши уроки и пояснения к ним, ведь урок без обратной связи — не урок. Скажите пожалуйста, с помощью чего можно реализовать меню с разными классами подпунктов, с помощью Wayfinder-а, или может какое комплексное решение? Мне подсказывали, что вроде можно pdoMenu в связке с pdoField это реализовать, но как не объяснили. Спасибо
                      1. Александр Мальцев 14 ноября 2015, 10:37 # 0
                        На Wayfinder:
                        [[Wayfinder?                   
                          &startId=`0`
                          &level=`3`
                          &outerClass=`nav`
                          &innerClass=`dropdown-menu`
                          &rowTpl=`tpl.wayfinder.row`
                          &innerRowTpl=`tpl.wayfinder.innerRow`
                        ]]
                        
                        Чанк tpl.wayfinder.row:
                        <li class="[[+wf.classnames]][[+wf.isfolder:is=`1`:then=` dropdown`]]">
                          <a href="[[+wf.isfolder:is=`1`:then=`#`:else=`[[+wf.link]]`]]" title="[[+wf.title]]" [[+wf.isfolder:is=`1`:then=`class="dropdown-toggle" data-toggle="dropdown"`]] [[+wf.attributes]]>[[+wf.linktext]][[+wf.isfolder:is=`1`:then=`<b class="caret"></b>`]]
                          </a>
                          [[+wf.wrapper]]
                        </li>
                        
                        Чанк tpl.wayfinder.innerRow:
                        <li class="[[+wf.level:is=`2`:then=`dropdown-submenu`:else=``]]"><a href="[[+wf.link]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
                        
                      2. Алексей 10 декабря 2015, 09:54 # 0
                        Скажите, Александр, может есть другой компонент позволяющий реализовать подобное меню? То что вы написали в ответе Андрею, как я понимаю это то что нужно. То есть нужно создать эти два чанка? Но вы знаете я прочитал на одном из форумов (https://modxclub.ru/topics/medlennaya-rabota-snippeta-wayfinder-s-bolshim-kolichestvom-dokumentov-i-vlozhennyim-menyu-1845.html), что многоуровневое меню на Wayfinder сильно тормозит. Что вы об этом думаете?
                        Спасибо.
                        1. Александр Мальцев 11 декабря 2015, 09:03 # 0
                          Здравствуйте, Алексей.
                          Если вызывать Wayfinder кэшированным, то тормозов никаких не будут. Т.к. в результирующую страницу просто будет подставляться готовый (кэшированный) блок HTML-кода и никакие запросы выполняться не будут.
                    2. Алексей 10 декабря 2015, 12:25 # 0
                      Сделал по вашему совету трехуровневое меню на Wayfinder, правда в чанк tpl.wayfinder.innerRow пришлось добавить [[+wf.isfolder:is=`1`:then=`class=«dropdown-toggle» data-toggle=«dropdown»`]] иначе, третий уровень не открывался. Правда осталась одна проблема, каретки появляются у всех пунктов выпадающего меню, даже у тех, которые не имеют наследников. Подскажите, как сделать чтобы каретки были только у пунктов меню с наследниками?
                      Огромное спасибо, вы очень помогаете.
                      1. Александр Мальцев 12 декабря 2015, 04:51 # 0
                        Изменил в tpl.wayfinder.innerRow на Вашу строчку — всё работает.
                        У вас скорее всего тип ресурса не установлен как раздел.
                      2. Александр Мальцев 11 декабря 2015, 09:52 # 0
                        У Вас не работает потому что это решение для Bootstrap 2.3.2.
                        В Bootstrap 3 нет такого меню и класса dropdown-submenu.
                        Если Вам надо такое меню, то можно просто добавить в Ваш CSS следующие стили:
                        .dropdown-submenu {
                          position: relative;
                        }
                        .dropdown-submenu>.dropdown-menu {
                          top: 0;
                          left: 100%;
                          margin-top: -6px;
                          margin-left: -1px;
                          -webkit-border-radius: 0 6px 6px 6px;
                          -moz-border-radius: 0 6px 6px;
                          border-radius: 0 6px 6px 6px;
                        }
                        .dropdown-submenu:hover>.dropdown-menu {
                          display: block;
                        }
                        .dropdown-submenu>a:after {
                          display: block;
                          content: " ";
                          float: right;
                          width: 0;
                          height: 0;
                          border-color: transparent;
                          border-style: solid;
                          border-width: 5px 0 5px 5px;
                          border-left-color: #ccc;
                          margin-top: 5px;
                          margin-right: -10px;
                        }
                        .dropdown-submenu:hover>a:after {
                          border-left-color: #fff;
                        }
                        .dropdown-submenu.pull-left {
                          float: none;
                        }
                        .dropdown-submenu.pull-left>.dropdown-menu {
                          left: -100%;
                          margin-left: 10px;
                          -webkit-border-radius: 6px 0 6px 6px;
                          -moz-border-radius: 6px 0 6px 6px;
                          border-radius: 6px 0 6px 6px;
                        }
                        
                        Т.е. Ваше меню в HTML будет иметь подобную структуру:
                        <ul class="nav navbar-nav">
                          <li class="active"><a href="#">Ссылка 1<span class="sr-only">(current)</span></a></li>
                          <li><a href="#">Ссылка 2</a></li> 		    
                          <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Ссылка 3<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">				          
                              <li><a href="#">Ссылка 3-1</a></li>
                              <!-- Выпадающее меню в выпадающем меню -->
                              <li class="dropdown-submenu">
                                <a tabindex="-1" href="#">Ссылка 3-2 <i class="fa fa-chevron-right"></i></a>
                                <ul class="dropdown-menu">
                                  <li><a tabindex="-1" href="#">Ссылка 3-2-1</a></li>
                                  <li><a href="#">Ссылка 3-2-2</a></li>
                        	  <li><a href="#">Ссылка 3-2-3</a></li>
                        	</ul>
                              </li>	
                              <li><a href="#">Ссылка 3-3</a></li>
                              <li><a href="#">Ссылка 3-4</a></li>
                            </ul>
                          </li>
                        </ul>
                        
                        Также можно добавить скрипт, который будет подсвечивать родительский пункт меню:
                        $(function() {
                          $(".dropdown-menu").mouseenter(function() {
                            $(this).parent('li').addClass('active');
                          })
                          .mouseleave(function() {
                            $(this).parent('li').removeClass('active');
                          });
                        });
                        
                        1. Алексей 11 декабря 2015, 11:09 # 0
                          Добрый день Александр. Спасибо за ответы.
                          Но вы знаете, у меня подключены стили для «dropdown-submenu», но мне нужно чтобы меню открывалось при нажатии, как
                          «dropdown-toggle». А в вашей версии «dropdown-submenu» открывается по ховеру. А главное, что каретки появляются на всех пунктах, даже на тех, что не имеют потомков. То есть, класс «dropdown-submenu» стоит там, где по логике не должен из за отсутствия потомков, а также, зачем-то добавляются классы «first» «last»…
                           <ul class="nav navbar-nav">
                             <li class="first active">
                               <a href="http://gettrend.ru/" title="Главная страница"  >Главная страница </a>
                             </li>
                             <li class="dropdown">
                               <a href="#" title="О себе" class="dropdown-toggle" data-toggle="dropdown" >О себе<b class="caret"></b> </a>
                                <ul class="dropdown-menu">
                          	<li class="dropdown-submenu"><a href="o-sebe/razdel-1/" class="dropdown-toggle" data-toggle="dropdown">раздел 1</a>
                                    <ul class="dropdown-menu">
                                      <li class=""><a href="o-sebe/razdel-1/sub.html" >sub</a></li>
                                      <li class=""><a href="o-sebe/razdel-1/sub1.html" >sub1</a></li>
                                    </ul>
                                  </li>
                                  <li class="dropdown-submenu"><a href="o-sebe/razdel2.html" >раздел2</a></li>
                                </ul>
                              </li>
                              <li class="">
                                <a href="karta-bloga.html" title="Карта блога"  >Карта блога</a>
                              </li>
                              <li class="last dropdown">
                                <a href="#" title="Каталог" class="dropdown-toggle" data-toggle="dropdown" >Каталог<b class="caret"></b></a>
                                <ul class="dropdown-menu"><li class="dropdown-submenu"><a href="katalog/pervaya-kategoriya.html" >Первая категория</a></li>
                                  <li class="dropdown-submenu"><a href="katalog/vtoraya-kategoriya.html" >вторая категория</a></li>
                                </ul>
                              </li>
                           </ul>
                          
                          Подскажите пожалуйста, как это исправить?
                          Спасибо.
                          1. Александр Мальцев 11 декабря 2015, 13:30 # 0
                            Алексей, может быть Вам так не мучится, а взглянуть на какое-то готовое решение, где данный потенциал организован должным образом.
                            Например, вот на это меню Bootstrap 3, доработанное до многоуровневой структуры:
                            SmartMenus Bootstrap Addon (Navbar)
                            Скачать архив zip можно по следующей ссылке:
                            smartmenus-1.0.0-beta1.zip.
                            Его будет даже очень просто реализовать с помощью pdoMenu.
                            1. Алексей 11 декабря 2015, 16:46 # 0
                              Спасибо за ответ.
                              Но, дело в том, что у меня все работает, за исключением того, что class=«dropdown-submenu» добавляется ко всем пунктам меню второго уровня. Нужно сделать, как на первом уровне, где class=«dropdown» добавляется только к пунктам являющимся контейнерами.
                              SmartMenus Bootstrap Addon (Navbar) — это решение где открытие меню реализуется по ховеру, а мне нужно чтобы открывалось по нажатию -скриптом, и это у меня прекрасно работает.
                              Можно ли, как нибудь модифицировать чанк tpl.wayfinder.innerRow, чтобы class=«dropdown-submenu» добавляется только к пунктам являющимся контейнерами с потомками?
                              1. Александр Мальцев 12 декабря 2015, 04:58 # 0
                                SmartMenus Bootstrap Addon (Navbar) отлично работает на смартфонах и планшетах.
                                1. Алексей 13 декабря 2015, 13:59 # 0
                                  Добрый день!
                                  Извините за назойливость, — никак не могу решить эту проблему с меню.

                                  Структура следующая:

                                  Главная — не контейнер! ( класс «dropdown» не подставляется — каретки нет) — все как надо

                                  О себе — не контейнер! ( класс «dropdown» не подставляется — каретки нет) — все как надо

                                  Каталог — контейнер! ( подставляется класс «dropdown» — появляется каретка) — все как надо
                                  Категория каталога — контейнер! ( подставляется класс «dropdown-submenu» подставляется — появляется каретка) — все как надо
                                  — Товар1
                                  — Товар2

                                  Категория каталога — не контейнер! ( класс «dropdown-submenu» все равно подставляется — появляется каретка) — этого быть не должно!!!
                                  — вложений нет!!!

                                  То есть, на первом уровне все работает как надо, а на втором проблема с каретками, в остальном все прекрасно. Не пойму где ошибка.
                                  Если, это очень сложно исправить, напишите пожалуйста, как реализовать подобное меню с помощью SmartMenus Bootstrap Addon (Navbar).
                                  Спасибо.
                                  1. Александр Мальцев 14 декабря 2015, 05:04 # 0
                                    Здравствуйте, Алексей.
                                    Может быть Вы Wayfinder вызываете кэшированным и при этом не обновляете кэш сайта.
                                    Попробуйте очистить кэш сайте или вызывать Wayfinder не кэшированнным. Т.к. у меня каретки появляются только в нужных местах.
                                    [[!Wayfinder? 
                                    
                                    Насчёт меню SmartMenus Bootstrap Addon (Navbar)…
                                    Если Вы хотите чтобы открывались пункты по click, то добавьте в файл jquery.smartmenus.js параметр showOnClick: true.
                                    ...
                                    $this.addClass('sm').smartmenus({
                                      // these are some good default options that should work for all
                                      // you can, of course, tweak these as you like
                                      <b>showOnClick : true,</b>
                                      subMenusSubOffsetX: 2,
                                    
                            2. Александр Мальцев 12 декабря 2015, 04:55 # 0
                              Классы first, last добавляются чтобы Вы на них могли что-либо повесить. Например какие-то стили. Если они Вам не нужны, то уберите их, добавив в вызов сниппета следующие параметры:
                              &firstClass=``
                              &lastClass=``
                              
                          2. Алексей 10 января 2016, 19:37 # 0
                            Александр, подскажи, где прописывать
                            <span class="glyphicon glyphicon-*name">
                            чтобы пользоваться иконками Glyphicons в меню, как у тебя? Меню организовано через pdoMenu.
                            1. Александр Мальцев 11 января 2016, 10:58 # 0
                              У меня это сделано прямо в пункте меню:
                              <span class="glyphicon glyphicon-book"></span> Уроки и статьи
                              
                              Но, можно также сделать через дополнительное поле (tv).
                            2. Алексей 11 января 2016, 11:27 # 0
                              Не понял, что значит прямо в пункте меню? Оно у тебя статическое?)
                              Если взять код из чанка «chunk.navbar», то куда там это вставляется?
                              1. Александр Мальцев 11 января 2016, 14:53 # 0
                                В смысле?

                                Открываем ресурс -> В первой вкладке ищем поле «Пункт меню» -> Вставляем перед названием пункта меню нужную иконку

                                MODX - Поле Пункт меню

                                Больше делать ничего не надо…
                                Сниппет pdoMenu формирует меню. Он подставляет вместо плейсхолдера [[+menutitle]] соответствующее значение из ресурсов, т.е. значение поля Пункт меню.
                                MODX - Сниппет pdoMenu
                              2. Алексей 12 января 2016, 10:55 # 0
                                Лучи добра за очередной развёрнутый ответ. Через атрибуты ссылки ещё можно реализовать)
                                1. Александр Мальцев 13 января 2016, 12:08 # 0
                                  Нет, атрибуты ссылки предназначены для указания атрибутов таких как target или rel.
                                  Это можно сделать ещё через дополнительное поле (tv).
                                  1. Алексей 13 января 2016, 15:36 # 0
                                    Может и так) Но у меня работает через атрибуты ссылки) Код выглядит так:
                                    &tpl=`@INLINE <li><a href="/[[+link]]">[[+attributes]]  [[+menutitle]]</a>[[+wrapper]]</li>`
                                    Можешь проверить)
                                    Почему itchief.ru/modx-revo-creating-a-template-for-posts 404 выдаёт? Куда спрятал статью?)
                                    1. Александр Мальцев 14 января 2016, 12:53 # 0
                                      Зачем проверять? Вы ведь уже проверили :)
                                      Ссылку исправил.
                                      1. Алексей 14 января 2016, 18:55 # 0
                                        Давай на ты) А то как враги в древние времена)
                                        Подскажи, Я так понимаю у тебя Яндекс транслит для ссылок стоит. Это даёт какие-то преимущества в плане сео? Или чем обоснован твой выбор в его пользу?)
                                        1. Александр Мальцев 15 января 2016, 15:48 # 0
                                          Хорошо.
                                          Да, просто мне больше нравиться перевод, а не транслитерация.
                                          В плане SEO никакой разницы нету, если конечно твой проект не предназначен для англоязычной аудитории.
                                          Т.е. если твой сайт только для русскоговорящей аудитории, то разницы нет. А если в будущем твой проект вырастит и появится необходимость в добавлении английского языка на сайт, то стоит задуматься и может выбрать изначально именно перевод…
                                          1. Алексей 15 января 2016, 16:10 # 0
                                            Понял. Планируешь ли сделать статью про теги к постам? Или они уже не актуальны?
                                            1. Александр Мальцев 15 января 2016, 16:38 # 0
                                              Если ты про метатеги keywords, то в такой статье не вижу смысла.
                                              Сейчас метатеги лучше не использовать, т.к. они никакого положительного эффекта не дадут, а отметить твой сайт как спам могут :)
                                              К ним надо относиться осторожно, они не должны содержать ключевые слова не относящиеся к конкретной странице. Короче их лучше не использовать.
                                              1. Алексей 15 января 2016, 17:00 # 0
                                                Не. Я про теги, которые делаются с помощью tagLister, например)
                                              2. Александр Мальцев 15 января 2016, 17:08 # 0
                                                Да, такую статью можно сделать. Ну тогда и облаков тегов к ней с загрузкой через AJAX.
                                                Использовать для этого дела компонент — это сильно круто.
                                                Возьму на заметку, обязательно сделаю. Но без установки дополнительных компонентов… :)
                                                1. Алексей 15 января 2016, 18:29 # 0
                                                  Почему круто? Для остального же используются компоненты) Хотя, тебе виднее)
                                                  Буду ждать. А в Тикетсе нет такой возможности?
                                                  1. Александр Мальцев 17 января 2016, 11:27 # 0
                                                    Да, но он скорее использует getResources, использует TV-поля и не поддерживает AJAX. Т.е. он потребует установку ещё одного не нужного компонента.
                                                    Так что будем использовать pdoTools, которые уже установлены…
                                                    1. Алексей 17 января 2016, 18:41 # 0
                                                      Если так, то да) Лучше pdoTools тогда использовать)
                                  2. Алексей 07 февраля 2016, 16:37 # 0
                                    Шеф, а что дают в пдоМеню параметры
                                    [[+classnames]]
                                    и
                                    &rowClass=`menuid[[+id]]`
                                    Я понимаю, что в результате в меню получится
                                    <li class="menuid10 first">
                                    А вот для чего это нужно не пойму. Без этих параметров меню тоже работает. В чём профит, так сказать?
                                    1. Александр Мальцев 08 февраля 2016, 15:42 # 0
                                      Чтобы стили CSS на них повесить, можно их ещё с javascript связать. Меню разные бывают и задачи разные… Например, если ты используешь Bootstrap, то смотришь какой должен получиться HTML код и какие должны быть классы чтобы работало это меню. Например, в Bootstrap классов menuid10 и first нет. Значит, они и не нужны. Т.е. если ты хочешь получить меню Bootstrap, то так настраиваешь компонент pdoMenu, что бы на выходе получился нужный код с нужными классами.
                                    2. dilshod 15 марта 2016, 12:36 # 0
                                      Здравствуйте,
                                      Например: создадим пустой файл syles.css, который расположим в каталоге assets/bootstrap/css/ -------должен быть styles.css пропущен t в самом начале, спасибо за уроки…
                                      1. Александр Мальцев 15 марта 2016, 14:09 # 0
                                        Здравствуйте.
                                        Спасибо, откорректировал.
                                      2. Игорь Денисов 16 марта 2016, 16:19 # 0
                                        Здравствуйте Александр!
                                        У меня возник вопрос к Вам, может быть ответ на него достаточно элементарный, но все же… все никак не могу в документации найти параметр:
                                        [[!pdoPage?
                                            &action=``
                                        ]]
                                        Я, конечно, не исключаю тот вариант что я плохо искал… но не могли бы Вы дать описание параметру &action и в каких случаях его используют?!
                                        Заранее спасибо за ответ.
                                        1. Александр Мальцев 17 марта 2016, 03:50 # +1
                                          Параметр &action относится не к pdoPage, а к сниппету getTickets. Он определяет его режим работы, т.е. что Вам возвращать комментарии (Comments) или тикеты (Tickets). По умолчанию он возвращает комментарии. А т.к. нам надо было возвращать тикеты, то мы это указали.
                                          [[!pdoPage? 
                                            &element=`getTickets`
                                            &action=`tickets`
                                            ...
                                          
                                          P.S. Сниппет pdoPage выполняет только разбивку некоторых данных (которые ему предоставили) на страницы. Сам по себе данный сниппет не выполняет никакие запросы к БД, и поэтому у него данных нет. Поэтому для получения данных используются другие сниппеты, например, getTickets. Этот сниппет (getTickets) предоставляет данные pdoPage, которые он затем разбивает на страницы.
                                          1. Игорь Денисов 17 марта 2016, 08:32 # 0
                                            Спасибо за ответ!
                                            Теперь все понятно. Кстати, Вы случайно не планируете еще выкладывать уроки по modx? Было бы здорово!)
                                            1. Игорь Денисов 17 марта 2016, 10:53 # 0
                                              Например такие как работа с TV, с плейсхолдерами и т.д.
                                              Так же авторизация пользователей и возможности авторизованных и не авторизованных пользователей… В общем все полезное и необходимое, было бы действительно здорово!))
                                              1. Алексей 17 марта 2016, 12:53 # 0
                                                С ТВ и плейсхолдерами всё более менее просто) А вот авторизацию пользователей и их права поддерживаю)
                                                1. Александр Мальцев 19 марта 2016, 14:51 # 0
                                                  Как что-то напишу по MODX, то обязательно выложу.
                                                  Ваши пожелания и хотелки обязательно учту)
                                        2. Андрей 24 марта 2016, 14:52 # 0
                                          Добрый день, сделал все по уроку но не могу понять первый пункт «Использование сниппетов в веб-странице»
                                          Куда нужно вставлять этот код
                                          [[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=`getTickets`
                                            &action=`tickets` 
                                            &parents=`2`
                                            &limit=`2`
                                          ]] 
                                          [[!+page.nav]]
                                          Заранее спасибо
                                          1. Андрей 24 марта 2016, 15:31 # 0
                                            Все вроде понял но почему то не открывается подменю если нажать на блог, сделал все по уроку


                                            скриншот
                                            1. Александр Мальцев 24 марта 2016, 15:42 # 0
                                              Нажмите в браузере клавишу F12 (вкладка консоль) и посмотрите на ошибки (если они есть). Скорее всего что-то с названиями или путями к файлам js напутали.
                                              1. shop-dk 25 марта 2016, 00:09 # 0
                                                Спасибо исправил дело было в путях
                                            2. shop-dk 25 марта 2016, 00:12 # 0
                                              Еще такой вопрос,
                                              Я создал раздел блог и у него подменю блог 1, блок 2.
                                              Но если я добавляю тикет для блога 2 то он показывается и в других разделах я так понял что это нужно для всех разделов делать свой шаблон
                                              [[!pdoPage? 
                                                &element=`getTickets`
                                                &action=`tickets` 
                                                &parents=`2` // id блога
                                                &limit=`2`
                                              ]] 
                                              [[!+page.nav]]
                                              
                                              [[!pdoPage? 
                                                &element=`getTickets`
                                                &action=`tickets` 
                                                &parents=`2` // id блога 2
                                                &limit=`2`
                                              ]] 
                                              [[!+page.nav]]
                                              
                                              Я правильно понял это правильное решение или есть более правильное?
                                              Заранее благодарен.
                                              1. Александр Мальцев 25 марта 2016, 06:36 # 0
                                                Не обязательно — один шаблон можно использовать для какого угодно числа ресурсов.
                                                Вторую часть вопроса не совсем понял. Если Вы про содержимое раздела, то он тоже может быть каким угодно. Т.е. в зависимости от того, что Вы хотите, чтобы он выводил, когда пользователь на него попадёт.
                                                Если Вам необходимо вывести ресурсы с нескольких разделов, то так:
                                                [[!pdoPage? 
                                                  &element=`getTickets`
                                                  &action=`tickets` 
                                                  &parents=`2,3,4` // будет выводит ресурсы из разделов, имеющих id = 2, 3 и 4.
                                                  &limit=`2`
                                                ]] 
                                                [[!+page.nav]]
                                                
                                              2. Легион 13 июня 2016, 23:15 # 0
                                                Все перерыл, но ответа так и не нашел.
                                                Необходимо сделать вывод новостей блоками, например, в три блока. Сверстал шаблон, проверил, как страницу — все отлично. Проблемы начинаются когда пытаешься «натянуть» на ModX. Не могу понять, что отвечает за вывод новостей.
                                                Если
                                                [[!pdoPage? &element=`getTickets` ]]
                                                обернуть блоком с float, то все равно все новости появляются в этом одном блоке. НЕ отдельными блоками, а просто в одном.
                                                Обворачивание tpl.Tickets.meta тоже не приводит к желаемому результату, так как в этом случае и полная новость становится блоком в треть экрана. Не подскажете, за что отвечает вывод новостей. нО не просто отвечает, а где можно отредактировать отображение конкретного блока?
                                                1. Александр Мальцев 14 июня 2016, 12:30 # 0
                                                  Необходимо создать свой собственный чанк, например tpl.Tickets.list.row.my и указать его сниппету в качестве значения параметра tpl:
                                                  [[!pdoPage? 
                                                    &element=`getTickets`
                                                    &tpl=`tpl.Tickets.list.row.my`
                                                    &limit=`6`
                                                  ]]
                                                  [[!+page.nav]]
                                                  
                                                  1. Легион 14 июня 2016, 21:59 # 0
                                                    Спасибо большое, помогло. Правда, пришлось минут 10 повозиться, прежде чем разобраться. Все-таки, архитектура ModX для меня пока непонятна. Я работал постоянно с DataLife Engine. Там и архитектура понятней, и работа. А самое главное — для него есть полная и удобная инструкция.
                                                    Можно задать еще пару вопросов?
                                                    1. Можно ли в ModX организовать дополнительные поля? Например, в статье должно быть постоянное поле, которое необходимо заполнять. Грубо говоря, к примеру дом. поле Автор. И при написании статьи его нужно заполнять. И как это можно реализовать?
                                                    2. На сколько я понял из цикла статей, то главная страница у нас сама по себе. Для меня странно, зачем мы ее вообще создавали? К примеру, на сайте студии или портфолио понято, но не на блоге. Отсюда вопрос, из той же архитектуры, которая в статье, можно ли вывести новости на главной? Или новости появляются только в той сущности, которую мы отдали под тикеты?
                                                    3. Если я хочу создать разделы, то мне необходимо создать сущности с названием разделов, и каждую из них отдать под тикеты? А потом просто выводить посредством выборки из id разделов? Или я что-то не так понял?
                                                    Заранее, благодарю.
                                                    1. Александр Мальцев 14 июня 2016, 23:40 # 0
                                                      1. Можно, но они привязываются к ресурсам через шаблон. Т.е. создаёте необходимое количество дополнительных полей (TV-полей) и в настройке каждого из этих полей устанавливаете его доступным для определённых шаблонов. После этого у ресурсов, имеющих этот шаблон, появятся соответствующие поля.
                                                      2. Тут всё приведено в качестве примера. Если у Вас главная страница будет сильно не похожа на другие страницы блога, то её содержимое логично сделать в виде отдельного шаблона или использовать в качестве вывода её содержимое (если не нужны TV-переменные). В MODX Revolution вне зависимости от архитектуры можно выводить что угодно и где угодно.
                                                      3. Можно сделать так. А потом написать условие, что необходимо выбрать, в каком количестве и куда это поместить.
                                                2. Легион 16 июня 2016, 19:02 # 0
                                                  Спасибо большое. Буду разбираться дальше.
                                                  1. Алексей 16 июля 2016, 22:24 # 0
                                                    Подскажите, как вывести видео в тикеты? Если вставляешь в intotext через iframe то строчка просто вырезается. Как правильно вывести? Спасибо.
                                                    1. Александр Мальцев 18 июля 2016, 09:33 # 0
                                                      Это контролирует Jevix, т.е. он фильтрует содержимое во время вывода (т.е. разрешать одни теги и запрещать другие).
                                                      Здесь 2 варианта:
                                                      1. Отключить его (можно для отдельной страницы).
                                                      2. Разрешить соответствующие теги в настойках Jevix. Конфигурирование Jevix осуществляется на странице «Наборы параметров» (в главном меню админки: шестерёнка->наборы параметров). На этой страницы параметры собраны отдельно для тикетов и комментариев.
                                                    2. Алексей 29 августа 2016, 19:45 # 0
                                                      Здравствуйте.
                                                      Подскажите пожалуйста, как сделать, чтобы чанк выводился при определенном разрешении экрана, по аналогии медиа-запросов CSS. Но display:none не подходит, нужно чтоб код не выводился вообще.
                                                      Спасибо.
                                                      1. Александр Мальцев 31 августа 2016, 12:52 # 0
                                                        Здравствуйте. На сервере нельзя определить разрешение экрана пользователя. Это можно сделать только на стороне клиента с помощью JavaScript. Самый лучший вариант в этом случае — это использование AJAX. Т.е. после загрузки страницы, Вы можете с помощью JavaScript определить разрешение экрана и передать его на сервер в составе запроса на получение некоторой порции информации. Сервер, получив этот запрос и данные о разрешении экрана, выдаст необходимый блок, который Вы и выведите на странице.
                                                        Если не использовать AJAX, то потребуется использовать редирект, что приведёт к более долгой загрузке страницы. Т.к. сначала потребуется определить разрешение экрана с помощью JavaScript и выполнить редирект, передав его в составе URL (?width=320). Теперь его можно получить в php и выдать необходимую страницу.

                                                        Ещё один вариант — это использование на стороне сервера сведения о User Agent в сочетании с HTTP заголовком. Наиболее просто сделать — это использовать php библиотеку Mobile Detect. Кстати, на данной библиотеке основан компонент MODX MobileDetect. Так что можно использовать его. Но он Вам только скажет только о том, какой это агент (браузер): мобильный, планшетный или десктопный. Он это делает на основании строчки User Agent браузера. Узнать с помощью него конкретное разрешение не получится.
                                                        Используется он посредством заключения контента в специальные теги:
                                                        <standard><p>Обычный браузер.</p></standard>
                                                        <tablet><p>Планшетный браузер.</p></tablet>
                                                        <mobile><p>Мобильный браузер.</p></mobile>
                                                        
                                                      2. елена 18 сентября 2016, 17:57 # 0
                                                        Здравствуйте. На Модкс рев на центральной странице тег viewport установлен. Но на вновь добавляемых страницах при проверке яндекс-мобильные страницы выдается сообщение Тег viewport не указан.Некоторые страницы уже 2 недели как в поиске. Надо ли тег дополнительно куда-то вставлять
                                                        1. Александр Мальцев 18 сентября 2016, 23:24 # 0
                                                          Здравствуйте. Тег viewport должен быть установлен на всех страницах или в шаблонах, на основании которых эти страницы формируются.
                                                          Тег viewport (если у Вас адаптивная разметка) указывается в разделе head HTML документа так:
                                                          <meta name="viewport" content="width=device-width, initial-scale=1">
                                                          
                                                        2. Verteletsky 28 ноября 2016, 16:09 # 0
                                                          Здравствуйте, я подключил 4 bootstrap, все сделал как у вас, но не отображаются иконки, я начал гуглить в сторону awesome, подключил, но как кастомизировать getTickets, pdoMenu, хлебные крошки и другие тулзы, подскажите пожалуйста как добавить иконки.
                                                          1. Verteletsky 28 ноября 2016, 16:29 # 0
                                                            Нашел чанк, tpl.Tickets.meta, поменял картинки на awesome, но результат не изменился, он все равно их подтягивает из glyphicon
                                                            1. Verteletsky 28 ноября 2016, 16:43 # 0
                                                              При добавлении комментария, счетчик остается 0, в чем может быть проблема?
                                                              1. Александр Мальцев 30 ноября 2016, 10:13 # 0
                                                                По умолчанию Tickets считает только просмотры, выполненные зарегистрированными пользователями. Если вы хотите считать гостей, то необходимо данный параметр активировать (включить) в системных настройках. Для этого нажимаем на значок шестерёнки -> выбираем ticket -> tickets.count_guests (Считать просмотры страниц гостями) -> выбираем из раскрывающего списка значение «Да».
                                                              2. Александр Мальцев 30 ноября 2016, 10:06 # 0
                                                                Очистите кэш (в админке: Управление -> Очистить кэш), а также откройте страницу в другом браузере или в режиме инкогнито.
                                                              3. Александр Мальцев 30 ноября 2016, 10:03 # 0
                                                                Здравствуйте, в этом случае придётся редактировать каждый чанк. Если вы это не хотите это делать, то подключите к странице иконки Glyphicon Halflings, доступные в Bootstrap 3.

                                                              Вы должны авторизоваться, чтобы оставлять комментарии.