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

18.09.2021

19.4K

Содержание:

Создание файла styles.css
Использование сниппетов в веб-странице
Разметка главной страницы блога
Создание чанков в MODX Revolution
Демонстрация главной страницы блога
Комментарии

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

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

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

Например: создадим пустой файл styles.css, который расположим в каталоге assets/bootstrap/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 – имя сниппета для запуска, parents – id категорий для поиска результатов, 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" будем использовать для хранения шапки веб-страницы.

Код чанка (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.

Код чанка (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

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

NANO

22.06.2020, 20:55

Привет Александр хотел спросит какой плагин стоит для голосовании у вас на сайте!

Александр Мальцев

24.06.2020, 14:45

Привет! Никакого, просто маленький скрипт на языке PHP, выполняющийся через AJAX запросы.

NANO

28.06.2020, 13:34

Можете дать линк на этот скрипт!

Александр Мальцев

04.07.2020, 16:14

Некоторые моменты можете посмотреть здесь. Ссылка на скрипты.

Владимир

27.03.2017, 13:10

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

вот код чанка
itchief.ru/assets/uploadify/6/7/b/67b542fc856ff5960826ecbcfad3224f.png
itchief.ru/assets/uploadify/5/6/1/561464366862c37bf02c81c7e1229e6d.png

Владимир

27.03.2017, 16:35

с шаблоном разобрался. Сделал tv для показа изображений image_nevs, ввод указал изображение. вывод -по умолчанию (так же пробовал указывать текст и изображение). В настройке раздела с тикетами написал &includeTVs=`1`. В шаблоне с выводом статьи написал

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

так же пробовал [[+tv.image_nevs]]. Но изображение ни в каких случаях не выводятся, если убрать / в src то при просмотре кода страницы в ссылке стоит значение (unknown)

Александр Мальцев

27.03.2017, 17:23

Молодец!
Таким образом [[*image_nevs]] можно получить только значение поля у текущего ресурса. Если вы используете плейсходер, то его кто-то должен установить (например, сниппет).
Если вы используете pdoTools, то TV выбираются так:

&includeTVs=`image_nevs`
&tvPrefix=`tv.`
&processTVs=`1`

В чанке, который вы используете для оформления ресурса данный TV можно получить так [[+tv.image_nevs]].
В качестве вывода для TV (изображения) используйте текст.

Владимир

27.03.2017, 20:09

Спасибо, все получилось)

Verteletsky

28.11.2016, 16:09

Здравствуйте, я подключил 4 bootstrap, все сделал как у вас, но не отображаются иконки, я начал гуглить в сторону awesome, подключил, но как кастомизировать getTickets, pdoMenu, хлебные крошки и другие тулзы, подскажите пожалуйста как добавить иконки.

Verteletsky

28.11.2016, 16:29

Нашел чанк, tpl.Tickets.meta, поменял картинки на awesome, но результат не изменился, он все равно их подтягивает из glyphicon

Verteletsky

28.11.2016, 16:43

При добавлении комментария, счетчик остается 0, в чем может быть проблема?

Александр Мальцев

30.11.2016, 10:03

Здравствуйте, в этом случае придётся редактировать каждый чанк. Если вы это не хотите это делать, то подключите к странице иконки Glyphicon Halflings, доступные в Bootstrap 3.

Александр Мальцев

30.11.2016, 10:06

Очистите кэш (в админке: Управление -> Очистить кэш), а также откройте страницу в другом браузере или в режиме инкогнито.

Александр Мальцев

30.11.2016, 10:13

По умолчанию Tickets считает только просмотры, выполненные зарегистрированными пользователями. Если вы хотите считать гостей, то необходимо данный параметр активировать (включить) в системных настройках. Для этого нажимаем на значок шестерёнки -> выбираем ticket -> tickets.count_guests (Считать просмотры страниц гостями) -> выбираем из раскрывающего списка значение «Да».

Аноним

18.09.2016, 17:57

Здравствуйте. На Модкс рев на центральной странице тег viewport установлен. Но на вновь добавляемых страницах при проверке яндекс-мобильные страницы выдается сообщение Тег viewport не указан.Некоторые страницы уже 2 недели как в поиске. Надо ли тег дополнительно куда-то вставлять

Александр Мальцев

18.09.2016, 23:24

Здравствуйте. Тег viewport должен быть установлен на всех страницах или в шаблонах, на основании которых эти страницы формируются.
Тег viewport (если у Вас адаптивная разметка) указывается в разделе head HTML документа так:

<meta name="viewport" content="width=device-width, initial-scale=1">

Аноним

29.08.2016, 19:45

Здравствуйте.
Подскажите пожалуйста, как сделать, чтобы чанк выводился при определенном разрешении экрана, по аналогии медиа-запросов CSS. Но display:none не подходит, нужно чтоб код не выводился вообще.
Спасибо.

Александр Мальцев

31.08.2016, 12:52

Здравствуйте. На сервере нельзя определить разрешение экрана пользователя. Это можно сделать только на стороне клиента с помощью 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>

Аноним

16.07.2016, 22:24

Подскажите, как вывести видео в тикеты? Если вставляешь в intotext через iframe то строчка просто вырезается. Как правильно вывести? Спасибо.

Александр Мальцев

18.07.2016, 09:33

Это контролирует Jevix, т.е. он фильтрует содержимое во время вывода (т.е. разрешать одни теги и запрещать другие).
Здесь 2 варианта:
1. Отключить его (можно для отдельной страницы).
2. Разрешить соответствующие теги в настойках Jevix. Конфигурирование Jevix осуществляется на странице «Наборы параметров» (в главном меню админки: шестерёнка->наборы параметров). На этой страницы параметры собраны отдельно для тикетов и комментариев.

Аноним

16.06.2016, 19:02

Спасибо большое. Буду разбираться дальше.

Аноним

13.06.2016, 23:15

Все перерыл, но ответа так и не нашел.
Необходимо сделать вывод новостей блоками, например, в три блока. Сверстал шаблон, проверил, как страницу — все отлично. Проблемы начинаются когда пытаешься «натянуть» на ModX. Не могу понять, что отвечает за вывод новостей.
Если

[[!pdoPage? &element=`getTickets` ]]

обернуть блоком с float, то все равно все новости появляются в этом одном блоке. НЕ отдельными блоками, а просто в одном.
Обворачивание tpl.Tickets.meta тоже не приводит к желаемому результату, так как в этом случае и полная новость становится блоком в треть экрана. Не подскажете, за что отвечает вывод новостей. нО не просто отвечает, а где можно отредактировать отображение конкретного блока?

Александр Мальцев

14.06.2016, 12:30

Необходимо создать свой собственный чанк, например tpl.Tickets.list.row.my и указать его сниппету в качестве значения параметра tpl:

[[!pdoPage? 
  &element=`getTickets`
  &tpl=`tpl.Tickets.list.row.my`
  &limit=`6`
]]
[[!+page.nav]]

Аноним

14.06.2016, 21:59

Спасибо большое, помогло. Правда, пришлось минут 10 повозиться, прежде чем разобраться. Все-таки, архитектура ModX для меня пока непонятна. Я работал постоянно с DataLife Engine. Там и архитектура понятней, и работа. А самое главное — для него есть полная и удобная инструкция.
Можно задать еще пару вопросов?
1. Можно ли в ModX организовать дополнительные поля? Например, в статье должно быть постоянное поле, которое необходимо заполнять. Грубо говоря, к примеру дом. поле Автор. И при написании статьи его нужно заполнять. И как это можно реализовать?
2. На сколько я понял из цикла статей, то главная страница у нас сама по себе. Для меня странно, зачем мы ее вообще создавали? К примеру, на сайте студии или портфолио понято, но не на блоге. Отсюда вопрос, из той же архитектуры, которая в статье, можно ли вывести новости на главной? Или новости появляются только в той сущности, которую мы отдали под тикеты?
3. Если я хочу создать разделы, то мне необходимо создать сущности с названием разделов, и каждую из них отдать под тикеты? А потом просто выводить посредством выборки из id разделов? Или я что-то не так понял?
Заранее, благодарю.

Александр Мальцев

14.06.2016, 23:40

1. Можно, но они привязываются к ресурсам через шаблон. Т.е. создаёте необходимое количество дополнительных полей (TV-полей) и в настройке каждого из этих полей устанавливаете его доступным для определённых шаблонов. После этого у ресурсов, имеющих этот шаблон, появятся соответствующие поля.
2. Тут всё приведено в качестве примера. Если у Вас главная страница будет сильно не похожа на другие страницы блога, то её содержимое логично сделать в виде отдельного шаблона или использовать в качестве вывода её содержимое (если не нужны TV-переменные). В MODX Revolution вне зависимости от архитектуры можно выводить что угодно и где угодно.
3. Можно сделать так. А потом написать условие, что необходимо выбрать, в каком количестве и куда это поместить.

shop-dk

25.03.2016, 00:12

Еще такой вопрос,
Я создал раздел блог и у него подменю блог 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]]

