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

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

  1. Владимир # 0
    Здравствуйте, изменил чанк tpl.Tickets.list.row вывода новостей на главное странице( вверху написал новый шаблон а старый закомментировал). Но стала отображаться только одна самая первая новость, но если раскомментировать старый то на странице будут отображаться поочередно и новый шаблон и старый. Как сделать что бы отображало с новым шаблоном? Делал по примеру отображения на вашем сайте.

    вот код чанка
    itchief.ru/assets/uploadify/6/7/b/67b542fc856ff5960826ecbcfad3224f.png
    itchief.ru/assets/uploadify/5/6/1/561464366862c37bf02c81c7e1229e6d.png
    1. Владимир # 0
      с шаблоном разобрался. Сделал tv для показа изображений image_nevs, ввод указал изображение. вывод -по умолчанию (так же пробовал указывать текст и изображение). В настройке раздела с тикетами написал &includeTVs=`1`. В шаблоне с выводом статьи написал

      img itemprop=«image» class=«center-block img-rounded» src="/[[*image_nevs]]" alt="" title=""

      так же пробовал [[+tv.image_nevs]]. Но изображение ни в каких случаях не выводятся, если убрать / в src то при просмотре кода страницы в ссылке стоит значение (unknown)
      1. Александр Мальцев # 0
        Молодец!
        Таким образом [[*image_nevs]] можно получить только значение поля у текущего ресурса. Если вы используете плейсходер, то его кто-то должен установить (например, сниппет).
        Если вы используете pdoTools, то TV выбираются так:
        &includeTVs=`image_nevs`
        &tvPrefix=`tv.`
        &processTVs=`1`
        
        В чанке, который вы используете для оформления ресурса данный TV можно получить так [[+tv.image_nevs]].
        В качестве вывода для TV (изображения) используйте текст.
        1. Владимир # 0
          Спасибо, все получилось)
    2. Verteletsky # 0
      Здравствуйте, я подключил 4 bootstrap, все сделал как у вас, но не отображаются иконки, я начал гуглить в сторону awesome, подключил, но как кастомизировать getTickets, pdoMenu, хлебные крошки и другие тулзы, подскажите пожалуйста как добавить иконки.
      1. Александр Мальцев # 0
        Здравствуйте, в этом случае придётся редактировать каждый чанк. Если вы это не хотите это делать, то подключите к странице иконки Glyphicon Halflings, доступные в Bootstrap 3.
        1. Verteletsky # 0
          Нашел чанк, tpl.Tickets.meta, поменял картинки на awesome, но результат не изменился, он все равно их подтягивает из glyphicon
          1. Александр Мальцев # 0
            Очистите кэш (в админке: Управление -> Очистить кэш), а также откройте страницу в другом браузере или в режиме инкогнито.
            1. Verteletsky # 0
              При добавлении комментария, счетчик остается 0, в чем может быть проблема?
              1. Александр Мальцев # 0
                По умолчанию Tickets считает только просмотры, выполненные зарегистрированными пользователями. Если вы хотите считать гостей, то необходимо данный параметр активировать (включить) в системных настройках. Для этого нажимаем на значок шестерёнки -> выбираем ticket -> tickets.count_guests (Считать просмотры страниц гостями) -> выбираем из раскрывающего списка значение «Да».
          2. елена # 0
            Здравствуйте. На Модкс рев на центральной странице тег viewport установлен. Но на вновь добавляемых страницах при проверке яндекс-мобильные страницы выдается сообщение Тег viewport не указан.Некоторые страницы уже 2 недели как в поиске. Надо ли тег дополнительно куда-то вставлять
            1. Александр Мальцев # 0
              Здравствуйте. Тег viewport должен быть установлен на всех страницах или в шаблонах, на основании которых эти страницы формируются.
              Тег viewport (если у Вас адаптивная разметка) указывается в разделе head HTML документа так:
              <meta name="viewport" content="width=device-width, initial-scale=1">
              
            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
                Подскажите, как вывести видео в тикеты? Если вставляешь в intotext через iframe то строчка просто вырезается. Как правильно вывести? Спасибо.
                1. Александр Мальцев # 0
                  Это контролирует Jevix, т.е. он фильтрует содержимое во время вывода (т.е. разрешать одни теги и запрещать другие).
                  Здесь 2 варианта:
                  1. Отключить его (можно для отдельной страницы).
                  2. Разрешить соответствующие теги в настойках Jevix. Конфигурирование Jevix осуществляется на странице «Наборы параметров» (в главном меню админки: шестерёнка->наборы параметров). На этой страницы параметры собраны отдельно для тикетов и комментариев.
                2. Легион # 0
                  Спасибо большое. Буду разбираться дальше.
                  1. Легион # 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. 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
                        Все вроде понял но почему то не открывается подменю если нажать на блог, сделал все по уроку


                        скриншот
                        1. Александр Мальцев # 0
                          Нажмите в браузере клавишу F12 (вкладка консоль) и посмотрите на ошибки (если они есть). Скорее всего что-то с названиями или путями к файлам js напутали.
                          1. shop-dk # 0
                            Спасибо исправил дело было в путях
                        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
                            Здравствуйте Александр!
                            У меня возник вопрос к Вам, может быть ответ на него достаточно элементарный, но все же… все никак не могу в документации найти параметр:
                            [[!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. dilshod # 0
                              Здравствуйте,
                              Например: создадим пустой файл syles.css, который расположим в каталоге assets/bootstrap/css/ -------должен быть styles.css пропущен t в самом начале, спасибо за уроки…
                              1. Александр Мальцев # 0
                                Здравствуйте.
                                Спасибо, откорректировал.
                              2. Алексей # 0
                                Шеф, а что дают в пдоМеню параметры
                                [[+classnames]]
                                и
                                &rowClass=`menuid[[+id]]`
                                Я понимаю, что в результате в меню получится
                                <li class="menuid10 first">
                                А вот для чего это нужно не пойму. Без этих параметров меню тоже работает. В чём профит, так сказать?
                                1. Александр Мальцев # 0
                                  Чтобы стили CSS на них повесить, можно их ещё с javascript связать. Меню разные бывают и задачи разные… Например, если ты используешь Bootstrap, то смотришь какой должен получиться HTML код и какие должны быть классы чтобы работало это меню. Например, в Bootstrap классов menuid10 и first нет. Значит, они и не нужны. Т.е. если ты хочешь получить меню Bootstrap, то так настраиваешь компонент 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
                                                Да, такую статью можно сделать. Ну тогда и облаков тегов к ней с загрузкой через AJAX.
                                                Использовать для этого дела компонент — это сильно круто.
                                                Возьму на заметку, обязательно сделаю. Но без установки дополнительных компонентов… :)
                                                1. Алексей # 0
                                                  Почему круто? Для остального же используются компоненты) Хотя, тебе виднее)
                                                  Буду ждать. А в Тикетсе нет такой возможности?
                                                  1. Александр Мальцев # 0
                                                    Да, но он скорее использует getResources, использует TV-поля и не поддерживает AJAX. Т.е. он потребует установку ещё одного не нужного компонента.
                                                    Так что будем использовать pdoTools, которые уже установлены…
                                                    1. Алексей # 0
                                                      Если так, то да) Лучше pdoTools тогда использовать)
                                                2. Александр Мальцев # 0
                                                  Если ты про метатеги keywords, то в такой статье не вижу смысла.
                                                  Сейчас метатеги лучше не использовать, т.к. они никакого положительного эффекта не дадут, а отметить твой сайт как спам могут :)
                                                  К ним надо относиться осторожно, они не должны содержать ключевые слова не относящиеся к конкретной странице. Короче их лучше не использовать.
                                                  1. Алексей # 0
                                                    Не. Я про теги, которые делаются с помощью tagLister, например)
                                    2. Алексей # 0
                                      Не понял, что значит прямо в пункте меню? Оно у тебя статическое?)
                                      Если взять код из чанка «chunk.navbar», то куда там это вставляется?
                                      1. Александр Мальцев # 0
                                        В смысле?

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

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

                                        Больше делать ничего не надо…
                                        Сниппет pdoMenu формирует меню. Он подставляет вместо плейсхолдера [[+menutitle]] соответствующее значение из ресурсов, т.е. значение поля Пункт меню.
                                        MODX - Сниппет pdoMenu
                                      2. Алексей # 0
                                        Александр, подскажи, где прописывать
                                        <span class="glyphicon glyphicon-*name">
                                        чтобы пользоваться иконками Glyphicons в меню, как у тебя? Меню организовано через pdoMenu.
                                        1. Александр Мальцев # 0
                                          У меня это сделано прямо в пункте меню:
                                          <span class="glyphicon glyphicon-book"></span> Уроки и статьи
                                          
                                          Но, можно также сделать через дополнительное поле (tv).
                                        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
                                              Классы first, last добавляются чтобы Вы на них могли что-либо повесить. Например какие-то стили. Если они Вам не нужны, то уберите их, добавив в вызов сниппета следующие параметры:
                                              &firstClass=``
                                              &lastClass=``
                                              
                                              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
                                              Сделал по вашему совету трехуровневое меню на Wayfinder, правда в чанк tpl.wayfinder.innerRow пришлось добавить [[+wf.isfolder:is=`1`:then=`class=«dropdown-toggle» data-toggle=«dropdown»`]] иначе, третий уровень не открывался. Правда осталась одна проблема, каретки появляются у всех пунктов выпадающего меню, даже у тех, которые не имеют наследников. Подскажите, как сделать чтобы каретки были только у пунктов меню с наследниками?
                                              Огромное спасибо, вы очень помогаете.
                                              1. Александр Мальцев # 0
                                                Изменил в tpl.wayfinder.innerRow на Вашу строчку — всё работает.
                                                У вас скорее всего тип ресурса не установлен как раздел.
                                              2. Алексей # 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
                                                    Скажите, Александр, может есть другой компонент позволяющий реализовать подобное меню? То что вы написали в ответе Андрею, как я понимаю это то что нужно. То есть нужно создать эти два чанка? Но вы знаете я прочитал на одном из форумов (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-а, или может какое комплексное решение? Мне подсказывали, что вроде можно 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
                                                    Александр, спасибо! Очень хороший сайт, добавил в закладки. Будут еще вопросы ))
                                                    1. Тимофей # 0
                                                      Привет! Можешь подсказать — при установленном Tickets как сделать, чтобы инпут комментария выводился только после нажатия на кнопку «Оставить новый комментарий», как на этом сайте сделано? Интересует именно пошагово, и желательно стандартными методами, потому что все пишут «там всего 3 строчки js». А я в этом самом js пока не силен. Спасибо.
                                                      1. Александр Мальцев # 0
                                                        Добрый день, Тимофей.
                                                        Что-то ты сильно перемудрил в вопросе.
                                                        Данный момент решается на уровне CSS. Тебе необходимо добавить следующее правило в свой файл стилей CSS:
                                                        #comment-form {
                                                        display: none;
                                                        }
                                                        
                                                      2. Zaikace # 0
                                                        Страно все сделал как вы описали и ни разу ошибку не допустил а итог получилось такой не как у вас
                                                        1. Александр Мальцев # 0
                                                          Добрый день, Zaikace. Из представленного изображения можно сделать следующие выводы:
                                                          1. У Вас, возможно, не опубликованы ресурсы, т.к. они у вас не отображаются в главном меню. Проверьте, чтобы у всех ресурсов стояли галочки «Опубликован», а так же у ресурсов в разделе «Блог».
                                                          2. Необходимо проверить значение &parents, оно у Вас должно содержать id ресурса, который содержит посты. Иначе просто нечего будет выводить.
                                                          Сниппет getTickets
                                                          1. Zaikace # 0
                                                            Все сделал как ты сказал блог появил на главной а навбар не появил блог и карта блога и о себе почему?

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

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

                                                                ilyaut.ru/tips-and-tricks/authorization-registration-personal-cabinet/
                                                                1. Zaikace # 0
                                                                  Понятно! Кеш не помогло, лишь помогло когда зайди свои профиля и вкладка ресурсы и там поставить опубликован «нет» на «да» и появил его. Видимо вы работали со старого версии.



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

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

                                                              Аня, к сожалению, у гостей голосования не будет, т.к. у них нет идентификатора (id), а это может привести к накруткам счётчиков.
                                                            2. Аня # +1
                                                              спасибо. получилось. Просто непонятно было, что код страницы надо вставить в содержимое ресурса.
                                                              ещё хочу сказать, у вас на сайте не работают лайки
                                                              1. Александр Мальцев # 0
                                                                Работают только для зарегистрированных пользователей. И ещё за свои записи нельзя лайки ставить.
                                                              2. Аня # 0
                                                                почему то ничего не получилось… пустая страница. Там же как то шаблоны загружаются?
                                                                1. Александр Мальцев # 0
                                                                  На этом уроке мы сделали только главную страницу, и выводиться должна только она. Страницы, содержащие посты сделаем на следующем уроке, там уже будем применять шаблоны, т.к. таких страниц может быть много.

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

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

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

                                                                  Настройка главной страницы в MODX Revolution

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