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    7460 0

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

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

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

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

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

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

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

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

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

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



                  1. Zaikace # 0
                    Вот урок нормальный авторизация и регистрация

                    ilyaut.ru/tips-and-tricks/authorization-registration-personal-cabinet/
            2. Тимофей # 0
              Привет! Можешь подсказать — при установленном Tickets как сделать, чтобы инпут комментария выводился только после нажатия на кнопку «Оставить новый комментарий», как на этом сайте сделано? Интересует именно пошагово, и желательно стандартными методами, потому что все пишут «там всего 3 строчки js». А я в этом самом js пока не силен. Спасибо.
              1. Александр Мальцев # 0
                Добрый день, Тимофей.
                Что-то ты сильно перемудрил в вопросе.
                Данный момент решается на уровне CSS. Тебе необходимо добавить следующее правило в свой файл стилей CSS:
                #comment-form {
                display: none;
                }
                
              2. Тимофей # 0
                Александр, спасибо! Очень хороший сайт, добавил в закладки. Будут еще вопросы ))
                1. Алексей # 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. Александр Мальцев # 0
                    Здравствуйте, Алексей!
                    Компонент pdoMenu такое не позволяет сделать, т.к. он содержит только один параметр (&tplParentRow) с помощью значения которого он оборачивает потомков. Т.е. Вы не сможете задать для первого выпадающего списка один шаблон, а для второго другой.
                    1. Андрей # 0
                      Александр, спасибо за Ваши уроки и пояснения к ним, ведь урок без обратной связи — не урок. Скажите пожалуйста, с помощью чего можно реализовать меню с разными классами подпунктов, с помощью Wayfinder-а, или может какое комплексное решение? Мне подсказывали, что вроде можно pdoMenu в связке с pdoField это реализовать, но как не объяснили. Спасибо
                      1. Александр Мальцев # 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. Алексей # 0
                        Скажите, Александр, может есть другой компонент позволяющий реализовать подобное меню? То что вы написали в ответе Андрею, как я понимаю это то что нужно. То есть нужно создать эти два чанка? Но вы знаете я прочитал на одном из форумов (https://modxclub.ru/topics/medlennaya-rabota-snippeta-wayfinder-s-bolshim-kolichestvom-dokumentov-i-vlozhennyim-menyu-1845.html), что многоуровневое меню на Wayfinder сильно тормозит. Что вы об этом думаете?
                        Спасибо.
                        1. Александр Мальцев # 0
                          Здравствуйте, Алексей.
                          Если вызывать Wayfinder кэшированным, то тормозов никаких не будут. Т.к. в результирующую страницу просто будет подставляться готовый (кэшированный) блок HTML-кода и никакие запросы выполняться не будут.
                    2. Алексей # 0
                      Сделал по вашему совету трехуровневое меню на Wayfinder, правда в чанк tpl.wayfinder.innerRow пришлось добавить [[+wf.isfolder:is=`1`:then=`class=«dropdown-toggle» data-toggle=«dropdown»`]] иначе, третий уровень не открывался. Правда осталась одна проблема, каретки появляются у всех пунктов выпадающего меню, даже у тех, которые не имеют наследников. Подскажите, как сделать чтобы каретки были только у пунктов меню с наследниками?
                      Огромное спасибо, вы очень помогаете.
                      1. Александр Мальцев # 0
                        Изменил в tpl.wayfinder.innerRow на Вашу строчку — всё работает.
                        У вас скорее всего тип ресурса не установлен как раздел.
                      2. Александр Мальцев # 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. Алексей # 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. Александр Мальцев # 0
                            Алексей, может быть Вам так не мучится, а взглянуть на какое-то готовое решение, где данный потенциал организован должным образом.
                            Например, вот на это меню Bootstrap 3, доработанное до многоуровневой структуры:
                            SmartMenus Bootstrap Addon (Navbar)
                            Скачать архив zip можно по следующей ссылке:
                            smartmenus-1.0.0-beta1.zip.
                            Его будет даже очень просто реализовать с помощью pdoMenu.
                            1. Алексей # 0
                              Спасибо за ответ.
                              Но, дело в том, что у меня все работает, за исключением того, что class=«dropdown-submenu» добавляется ко всем пунктам меню второго уровня. Нужно сделать, как на первом уровне, где class=«dropdown» добавляется только к пунктам являющимся контейнерами.
                              SmartMenus Bootstrap Addon (Navbar) — это решение где открытие меню реализуется по ховеру, а мне нужно чтобы открывалось по нажатию -скриптом, и это у меня прекрасно работает.
                              Можно ли, как нибудь модифицировать чанк tpl.wayfinder.innerRow, чтобы class=«dropdown-submenu» добавляется только к пунктам являющимся контейнерами с потомками?
                              1. Александр Мальцев # 0
                                SmartMenus Bootstrap Addon (Navbar) отлично работает на смартфонах и планшетах.
                                1. Алексей # 0
                                  Добрый день!
                                  Извините за назойливость, — никак не могу решить эту проблему с меню.

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

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

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

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

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

                                  То есть, на первом уровне все работает как надо, а на втором проблема с каретками, в остальном все прекрасно. Не пойму где ошибка.
                                  Если, это очень сложно исправить, напишите пожалуйста, как реализовать подобное меню с помощью SmartMenus Bootstrap Addon (Navbar).
                                  Спасибо.
                                  1. Александр Мальцев # 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. Александр Мальцев # 0
                              Классы first, last добавляются чтобы Вы на них могли что-либо повесить. Например какие-то стили. Если они Вам не нужны, то уберите их, добавив в вызов сниппета следующие параметры:
                              &firstClass=``
                              &lastClass=``
                              
                          2. Алексей # 0
                            Александр, подскажи, где прописывать
                            <span class="glyphicon glyphicon-*name">
                            чтобы пользоваться иконками Glyphicons в меню, как у тебя? Меню организовано через pdoMenu.
                            1. Александр Мальцев # 0
                              У меня это сделано прямо в пункте меню:
                              <span class="glyphicon glyphicon-book"></span> Уроки и статьи
                              
                              Но, можно также сделать через дополнительное поле (tv).
                            2. Алексей # 0
                              Не понял, что значит прямо в пункте меню? Оно у тебя статическое?)
                              Если взять код из чанка «chunk.navbar», то куда там это вставляется?
                              1. Александр Мальцев # 0
                                В смысле?

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

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

                                Больше делать ничего не надо…
                                Сниппет pdoMenu формирует меню. Он подставляет вместо плейсхолдера [[+menutitle]] соответствующее значение из ресурсов, т.е. значение поля Пункт меню.
                                MODX - Сниппет pdoMenu
                              2. Алексей # 0
                                Лучи добра за очередной развёрнутый ответ. Через атрибуты ссылки ещё можно реализовать)
                                1. Александр Мальцев # 0
                                  Нет, атрибуты ссылки предназначены для указания атрибутов таких как target или rel.
                                  Это можно сделать ещё через дополнительное поле (tv).
                                  1. Алексей # 0
                                    Может и так) Но у меня работает через атрибуты ссылки) Код выглядит так:
                                    &tpl=`@INLINE <li><a href="/[[+link]]">[[+attributes]]  [[+menutitle]]</a>[[+wrapper]]</li>`
                                    Можешь проверить)
                                    Почему itchief.ru/modx-revo-creating-a-template-for-posts 404 выдаёт? Куда спрятал статью?)
                                    1. Александр Мальцев # 0
                                      Зачем проверять? Вы ведь уже проверили :)
                                      Ссылку исправил.
                                      1. Алексей # 0
                                        Давай на ты) А то как враги в древние времена)
                                        Подскажи, Я так понимаю у тебя Яндекс транслит для ссылок стоит. Это даёт какие-то преимущества в плане сео? Или чем обоснован твой выбор в его пользу?)
                                        1. Александр Мальцев # 0
                                          Хорошо.
                                          Да, просто мне больше нравиться перевод, а не транслитерация.
                                          В плане SEO никакой разницы нету, если конечно твой проект не предназначен для англоязычной аудитории.
                                          Т.е. если твой сайт только для русскоговорящей аудитории, то разницы нет. А если в будущем твой проект вырастит и появится необходимость в добавлении английского языка на сайт, то стоит задуматься и может выбрать изначально именно перевод…
                                          1. Алексей # 0
                                            Понял. Планируешь ли сделать статью про теги к постам? Или они уже не актуальны?
                                            1. Александр Мальцев # 0
                                              Если ты про метатеги keywords, то в такой статье не вижу смысла.
                                              Сейчас метатеги лучше не использовать, т.к. они никакого положительного эффекта не дадут, а отметить твой сайт как спам могут :)
                                              К ним надо относиться осторожно, они не должны содержать ключевые слова не относящиеся к конкретной странице. Короче их лучше не использовать.
                                              1. Алексей # 0
                                                Не. Я про теги, которые делаются с помощью tagLister, например)
                                              2. Александр Мальцев # 0
                                                Да, такую статью можно сделать. Ну тогда и облаков тегов к ней с загрузкой через AJAX.
                                                Использовать для этого дела компонент — это сильно круто.
                                                Возьму на заметку, обязательно сделаю. Но без установки дополнительных компонентов… :)
                                                1. Алексей # 0
                                                  Почему круто? Для остального же используются компоненты) Хотя, тебе виднее)
                                                  Буду ждать. А в Тикетсе нет такой возможности?
                                                  1. Александр Мальцев # 0
                                                    Да, но он скорее использует getResources, использует TV-поля и не поддерживает AJAX. Т.е. он потребует установку ещё одного не нужного компонента.
                                                    Так что будем использовать pdoTools, которые уже установлены…
                                                    1. Алексей # 0
                                                      Если так, то да) Лучше pdoTools тогда использовать)
                                  2. Алексей # 0
                                    Шеф, а что дают в пдоМеню параметры
                                    [[+classnames]]
                                    и
                                    &rowClass=`menuid[[+id]]`
                                    Я понимаю, что в результате в меню получится
                                    <li class="menuid10 first">
                                    А вот для чего это нужно не пойму. Без этих параметров меню тоже работает. В чём профит, так сказать?
                                    1. Александр Мальцев # 0
                                      Чтобы стили CSS на них повесить, можно их ещё с javascript связать. Меню разные бывают и задачи разные… Например, если ты используешь Bootstrap, то смотришь какой должен получиться HTML код и какие должны быть классы чтобы работало это меню. Например, в Bootstrap классов menuid10 и first нет. Значит, они и не нужны. Т.е. если ты хочешь получить меню Bootstrap, то так настраиваешь компонент pdoMenu, что бы на выходе получился нужный код с нужными классами.
                                    2. dilshod # 0
                                      Здравствуйте,
                                      Например: создадим пустой файл syles.css, который расположим в каталоге assets/bootstrap/css/ -------должен быть styles.css пропущен t в самом начале, спасибо за уроки…
                                      1. Александр Мальцев # 0
                                        Здравствуйте.
                                        Спасибо, откорректировал.
                                      2. Игорь Денисов # 0
                                        Здравствуйте Александр!
                                        У меня возник вопрос к Вам, может быть ответ на него достаточно элементарный, но все же… все никак не могу в документации найти параметр:
                                        [[!pdoPage?
                                            &action=``
                                        ]]
                                        Я, конечно, не исключаю тот вариант что я плохо искал… но не могли бы Вы дать описание параметру &action и в каких случаях его используют?!
                                        Заранее спасибо за ответ.
                                        1. Александр Мальцев # +1
                                          Параметр &action относится не к pdoPage, а к сниппету getTickets. Он определяет его режим работы, т.е. что Вам возвращать комментарии (Comments) или тикеты (Tickets). По умолчанию он возвращает комментарии. А т.к. нам надо было возвращать тикеты, то мы это указали.
                                          [[!pdoPage? 
                                            &element=`getTickets`
                                            &action=`tickets`
                                            ...
                                          
                                          P.S. Сниппет pdoPage выполняет только разбивку некоторых данных (которые ему предоставили) на страницы. Сам по себе данный сниппет не выполняет никакие запросы к БД, и поэтому у него данных нет. Поэтому для получения данных используются другие сниппеты, например, getTickets. Этот сниппет (getTickets) предоставляет данные pdoPage, которые он затем разбивает на страницы.
                                          1. Игорь Денисов # 0
                                            Спасибо за ответ!
                                            Теперь все понятно. Кстати, Вы случайно не планируете еще выкладывать уроки по modx? Было бы здорово!)
                                            1. Игорь Денисов # 0
                                              Например такие как работа с TV, с плейсхолдерами и т.д.
                                              Так же авторизация пользователей и возможности авторизованных и не авторизованных пользователей… В общем все полезное и необходимое, было бы действительно здорово!))
                                              1. Алексей # 0
                                                С ТВ и плейсхолдерами всё более менее просто) А вот авторизацию пользователей и их права поддерживаю)
                                                1. Александр Мальцев # 0
                                                  Как что-то напишу по MODX, то обязательно выложу.
                                                  Ваши пожелания и хотелки обязательно учту)
                                        2. Андрей # 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. Андрей # 0
                                            Все вроде понял но почему то не открывается подменю если нажать на блог, сделал все по уроку


                                            скриншот
                                            1. Александр Мальцев # 0
                                              Нажмите в браузере клавишу F12 (вкладка консоль) и посмотрите на ошибки (если они есть). Скорее всего что-то с названиями или путями к файлам js напутали.
                                              1. shop-dk # 0
                                                Спасибо исправил дело было в путях
                                            2. shop-dk # 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. Александр Мальцев # 0
                                                Не обязательно — один шаблон можно использовать для какого угодно числа ресурсов.
                                                Вторую часть вопроса не совсем понял. Если Вы про содержимое раздела, то он тоже может быть каким угодно. Т.е. в зависимости от того, что Вы хотите, чтобы он выводил, когда пользователь на него попадёт.
                                                Если Вам необходимо вывести ресурсы с нескольких разделов, то так:
                                                [[!pdoPage? 
                                                  &element=`getTickets`
                                                  &action=`tickets` 
                                                  &parents=`2,3,4` // будет выводит ресурсы из разделов, имеющих id = 2, 3 и 4.
                                                  &limit=`2`
                                                ]] 
                                                [[!+page.nav]]
                                                
                                              2. Легион # 0
                                                Все перерыл, но ответа так и не нашел.
                                                Необходимо сделать вывод новостей блоками, например, в три блока. Сверстал шаблон, проверил, как страницу — все отлично. Проблемы начинаются когда пытаешься «натянуть» на ModX. Не могу понять, что отвечает за вывод новостей.
                                                Если
                                                [[!pdoPage? &element=`getTickets` ]]
                                                обернуть блоком с float, то все равно все новости появляются в этом одном блоке. НЕ отдельными блоками, а просто в одном.
                                                Обворачивание tpl.Tickets.meta тоже не приводит к желаемому результату, так как в этом случае и полная новость становится блоком в треть экрана. Не подскажете, за что отвечает вывод новостей. нО не просто отвечает, а где можно отредактировать отображение конкретного блока?
                                                1. Александр Мальцев # 0
                                                  Необходимо создать свой собственный чанк, например tpl.Tickets.list.row.my и указать его сниппету в качестве значения параметра tpl:
                                                  [[!pdoPage? 
                                                    &element=`getTickets`
                                                    &tpl=`tpl.Tickets.list.row.my`
                                                    &limit=`6`
                                                  ]]
                                                  [[!+page.nav]]
                                                  
                                                  1. Легион # 0
                                                    Спасибо большое, помогло. Правда, пришлось минут 10 повозиться, прежде чем разобраться. Все-таки, архитектура ModX для меня пока непонятна. Я работал постоянно с DataLife Engine. Там и архитектура понятней, и работа. А самое главное — для него есть полная и удобная инструкция.
                                                    Можно задать еще пару вопросов?
                                                    1. Можно ли в ModX организовать дополнительные поля? Например, в статье должно быть постоянное поле, которое необходимо заполнять. Грубо говоря, к примеру дом. поле Автор. И при написании статьи его нужно заполнять. И как это можно реализовать?
                                                    2. На сколько я понял из цикла статей, то главная страница у нас сама по себе. Для меня странно, зачем мы ее вообще создавали? К примеру, на сайте студии или портфолио понято, но не на блоге. Отсюда вопрос, из той же архитектуры, которая в статье, можно ли вывести новости на главной? Или новости появляются только в той сущности, которую мы отдали под тикеты?
                                                    3. Если я хочу создать разделы, то мне необходимо создать сущности с названием разделов, и каждую из них отдать под тикеты? А потом просто выводить посредством выборки из id разделов? Или я что-то не так понял?
                                                    Заранее, благодарю.
                                                    1. Александр Мальцев # 0
                                                      1. Можно, но они привязываются к ресурсам через шаблон. Т.е. создаёте необходимое количество дополнительных полей (TV-полей) и в настройке каждого из этих полей устанавливаете его доступным для определённых шаблонов. После этого у ресурсов, имеющих этот шаблон, появятся соответствующие поля.
                                                      2. Тут всё приведено в качестве примера. Если у Вас главная страница будет сильно не похожа на другие страницы блога, то её содержимое логично сделать в виде отдельного шаблона или использовать в качестве вывода её содержимое (если не нужны TV-переменные). В MODX Revolution вне зависимости от архитектуры можно выводить что угодно и где угодно.
                                                      3. Можно сделать так. А потом написать условие, что необходимо выбрать, в каком количестве и куда это поместить.
                                                2. Легион # 0
                                                  Спасибо большое. Буду разбираться дальше.
                                                  1. Алексей # 0
                                                    Подскажите, как вывести видео в тикеты? Если вставляешь в intotext через iframe то строчка просто вырезается. Как правильно вывести? Спасибо.
                                                    1. Александр Мальцев # 0
                                                      Это контролирует Jevix, т.е. он фильтрует содержимое во время вывода (т.е. разрешать одни теги и запрещать другие).
                                                      Здесь 2 варианта:
                                                      1. Отключить его (можно для отдельной страницы).
                                                      2. Разрешить соответствующие теги в настойках Jevix. Конфигурирование Jevix осуществляется на странице «Наборы параметров» (в главном меню админки: шестерёнка->наборы параметров). На этой страницы параметры собраны отдельно для тикетов и комментариев.
                                                    2. Алексей # 0
                                                      Здравствуйте.
                                                      Подскажите пожалуйста, как сделать, чтобы чанк выводился при определенном разрешении экрана, по аналогии медиа-запросов CSS. Но display:none не подходит, нужно чтоб код не выводился вообще.
                                                      Спасибо.
                                                      1. Александр Мальцев # 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. елена # 0
                                                        Здравствуйте. На Модкс рев на центральной странице тег viewport установлен. Но на вновь добавляемых страницах при проверке яндекс-мобильные страницы выдается сообщение Тег viewport не указан.Некоторые страницы уже 2 недели как в поиске. Надо ли тег дополнительно куда-то вставлять
                                                        1. Александр Мальцев # 0
                                                          Здравствуйте. Тег viewport должен быть установлен на всех страницах или в шаблонах, на основании которых эти страницы формируются.
                                                          Тег viewport (если у Вас адаптивная разметка) указывается в разделе head HTML документа так:
                                                          <meta name="viewport" content="width=device-width, initial-scale=1">
                                                          
                                                        2. Verteletsky # 0
                                                          Здравствуйте, я подключил 4 bootstrap, все сделал как у вас, но не отображаются иконки, я начал гуглить в сторону awesome, подключил, но как кастомизировать getTickets, pdoMenu, хлебные крошки и другие тулзы, подскажите пожалуйста как добавить иконки.
                                                          1. Verteletsky # 0
                                                            Нашел чанк, tpl.Tickets.meta, поменял картинки на awesome, но результат не изменился, он все равно их подтягивает из glyphicon
                                                            1. Verteletsky # 0
                                                              При добавлении комментария, счетчик остается 0, в чем может быть проблема?
                                                              1. Александр Мальцев # 0
                                                                По умолчанию Tickets считает только просмотры, выполненные зарегистрированными пользователями. Если вы хотите считать гостей, то необходимо данный параметр активировать (включить) в системных настройках. Для этого нажимаем на значок шестерёнки -> выбираем ticket -> tickets.count_guests (Считать просмотры страниц гостями) -> выбираем из раскрывающего списка значение «Да».
                                                              2. Александр Мальцев # 0
                                                                Очистите кэш (в админке: Управление -> Очистить кэш), а также откройте страницу в другом браузере или в режиме инкогнито.
                                                              3. Александр Мальцев # 0
                                                                Здравствуйте, в этом случае придётся редактировать каждый чанк. Если вы это не хотите это делать, то подключите к странице иконки Glyphicon Halflings, доступные в Bootstrap 3.

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