Я правильно понял это правильное решение или есть более правильное?
Заранее благодарен.

Александр Мальцев

25.03.2016, 06:36

Не обязательно — один шаблон можно использовать для какого угодно числа ресурсов.
Вторую часть вопроса не совсем понял. Если Вы про содержимое раздела, то он тоже может быть каким угодно. Т.е. в зависимости от того, что Вы хотите, чтобы он выводил, когда пользователь на него попадёт.
Если Вам необходимо вывести ресурсы с нескольких разделов, то так:

[[!pdoPage? 
  &element=`getTickets`
  &action=`tickets` 
  &parents=`2,3,4` // будет выводит ресурсы из разделов, имеющих id = 2, 3 и 4.
  &limit=`2`
]] 
[[!+page.nav]]

Аноним

24.03.2016, 15:31

Все вроде понял но почему то не открывается подменю если нажать на блог, сделал все по уроку

Александр Мальцев

24.03.2016, 15:42

Нажмите в браузере клавишу F12 (вкладка консоль) и посмотрите на ошибки (если они есть). Скорее всего что-то с названиями или путями к файлам js напутали.

shop-dk

25.03.2016, 00:09

Спасибо исправил дело было в путях

Аноним

24.03.2016, 14:52

Добрый день, сделал все по уроку но не могу понять первый пункт «Использование сниппетов в веб-странице»
Куда нужно вставлять этот код

