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

Александр Мальцев
Александр Мальцев
19K
89
Содержание:
  1. Создание файла styles.css
  2. Использование сниппетов в веб-странице
  3. Разметка главной страницы блога
  4. Создание чанков в MODX Revolution
  5. Демонстрация главной страницы блога
  6. Комментарии

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

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

Перед созданием содержимого главной страницы создадим файл 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>.

Создание чанков в MODX Revolution

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

Чанк "chunk.head"

Чанк "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.header"

Чанк "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"

Чанк "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" будем использовать для вывода подвала веб-страницы.

Чанк 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

Комментарии: 89

  1. NANO
    NANO
    2020-06-22 20:55:02
    Привет Александр хотел спросит какой плагин стоит для голосовании у вас на сайте!
  1. Александр Мальцев
    Александр Мальцев
    2020-06-24 14:45:09
    Привет! Никакого, просто маленький скрипт на языке PHP, выполняющийся через AJAX запросы.
  • NANO
    NANO
    2020-06-28 13:34:49
    Можете дать линк на этот скрипт!
  • Александр Мальцев
    Александр Мальцев
    2020-07-04 16:14:45
    Некоторые моменты можете посмотреть здесь. Ссылка на скрипты.
  • Владимир
    Владимир
    2017-03-27 13:10:01
    Здравствуйте, изменил чанк tpl.Tickets.list.row вывода новостей на главное странице( вверху написал новый шаблон а старый закомментировал). Но стала отображаться только одна самая первая новость, но если раскомментировать старый то на странице будут отображаться поочередно и новый шаблон и старый. Как сделать что бы отображало с новым шаблоном? Делал по примеру отображения на вашем сайте.

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

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

      так же пробовал [[+tv.image_nevs]]. Но изображение ни в каких случаях не выводятся, если убрать / в src то при просмотре кода страницы в ссылке стоит значение (unknown)
    2. Александр Мальцев
      Александр Мальцев
      2017-03-27 17:23:30
      Молодец!
      Таким образом [[*image_nevs]] можно получить только значение поля у текущего ресурса. Если вы используете плейсходер, то его кто-то должен установить (например, сниппет).
      Если вы используете pdoTools, то TV выбираются так:
      &includeTVs=`image_nevs`
      &tvPrefix=`tv.`
      &processTVs=`1`
      
      В чанке, который вы используете для оформления ресурса данный TV можно получить так [[+tv.image_nevs]].
      В качестве вывода для TV (изображения) используйте текст.
    3. Владимир
      Владимир
      2017-03-27 20:09:46
      Спасибо, все получилось)
  • Verteletsky
    Verteletsky
    2016-11-28 16:09:50
    Здравствуйте, я подключил 4 bootstrap, все сделал как у вас, но не отображаются иконки, я начал гуглить в сторону awesome, подключил, но как кастомизировать getTickets, pdoMenu, хлебные крошки и другие тулзы, подскажите пожалуйста как добавить иконки.
    1. Verteletsky
      Verteletsky
      2016-11-28 16:29:50
      Нашел чанк, tpl.Tickets.meta, поменял картинки на awesome, но результат не изменился, он все равно их подтягивает из glyphicon
    2. Verteletsky
      Verteletsky
      2016-11-28 16:43:11
      При добавлении комментария, счетчик остается 0, в чем может быть проблема?
    3. Александр Мальцев
      Александр Мальцев
      2016-11-30 10:03:35
      Здравствуйте, в этом случае придётся редактировать каждый чанк. Если вы это не хотите это делать, то подключите к странице иконки Glyphicon Halflings, доступные в Bootstrap 3.
    4. Александр Мальцев
      Александр Мальцев
      2016-11-30 10:06:00
      Очистите кэш (в админке: Управление -> Очистить кэш), а также откройте страницу в другом браузере или в режиме инкогнито.
    5. Александр Мальцев
      Александр Мальцев
      2016-11-30 10:13:30
      По умолчанию Tickets считает только просмотры, выполненные зарегистрированными пользователями. Если вы хотите считать гостей, то необходимо данный параметр активировать (включить) в системных настройках. Для этого нажимаем на значок шестерёнки -> выбираем ticket -> tickets.count_guests (Считать просмотры страниц гостями) -> выбираем из раскрывающего списка значение «Да».
  • елена
    елена
    2016-09-18 17:57:17
    Здравствуйте. На Модкс рев на центральной странице тег viewport установлен. Но на вновь добавляемых страницах при проверке яндекс-мобильные страницы выдается сообщение Тег viewport не указан.Некоторые страницы уже 2 недели как в поиске. Надо ли тег дополнительно куда-то вставлять
    1. Александр Мальцев
      Александр Мальцев
      2016-09-18 23:24:15
      Здравствуйте. Тег viewport должен быть установлен на всех страницах или в шаблонах, на основании которых эти страницы формируются.
      Тег viewport (если у Вас адаптивная разметка) указывается в разделе head HTML документа так:
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
  • Алексей
    Алексей
    2016-08-29 19:45:40
    Здравствуйте.
    Подскажите пожалуйста, как сделать, чтобы чанк выводился при определенном разрешении экрана, по аналогии медиа-запросов CSS. Но display:none не подходит, нужно чтоб код не выводился вообще.
    Спасибо.
    1. Александр Мальцев
      Александр Мальцев
      2016-08-31 12:52:06
      Здравствуйте. На сервере нельзя определить разрешение экрана пользователя. Это можно сделать только на стороне клиента с помощью 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>
      
  • Алексей
    Алексей
    2016-07-16 22:24:32
    Подскажите, как вывести видео в тикеты? Если вставляешь в intotext через iframe то строчка просто вырезается. Как правильно вывести? Спасибо.
    1. Александр Мальцев
      Александр Мальцев
      2016-07-18 09:33:27
      Это контролирует Jevix, т.е. он фильтрует содержимое во время вывода (т.е. разрешать одни теги и запрещать другие).
      Здесь 2 варианта:
      1. Отключить его (можно для отдельной страницы).
      2. Разрешить соответствующие теги в настойках Jevix. Конфигурирование Jevix осуществляется на странице «Наборы параметров» (в главном меню админки: шестерёнка->наборы параметров). На этой страницы параметры собраны отдельно для тикетов и комментариев.
  • Легион
    Легион
    2016-06-16 19:02:23
    Спасибо большое. Буду разбираться дальше.
    1. Легион
      Легион
      2016-06-13 23:15:52
      Все перерыл, но ответа так и не нашел.
      Необходимо сделать вывод новостей блоками, например, в три блока. Сверстал шаблон, проверил, как страницу — все отлично. Проблемы начинаются когда пытаешься «натянуть» на ModX. Не могу понять, что отвечает за вывод новостей.
      Если
      [[!pdoPage? &element=`getTickets` ]]
      обернуть блоком с float, то все равно все новости появляются в этом одном блоке. НЕ отдельными блоками, а просто в одном.
      Обворачивание tpl.Tickets.meta тоже не приводит к желаемому результату, так как в этом случае и полная новость становится блоком в треть экрана. Не подскажете, за что отвечает вывод новостей. нО не просто отвечает, а где можно отредактировать отображение конкретного блока?
      1. Александр Мальцев
        Александр Мальцев
        2016-06-14 12:30:41
        Необходимо создать свой собственный чанк, например tpl.Tickets.list.row.my и указать его сниппету в качестве значения параметра tpl:
        [[!pdoPage? 
          &element=`getTickets`
          &tpl=`tpl.Tickets.list.row.my`
          &limit=`6`
        ]]
        [[!+page.nav]]
        
      2. Легион
        Легион
        2016-06-14 21:59:52
        Спасибо большое, помогло. Правда, пришлось минут 10 повозиться, прежде чем разобраться. Все-таки, архитектура ModX для меня пока непонятна. Я работал постоянно с DataLife Engine. Там и архитектура понятней, и работа. А самое главное — для него есть полная и удобная инструкция.
        Можно задать еще пару вопросов?
        1. Можно ли в ModX организовать дополнительные поля? Например, в статье должно быть постоянное поле, которое необходимо заполнять. Грубо говоря, к примеру дом. поле Автор. И при написании статьи его нужно заполнять. И как это можно реализовать?
        2. На сколько я понял из цикла статей, то главная страница у нас сама по себе. Для меня странно, зачем мы ее вообще создавали? К примеру, на сайте студии или портфолио понято, но не на блоге. Отсюда вопрос, из той же архитектуры, которая в статье, можно ли вывести новости на главной? Или новости появляются только в той сущности, которую мы отдали под тикеты?
        3. Если я хочу создать разделы, то мне необходимо создать сущности с названием разделов, и каждую из них отдать под тикеты? А потом просто выводить посредством выборки из id разделов? Или я что-то не так понял?
        Заранее, благодарю.
      3. Александр Мальцев
        Александр Мальцев
        2016-06-14 23:40:10
        1. Можно, но они привязываются к ресурсам через шаблон. Т.е. создаёте необходимое количество дополнительных полей (TV-полей) и в настройке каждого из этих полей устанавливаете его доступным для определённых шаблонов. После этого у ресурсов, имеющих этот шаблон, появятся соответствующие поля.
        2. Тут всё приведено в качестве примера. Если у Вас главная страница будет сильно не похожа на другие страницы блога, то её содержимое логично сделать в виде отдельного шаблона или использовать в качестве вывода её содержимое (если не нужны TV-переменные). В MODX Revolution вне зависимости от архитектуры можно выводить что угодно и где угодно.
        3. Можно сделать так. А потом написать условие, что необходимо выбрать, в каком количестве и куда это поместить.
    2. shop-dk
      shop-dk
      2016-03-25 00:12:19
      Еще такой вопрос,
      Я создал раздел блог и у него подменю блог 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. Александр Мальцев
        Александр Мальцев
        2016-03-25 06:36:14
        Не обязательно — один шаблон можно использовать для какого угодно числа ресурсов.
        Вторую часть вопроса не совсем понял. Если Вы про содержимое раздела, то он тоже может быть каким угодно. Т.е. в зависимости от того, что Вы хотите, чтобы он выводил, когда пользователь на него попадёт.
        Если Вам необходимо вывести ресурсы с нескольких разделов, то так:
        [[!pdoPage? 
          &element=`getTickets`
          &action=`tickets` 
          &parents=`2,3,4` // будет выводит ресурсы из разделов, имеющих id = 2, 3 и 4.
          &limit=`2`
        ]] 
        [[!+page.nav]]
        
    3. Андрей
      Андрей
      2016-03-24 15:31:38
      Все вроде понял но почему то не открывается подменю если нажать на блог, сделал все по уроку
      1. Александр Мальцев
        Александр Мальцев
        2016-03-24 15:42:06
        Нажмите в браузере клавишу F12 (вкладка консоль) и посмотрите на ошибки (если они есть). Скорее всего что-то с названиями или путями к файлам js напутали.
      2. shop-dk
        shop-dk
        2016-03-25 00:09:11
        Спасибо исправил дело было в путях
    4. Андрей
      Андрей
      2016-03-24 14:52:21
      Добрый день, сделал все по уроку но не могу понять первый пункт «Использование сниппетов в веб-странице»
      Куда нужно вставлять этот код
      [[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. Игорь Денисов
        Игорь Денисов
        2016-03-16 16:19:10
        Здравствуйте Александр!
        У меня возник вопрос к Вам, может быть ответ на него достаточно элементарный, но все же… все никак не могу в документации найти параметр:
        [[!pdoPage?
            &action=``
        ]]
        Я, конечно, не исключаю тот вариант что я плохо искал… но не могли бы Вы дать описание параметру &action и в каких случаях его используют?!
        Заранее спасибо за ответ.
        1. Александр Мальцев
          Александр Мальцев
          2016-03-17 03:50:54
          Параметр &action относится не к pdoPage, а к сниппету getTickets. Он определяет его режим работы, т.е. что Вам возвращать комментарии (Comments) или тикеты (Tickets). По умолчанию он возвращает комментарии. А т.к. нам надо было возвращать тикеты, то мы это указали.
          [[!pdoPage? 
            &element=`getTickets`
            &action=`tickets`
            ...
          
          P.S. Сниппет pdoPage выполняет только разбивку некоторых данных (которые ему предоставили) на страницы. Сам по себе данный сниппет не выполняет никакие запросы к БД, и поэтому у него данных нет. Поэтому для получения данных используются другие сниппеты, например, getTickets. Этот сниппет (getTickets) предоставляет данные pdoPage, которые он затем разбивает на страницы.
        2. Игорь Денисов
          Игорь Денисов
          2016-03-17 08:32:08
          Спасибо за ответ!
          Теперь все понятно. Кстати, Вы случайно не планируете еще выкладывать уроки по modx? Было бы здорово!)
        3. Игорь Денисов
          Игорь Денисов
          2016-03-17 10:53:30
          Например такие как работа с TV, с плейсхолдерами и т.д.
          Так же авторизация пользователей и возможности авторизованных и не авторизованных пользователей… В общем все полезное и необходимое, было бы действительно здорово!))
        4. Алексей
          Алексей
          2016-03-17 12:53:55
          С ТВ и плейсхолдерами всё более менее просто) А вот авторизацию пользователей и их права поддерживаю)
        5. Александр Мальцев
          Александр Мальцев
          2016-03-19 14:51:59
          Как что-то напишу по MODX, то обязательно выложу.
          Ваши пожелания и хотелки обязательно учту)
      2. dilshod
        dilshod
        2016-03-15 12:36:22
        Здравствуйте,
        Например: создадим пустой файл syles.css, который расположим в каталоге assets/bootstrap/css/ -------должен быть styles.css пропущен t в самом начале, спасибо за уроки…
        1. Александр Мальцев
          Александр Мальцев
          2016-03-15 14:09:16
          Здравствуйте.
          Спасибо, откорректировал.
      3. Алексей
        Алексей
        2016-02-07 16:37:07
        Шеф, а что дают в пдоМеню параметры
        [[+classnames]]
        и
        &rowClass=`menuid[[+id]]`
        Я понимаю, что в результате в меню получится
        <li class="menuid10 first">
        А вот для чего это нужно не пойму. Без этих параметров меню тоже работает. В чём профит, так сказать?
        1. Александр Мальцев
          Александр Мальцев
          2016-02-08 15:42:44
          Чтобы стили CSS на них повесить, можно их ещё с javascript связать. Меню разные бывают и задачи разные… Например, если ты используешь Bootstrap, то смотришь какой должен получиться HTML код и какие должны быть классы чтобы работало это меню. Например, в Bootstrap классов menuid10 и first нет. Значит, они и не нужны. Т.е. если ты хочешь получить меню Bootstrap, то так настраиваешь компонент pdoMenu, что бы на выходе получился нужный код с нужными классами.
      4. Алексей
        Алексей
        2016-01-12 10:55:40
        Лучи добра за очередной развёрнутый ответ. Через атрибуты ссылки ещё можно реализовать)
        1. Александр Мальцев
          Александр Мальцев
          2016-01-13 12:08:58
          Нет, атрибуты ссылки предназначены для указания атрибутов таких как target или rel.
          Это можно сделать ещё через дополнительное поле (tv).
        2. Алексей
          Алексей
          2016-01-13 15:36:22
          Может и так) Но у меня работает через атрибуты ссылки) Код выглядит так:
          &tpl=`@INLINE <li><a href="/[[+link]]">[[+attributes]]  [[+menutitle]]</a>[[+wrapper]]</li>`
          Можешь проверить)
          Почему itchief.ru/lessons/modx-revo/modx-revo-creating-a-template-for-posts 404 выдаёт? Куда спрятал статью?)
        3. Александр Мальцев
          Александр Мальцев
          2016-01-14 12:53:20
          Зачем проверять? Вы ведь уже проверили :)
          Ссылку исправил.
        4. Алексей
          Алексей
          2016-01-14 18:55:23
          Давай на ты) А то как враги в древние времена)
          Подскажи, Я так понимаю у тебя Яндекс транслит для ссылок стоит. Это даёт какие-то преимущества в плане сео? Или чем обоснован твой выбор в его пользу?)
        5. Александр Мальцев
          Александр Мальцев
          2016-01-15 15:48:28
          Хорошо.
          Да, просто мне больше нравиться перевод, а не транслитерация.
          В плане SEO никакой разницы нету, если конечно твой проект не предназначен для англоязычной аудитории.
          Т.е. если твой сайт только для русскоговорящей аудитории, то разницы нет. А если в будущем твой проект вырастит и появится необходимость в добавлении английского языка на сайт, то стоит задуматься и может выбрать изначально именно перевод…
        6. Алексей
          Алексей
          2016-01-15 16:10:59
          Понял. Планируешь ли сделать статью про теги к постам? Или они уже не актуальны?
        7. Александр Мальцев
          Александр Мальцев
          2016-01-15 16:38:36
          Если ты про метатеги keywords, то в такой статье не вижу смысла.
          Сейчас метатеги лучше не использовать, т.к. они никакого положительного эффекта не дадут, а отметить твой сайт как спам могут :)
          К ним надо относиться осторожно, они не должны содержать ключевые слова не относящиеся к конкретной странице. Короче их лучше не использовать.
        8. Алексей
          Алексей
          2016-01-15 17:00:16
          Не. Я про теги, которые делаются с помощью tagLister, например)
        9. Александр Мальцев
          Александр Мальцев
          2016-01-15 17:08:38
          Да, такую статью можно сделать. Ну тогда и облаков тегов к ней с загрузкой через AJAX.
          Использовать для этого дела компонент — это сильно круто.
          Возьму на заметку, обязательно сделаю. Но без установки дополнительных компонентов… :)
        10. Алексей
          Алексей
          2016-01-15 18:29:46
          Почему круто? Для остального же используются компоненты) Хотя, тебе виднее)
          Буду ждать. А в Тикетсе нет такой возможности?
        11. Александр Мальцев
          Александр Мальцев
          2016-01-17 11:27:31
          Да, но он скорее использует getResources, использует TV-поля и не поддерживает AJAX. Т.е. он потребует установку ещё одного не нужного компонента.
          Так что будем использовать pdoTools, которые уже установлены…
        12. Алексей
          Алексей
          2016-01-17 18:41:12
          Если так, то да) Лучше pdoTools тогда использовать)
      5. Алексей
        Алексей
        2016-01-11 11:27:20
        Не понял, что значит прямо в пункте меню? Оно у тебя статическое?)
        Если взять код из чанка «chunk.navbar», то куда там это вставляется?
        1. Александр Мальцев
          Александр Мальцев
          2016-01-11 14:53:38
          В смысле?

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

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

          Больше делать ничего не надо…
          Сниппет pdoMenu формирует меню. Он подставляет вместо плейсхолдера [[+menutitle]] соответствующее значение из ресурсов, т.е. значение поля Пункт меню.
          MODX - Сниппет pdoMenu
      6. Алексей
        Алексей
        2016-01-10 19:37:55
        Александр, подскажи, где прописывать
        <span class="glyphicon glyphicon-*name">
        чтобы пользоваться иконками Glyphicons в меню, как у тебя? Меню организовано через pdoMenu.
        1. Александр Мальцев
          Александр Мальцев
          2016-01-11 10:58:21
          У меня это сделано прямо в пункте меню:
          <span class="glyphicon glyphicon-book"></span> Уроки и статьи
          
          Но, можно также сделать через дополнительное поле (tv).
      7. Александр Мальцев
        Александр Мальцев
        2015-12-11 09:52:02
        У Вас не работает потому что это решение для 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. Алексей
          Алексей
          2015-12-11 11:09:23
          Добрый день Александр. Спасибо за ответы.
          Но вы знаете, у меня подключены стили для «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>
          
          Подскажите пожалуйста, как это исправить?
          Спасибо.
        2. Александр Мальцев
          Александр Мальцев
          2015-12-11 13:30:00
          Алексей, может быть Вам так не мучится, а взглянуть на какое-то готовое решение, где данный потенциал организован должным образом.
          Например, вот на это меню Bootstrap 3, доработанное до многоуровневой структуры:
          SmartMenus Bootstrap Addon (Navbar)
          Скачать архив zip можно по следующей ссылке:
          smartmenus-1.0.0-beta1.zip.
          Его будет даже очень просто реализовать с помощью pdoMenu.
        3. Алексей
          Алексей
          2015-12-11 16:46:59
          Спасибо за ответ.
          Но, дело в том, что у меня все работает, за исключением того, что class=«dropdown-submenu» добавляется ко всем пунктам меню второго уровня. Нужно сделать, как на первом уровне, где class=«dropdown» добавляется только к пунктам являющимся контейнерами.
          SmartMenus Bootstrap Addon (Navbar) — это решение где открытие меню реализуется по ховеру, а мне нужно чтобы открывалось по нажатию -скриптом, и это у меня прекрасно работает.
          Можно ли, как нибудь модифицировать чанк tpl.wayfinder.innerRow, чтобы class=«dropdown-submenu» добавляется только к пунктам являющимся контейнерами с потомками?
        4. Александр Мальцев
          Александр Мальцев
          2015-12-12 04:55:52
          Классы first, last добавляются чтобы Вы на них могли что-либо повесить. Например какие-то стили. Если они Вам не нужны, то уберите их, добавив в вызов сниппета следующие параметры:
          &firstClass=``
          &lastClass=``
          
        5. Александр Мальцев
          Александр Мальцев
          2015-12-12 04:58:28
          SmartMenus Bootstrap Addon (Navbar) отлично работает на смартфонах и планшетах.
        6. Алексей
          Алексей
          2015-12-13 13:59:19
          Добрый день!
          Извините за назойливость, — никак не могу решить эту проблему с меню.

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

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

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

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

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

          То есть, на первом уровне все работает как надо, а на втором проблема с каретками, в остальном все прекрасно. Не пойму где ошибка.
          Если, это очень сложно исправить, напишите пожалуйста, как реализовать подобное меню с помощью SmartMenus Bootstrap Addon (Navbar).
          Спасибо.
        7. Александр Мальцев
          Александр Мальцев
          2015-12-14 05:04:12
          Здравствуйте, Алексей.
          Может быть Вы 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,
          
      8. Алексей
        Алексей
        2015-12-10 12:25:01
        Сделал по вашему совету трехуровневое меню на Wayfinder, правда в чанк tpl.wayfinder.innerRow пришлось добавить [[+wf.isfolder:is=`1`:then=`class=«dropdown-toggle» data-toggle=«dropdown»`]] иначе, третий уровень не открывался. Правда осталась одна проблема, каретки появляются у всех пунктов выпадающего меню, даже у тех, которые не имеют наследников. Подскажите, как сделать чтобы каретки были только у пунктов меню с наследниками?
        Огромное спасибо, вы очень помогаете.
        1. Александр Мальцев
          Александр Мальцев
          2015-12-12 04:51:15
          Изменил в tpl.wayfinder.innerRow на Вашу строчку — всё работает.
          У вас скорее всего тип ресурса не установлен как раздел.
      9. Алексей
        Алексей
        2015-11-06 01:17:48
        Здравствуйте!
        Подскажите как реализовать с помощью 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. Александр Мальцев
          Александр Мальцев
          2015-11-07 08:54:59
          Здравствуйте, Алексей!
          Компонент pdoMenu такое не позволяет сделать, т.к. он содержит только один параметр (&tplParentRow) с помощью значения которого он оборачивает потомков. Т.е. Вы не сможете задать для первого выпадающего списка один шаблон, а для второго другой.
        2. Андрей
          Андрей
          2015-11-11 20:53:29
          Александр, спасибо за Ваши уроки и пояснения к ним, ведь урок без обратной связи — не урок. Скажите пожалуйста, с помощью чего можно реализовать меню с разными классами подпунктов, с помощью Wayfinder-а, или может какое комплексное решение? Мне подсказывали, что вроде можно pdoMenu в связке с pdoField это реализовать, но как не объяснили. Спасибо
        3. Александр Мальцев
          Александр Мальцев
          2015-11-14 10:37:51
          На 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>
          
        4. Алексей
          Алексей
          2015-12-10 09:54:56
          Скажите, Александр, может есть другой компонент позволяющий реализовать подобное меню? То что вы написали в ответе Андрею, как я понимаю это то что нужно. То есть нужно создать эти два чанка? Но вы знаете я прочитал на одном из форумов (https://modxclub.ru/topics/medlennaya-rabota-snippeta-wayfinder-s-bolshim-kolichestvom-dokumentov-i-vlozhennyim-menyu-1845.html), что многоуровневое меню на Wayfinder сильно тормозит. Что вы об этом думаете?
          Спасибо.
        5. Александр Мальцев
          Александр Мальцев
          2015-12-11 09:03:44
          Здравствуйте, Алексей.
          Если вызывать Wayfinder кэшированным, то тормозов никаких не будут. Т.к. в результирующую страницу просто будет подставляться готовый (кэшированный) блок HTML-кода и никакие запросы выполняться не будут.
      10. Тимофей
        Тимофей
        2015-04-09 10:00:48
        Александр, спасибо! Очень хороший сайт, добавил в закладки. Будут еще вопросы ))
        1. Тимофей
          Тимофей
          2015-04-08 11:51:30
          Привет! Можешь подсказать — при установленном Tickets как сделать, чтобы инпут комментария выводился только после нажатия на кнопку «Оставить новый комментарий», как на этом сайте сделано? Интересует именно пошагово, и желательно стандартными методами, потому что все пишут «там всего 3 строчки js». А я в этом самом js пока не силен. Спасибо.
          1. Александр Мальцев
            Александр Мальцев
            2015-04-08 13:35:40
            Добрый день, Тимофей.
            Что-то ты сильно перемудрил в вопросе.
            Данный момент решается на уровне CSS. Тебе необходимо добавить следующее правило в свой файл стилей CSS:
            #comment-form {
            display: none;
            }
            
        2. Zaikace
          Zaikace
          2015-02-17 20:02:52
          Страно все сделал как вы описали и ни разу ошибку не допустил а итог получилось такой не как у вас
          1. Александр Мальцев
            Александр Мальцев
            2015-02-18 12:46:51
            Добрый день, Zaikace. Из представленного изображения можно сделать следующие выводы:
            1. У Вас, возможно, не опубликованы ресурсы, т.к. они у вас не отображаются в главном меню. Проверьте, чтобы у всех ресурсов стояли галочки «Опубликован», а так же у ресурсов в разделе «Блог».
            2. Необходимо проверить значение &parents, оно у Вас должно содержать id ресурса, который содержит посты. Иначе просто нечего будет выводить.
            Сниппет getTickets
          2. Zaikace
            Zaikace
            2015-02-18 14:49:54
            Все сделал как ты сказал блог появил на главной а навбар не появил блог и карта блога и о себе почему?

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

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



          5. Zaikace
            Zaikace
            2015-02-20 14:39:13
            Вот урок нормальный авторизация и регистрация

            ilyaut.ru/tips-and-tricks/authorization-registration-personal-cabinet/
        3. Аня
          Аня
          2015-02-08 12:12:33
          а для не зарегистрированных возможно настраивать чтобы работали? спасибо
          1. Александр Мальцев
            Александр Мальцев
            2015-02-08 13:38:46
            Аня, это очень плохая практика настраивать различные права для гостей сайта, обычно все сайты (modx.com, habrahabr.ru, youtube.com и др.) требует обязательную регистрацию пользователей для написания комментариев, голосования и много другого. Это защищает сайт от спама и многих других вещей.

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

            Аня, к сожалению, у гостей голосования не будет, т.к. у них нет идентификатора (id), а это может привести к накруткам счётчиков.
        4. Аня
          Аня
          2015-02-08 11:46:56
          спасибо. получилось. Просто непонятно было, что код страницы надо вставить в содержимое ресурса.
          ещё хочу сказать, у вас на сайте не работают лайки
          1. Александр Мальцев
            Александр Мальцев
            2015-02-08 12:10:08
            Работают только для зарегистрированных пользователей. И ещё за свои записи нельзя лайки ставить.
        5. Аня
          Аня
          2015-02-07 17:25:38
          почему то ничего не получилось… пустая страница. Там же как то шаблоны загружаются?
          1. Александр Мальцев
            Александр Мальцев
            2015-02-08 03:28:20
            На этом уроке мы сделали только главную страницу, и выводиться должна только она. Страницы, содержащие посты сделаем на следующем уроке, там уже будем применять шаблоны, т.к. таких страниц может быть много.

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

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

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

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