[[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]]

Заранее спасибо

Игорь Денисов

16.03.2016, 16:19

Здравствуйте Александр!
У меня возник вопрос к Вам, может быть ответ на него достаточно элементарный, но все же… все никак не могу в документации найти параметр:

[[!pdoPage?
    &action=``
]]

Я, конечно, не исключаю тот вариант что я плохо искал… но не могли бы Вы дать описание параметру &action и в каких случаях его используют?!
Заранее спасибо за ответ.

Александр Мальцев

17.03.2016, 03:50

Параметр &action относится не к pdoPage, а к сниппету getTickets. Он определяет его режим работы, т.е. что Вам возвращать комментарии (Comments) или тикеты (Tickets). По умолчанию он возвращает комментарии. А т.к. нам надо было возвращать тикеты, то мы это указали.

[[!pdoPage? 
  &element=`getTickets`
  &action=`tickets`
  ...

P.S. Сниппет pdoPage выполняет только разбивку некоторых данных (которые ему предоставили) на страницы. Сам по себе данный сниппет не выполняет никакие запросы к БД, и поэтому у него данных нет. Поэтому для получения данных используются другие сниппеты, например, getTickets. Этот сниппет (getTickets) предоставляет данные pdoPage, которые он затем разбивает на страницы.

Игорь Денисов

17.03.2016, 08:32

Спасибо за ответ!
Теперь все понятно. Кстати, Вы случайно не планируете еще выкладывать уроки по modx? Было бы здорово!)

Игорь Денисов

17.03.2016, 10:53

Например такие как работа с TV, с плейсхолдерами и т.д.
Так же авторизация пользователей и возможности авторизованных и не авторизованных пользователей… В общем все полезное и необходимое, было бы действительно здорово!))

Аноним

17.03.2016, 12:53

С ТВ и плейсхолдерами всё более менее просто) А вот авторизацию пользователей и их права поддерживаю)

Александр Мальцев

19.03.2016, 14:51

Как что-то напишу по MODX, то обязательно выложу.
Ваши пожелания и хотелки обязательно учту)

Аноним

15.03.2016, 12:36

Здравствуйте,
Например: создадим пустой файл syles.css, который расположим в каталоге assets/bootstrap/css/ -------должен быть styles.css пропущен t в самом начале, спасибо за уроки…

Александр Мальцев

15.03.2016, 14:09

Здравствуйте.
Спасибо, откорректировал.

Аноним

07.02.2016, 16:37

Шеф, а что дают в пдоМеню параметры

[[+classnames]]

&rowClass=`menuid[[+id]]`

Я понимаю, что в результате в меню получится

<li class="menuid10 first">

А вот для чего это нужно не пойму. Без этих параметров меню тоже работает. В чём профит, так сказать?

Александр Мальцев

08.02.2016, 15:42

Чтобы стили CSS на них повесить, можно их ещё с javascript связать. Меню разные бывают и задачи разные… Например, если ты используешь Bootstrap, то смотришь какой должен получиться HTML код и какие должны быть классы чтобы работало это меню. Например, в Bootstrap классов menuid10 и first нет. Значит, они и не нужны. Т.е. если ты хочешь получить меню Bootstrap, то так настраиваешь компонент pdoMenu, что бы на выходе получился нужный код с нужными классами.

Аноним

12.01.2016, 10:55

Лучи добра за очередной развёрнутый ответ. Через атрибуты ссылки ещё можно реализовать)

Александр Мальцев

13.01.2016, 12:08

Нет, атрибуты ссылки предназначены для указания атрибутов таких как target или rel.
Это можно сделать ещё через дополнительное поле (tv).

Аноним

13.01.2016, 15:36

Может и так) Но у меня работает через атрибуты ссылки) Код выглядит так:

&tpl=`@INLINE <li><a href="/[[+link]]">[[+attributes]]  [[+menutitle]]</a>[[+wrapper]]</li>`

Можешь проверить)
Почему itchief.ru/lessons/modx-revo/modx-revo-creating-a-template-for-posts 404 выдаёт? Куда спрятал статью?)

Александр Мальцев

14.01.2016, 12:53

Зачем проверять? Вы ведь уже проверили :)
Ссылку исправил.

Аноним

14.01.2016, 18:55

Давай на ты) А то как враги в древние времена)
Подскажи, Я так понимаю у тебя Яндекс транслит для ссылок стоит. Это даёт какие-то преимущества в плане сео? Или чем обоснован твой выбор в его пользу?)

Александр Мальцев

15.01.2016, 15:48

Хорошо.
Да, просто мне больше нравиться перевод, а не транслитерация.
В плане SEO никакой разницы нету, если конечно твой проект не предназначен для англоязычной аудитории.
Т.е. если твой сайт только для русскоговорящей аудитории, то разницы нет. А если в будущем твой проект вырастит и появится необходимость в добавлении английского языка на сайт, то стоит задуматься и может выбрать изначально именно перевод…

Аноним

15.01.2016, 16:10

Понял. Планируешь ли сделать статью про теги к постам? Или они уже не актуальны?

Александр Мальцев

15.01.2016, 16:38

Если ты про метатеги keywords, то в такой статье не вижу смысла.
Сейчас метатеги лучше не использовать, т.к. они никакого положительного эффекта не дадут, а отметить твой сайт как спам могут :)
К ним надо относиться осторожно, они не должны содержать ключевые слова не относящиеся к конкретной странице. Короче их лучше не использовать.

Аноним

15.01.2016, 17:00

Не. Я про теги, которые делаются с помощью tagLister, например)

Александр Мальцев

15.01.2016, 17:08

Да, такую статью можно сделать. Ну тогда и облаков тегов к ней с загрузкой через AJAX.
Использовать для этого дела компонент — это сильно круто.
Возьму на заметку, обязательно сделаю. Но без установки дополнительных компонентов… :)

Аноним

15.01.2016, 18:29

Почему круто? Для остального же используются компоненты) Хотя, тебе виднее)
Буду ждать. А в Тикетсе нет такой возможности?

Александр Мальцев

17.01.2016, 11:27

Да, но он скорее использует getResources, использует TV-поля и не поддерживает AJAX. Т.е. он потребует установку ещё одного не нужного компонента.
Так что будем использовать pdoTools, которые уже установлены…

Аноним

17.01.2016, 18:41

Если так, то да) Лучше pdoTools тогда использовать)

Аноним

11.01.2016, 11:27

Не понял, что значит прямо в пункте меню? Оно у тебя статическое?)
Если взять код из чанка «chunk.navbar», то куда там это вставляется?

Александр Мальцев

11.01.2016, 14:53

В смысле?

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

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

Больше делать ничего не надо…
Сниппет pdoMenu формирует меню. Он подставляет вместо плейсхолдера [[+menutitle]] соответствующее значение из ресурсов, т.е. значение поля Пункт меню.
MODX - Сниппет pdoMenu

Аноним

10.01.2016, 19:37

Александр, подскажи, где прописывать

<span class="glyphicon glyphicon-*name">

чтобы пользоваться иконками Glyphicons в меню, как у тебя? Меню организовано через pdoMenu.

Александр Мальцев

11.01.2016, 10:58

У меня это сделано прямо в пункте меню:

<span class="glyphicon glyphicon-book"></span> Уроки и статьи

Но, можно также сделать через дополнительное поле (tv).

Александр Мальцев

11.12.2015, 09:52

У Вас не работает потому что это решение для 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');
  });
});

Аноним

11.12.2015, 11:09

Добрый день Александр. Спасибо за ответы.
Но вы знаете, у меня подключены стили для «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>

Подскажите пожалуйста, как это исправить?
Спасибо.

Александр Мальцев

11.12.2015, 13:30

Алексей, может быть Вам так не мучится, а взглянуть на какое-то готовое решение, где данный потенциал организован должным образом.
Например, вот на это меню Bootstrap 3, доработанное до многоуровневой структуры:
SmartMenus Bootstrap Addon (Navbar)
Скачать архив zip можно по следующей ссылке:
smartmenus-1.0.0-beta1.zip.
Его будет даже очень просто реализовать с помощью pdoMenu.

Аноним

11.12.2015, 16:46

Спасибо за ответ.
Но, дело в том, что у меня все работает, за исключением того, что class=«dropdown-submenu» добавляется ко всем пунктам меню второго уровня. Нужно сделать, как на первом уровне, где class=«dropdown» добавляется только к пунктам являющимся контейнерами.
SmartMenus Bootstrap Addon (Navbar) — это решение где открытие меню реализуется по ховеру, а мне нужно чтобы открывалось по нажатию -скриптом, и это у меня прекрасно работает.
Можно ли, как нибудь модифицировать чанк tpl.wayfinder.innerRow, чтобы class=«dropdown-submenu» добавляется только к пунктам являющимся контейнерами с потомками?

Александр Мальцев

12.12.2015, 04:55

Классы first, last добавляются чтобы Вы на них могли что-либо повесить. Например какие-то стили. Если они Вам не нужны, то уберите их, добавив в вызов сниппета следующие параметры:

&firstClass=``
&lastClass=``

Александр Мальцев

12.12.2015, 04:58

SmartMenus Bootstrap Addon (Navbar) отлично работает на смартфонах и планшетах.

Аноним

13.12.2015, 13:59

Добрый день!
Извините за назойливость, — никак не могу решить эту проблему с меню.

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

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

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

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

То есть, на первом уровне все работает как надо, а на втором проблема с каретками, в остальном все прекрасно. Не пойму где ошибка.
Если, это очень сложно исправить, напишите пожалуйста, как реализовать подобное меню с помощью SmartMenus Bootstrap Addon (Navbar).
Спасибо.

Александр Мальцев

14.12.2015, 05:04

Здравствуйте, Алексей.
Может быть Вы 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,

Аноним

10.12.2015, 12:25

Сделал по вашему совету трехуровневое меню на Wayfinder, правда в чанк tpl.wayfinder.innerRow пришлось добавить [[+wf.isfolder:is=`1`:then=`class=«dropdown-toggle» data-toggle=«dropdown»`]] иначе, третий уровень не открывался. Правда осталась одна проблема, каретки появляются у всех пунктов выпадающего меню, даже у тех, которые не имеют наследников. Подскажите, как сделать чтобы каретки были только у пунктов меню с наследниками?
Огромное спасибо, вы очень помогаете.

Александр Мальцев

12.12.2015, 04:51

Изменил в tpl.wayfinder.innerRow на Вашу строчку — всё работает.
У вас скорее всего тип ресурса не установлен как раздел.

Аноним

06.11.2015, 01:17

Здравствуйте!
Подскажите как реализовать с помощью 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>

Очень нужно…
Спасибо!

Александр Мальцев

07.11.2015, 08:54

Здравствуйте, Алексей!
Компонент pdoMenu такое не позволяет сделать, т.к. он содержит только один параметр (&tplParentRow) с помощью значения которого он оборачивает потомков. Т.е. Вы не сможете задать для первого выпадающего списка один шаблон, а для второго другой.

Аноним

11.11.2015, 20:53

Александр, спасибо за Ваши уроки и пояснения к ним, ведь урок без обратной связи — не урок. Скажите пожалуйста, с помощью чего можно реализовать меню с разными классами подпунктов, с помощью Wayfinder-а, или может какое комплексное решение? Мне подсказывали, что вроде можно pdoMenu в связке с pdoField это реализовать, но как не объяснили. Спасибо

Александр Мальцев

14.11.2015, 10:37

На 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>

Аноним

10.12.2015, 09:54

Скажите, Александр, может есть другой компонент позволяющий реализовать подобное меню? То что вы написали в ответе Андрею, как я понимаю это то что нужно. То есть нужно создать эти два чанка? Но вы знаете я прочитал на одном из форумов (https://modxclub.ru/topics/medlennaya-rabota-snippeta-wayfinder-s-bolshim-kolichestvom-dokumentov-i-vlozhennyim-menyu-1845.html), что многоуровневое меню на Wayfinder сильно тормозит. Что вы об этом думаете?
Спасибо.

Александр Мальцев

11.12.2015, 09:03

Здравствуйте, Алексей.
Если вызывать Wayfinder кэшированным, то тормозов никаких не будут. Т.к. в результирующую страницу просто будет подставляться готовый (кэшированный) блок HTML-кода и никакие запросы выполняться не будут.

Аноним

09.04.2015, 10:00

Александр, спасибо! Очень хороший сайт, добавил в закладки. Будут еще вопросы ))

Аноним

08.04.2015, 11:51

Привет! Можешь подсказать — при установленном Tickets как сделать, чтобы инпут комментария выводился только после нажатия на кнопку «Оставить новый комментарий», как на этом сайте сделано? Интересует именно пошагово, и желательно стандартными методами, потому что все пишут «там всего 3 строчки js». А я в этом самом js пока не силен. Спасибо.

Александр Мальцев

08.04.2015, 13:35

Добрый день, Тимофей.
Что-то ты сильно перемудрил в вопросе.
Данный момент решается на уровне CSS. Тебе необходимо добавить следующее правило в свой файл стилей CSS:

#comment-form {
display: none;
}

Аноним

17.02.2015, 20:02

Страно все сделал как вы описали и ни разу ошибку не допустил а итог получилось такой не как у вас

Александр Мальцев

18.02.2015, 12:46

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

Аноним

18.02.2015, 14:49

Все сделал как ты сказал блог появил на главной а навбар не появил блог и карта блога и о себе почему?

И хотел узнать будеш ли дальше делать такой урок только авторизация и регистрация.

Александр Мальцев

18.02.2015, 15:46

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

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

Аноним

18.02.2015, 16:57

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

Аноним

20.02.2015, 14:39

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

ilyaut.ru/tips-and-tricks/authorization-registration-personal-cabinet/

Аноним

08.02.2015, 12:12

а для не зарегистрированных возможно настраивать чтобы работали? спасибо

Александр Мальцев

08.02.2015, 13:38

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

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

Аня, к сожалению, у гостей голосования не будет, т.к. у них нет идентификатора (id), а это может привести к накруткам счётчиков.

Аноним

08.02.2015, 11:46

спасибо. получилось. Просто непонятно было, что код страницы надо вставить в содержимое ресурса.
ещё хочу сказать, у вас на сайте не работают лайки

Александр Мальцев

08.02.2015, 12:10

Работают только для зарегистрированных пользователей. И ещё за свои записи нельзя лайки ставить.

Аноним

07.02.2015, 17:25

почему то ничего не получилось… пустая страница. Там же как то шаблоны загружаются?

Александр Мальцев

08.02.2015, 03:28

На этом уроке мы сделали только главную страницу, и выводиться должна только она. Страницы, содержащие посты сделаем на следующем уроке, там уже будем применять шаблоны, т.к. таких страниц может быть много.

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

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

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

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

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