MODX - Создание HTML карты сайта

18.09.2021

8.1K

Содержание:

Создание кода для генерации карты сайта
Создание ресурса "Карта блога"
Демонстрация страницы "Карта блога"
Комментарии

На этом уроке мы создадим страницу, на которой будет представлен в виде иерархического списка полный перечень разделов и страниц блога.

Так как на предыдущих уроках мы уже создали ресурс «Карта блога», то теперь нам остаётся разработать его содержимое. Изложение урока разобьём на 2 раздела. В первом разделе напишем код, с помощью которого мы будем генерировать основное содержимое страницы, т.е. карту сайта. Во втором разделе в виде пошаговой инструкции рассмотрим процесс создания страницы блога и добавления к ней кода, созданного в первом разделе.

Создание кода для генерации карты сайта

Для генерации карты сайта будем использовать сниппет pdoMenu, который мы использовали для создания навигационного меню. Для настройки сниппета pdoMenu будем использовать следующие параметры:

level – уровень генерируемого меню. Данное значение установим равным 0, т.к. нам необходимо вывести ресурсы, расположенные на всех уровнях иерархии.
resources – данный параметр будем использовать, для исключения из выдачи ресурса с идентификатором 4.
countChildren – данный параметр предназначен для включения подсчёта количества дочерних ресурсов в каждом контейнере (разделе). Результат своих действий он выводит в плейсхолдер [[+children]].
showHidden – данный параметр определяет показывать ли ресурсы скрытые для меню или нет.
tplOuter – чанк, который содержит шаблон для обёртки всей карты меню (маркированный список).
```
<ul>
  ...
</ul>
```
tpl – чанк, который будем использовать для оформления элемента маркированного списка.
```
<li>
<a href="Ссылка">Название ресурса</a>
</li>
```

tplParentRow – чанк, который будем использовать для оформления контейнера (раздела).

<li>
  <a href="Ссылка">Название раздела (количество дочерних ресурсов)</a>
<ul>
    ...
  </ul>
</li>

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

[[!pdoMenu?
  &startId=`0`
  &level=`0`
  &resources=`-4`
  &showHidden=`1`
  &countChildren=`1`
  &tplOuter=`@INLINE<ul>[[+wrapper]]</ul>`
  &tpl=`@INLINE<li><a href="[[+link]]">[[+menutitle]]</a></li>`
  &tplParentRow=`@INLINE<li><a href="[[+link]]">[[+menutitle]] ([[+children]])</a><ul>[[+wrapper]]</ul></li>`
  &tplInner=`@INLINE[[+wrapper]]`
]]

Создание ресурса "Карта блога"

Рассмотрим данный процесс в виде пошаговой инструкции:

Создадим шаблон для ресурса "Карта блога".

Введём следующий код в шаблон:

<!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">
        <h1 class="h2 page-header">[[*pagetitle]]</h1>
        [[*content]]
        [[!pdoMenu?
          &startId=`0`
          &level=`0`
          &resources=`-4`
          &showHidden=`1`
          &countChildren=`1`
          &tplOuter=`@INLINE<ul>[[+wrapper]]</ul>`
          &tpl=`@INLINE<li><a href="[[+link]]">[[+menutitle]]</a></li>`
          &tplParentRow=`@INLINE<li><a href="[[+link]]">[[+menutitle]] ([[+children]])</a><ul>[[+wrapper]]</ul></li>`
          &tplInner=`@INLINE[[+wrapper]]`
        ]]
      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div>
  [[$chunk.footer]]
</body>
</html>

Сохраним шаблон с помощью нажатия на кнопку с соответствующим названием.
Откроем ресурс "Карта блога".
В раскрывающемся списке "Шаблон" выберем пункт "Карта блога", или то имя шаблона, которые вы ему назначали в первом пункте.
Введите контент в содержимое ресурса. Например, Вы можете ввести описание ресурса или пояснение к карте сайта.
```
<img class="center-block" src="/assets/images/logo/map.jpg">
<br>
<p class="lead">Содержание:</p>
```
Сохраните ресурс.

Демонстрация страницы "Карта блога"

Веб-страницу "Карта блога" продемонстрируем с помощью следующего скриншота:

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

Аноним

29.01.2016, 13:15

Шеф, это снова Я) Проблему почти такая же как с поиском) Карта строится, но нет названий статей. То есть выглядит всё так:
-Разное (9)
--Советы (1)
--Способы (3)
А самих названий статей нет. Только количество в разделах указано и всё. Тоже как и в поиске как будто глубина ограничена.
Код брал как у тебя

[[!pdoMenu?
	&startId=`0`
	&level=`0`
	&resources=`-4`
	&countChildren=`1`
	&tplOuter=`@INLINE <ul>[[+wrapper]]</ul>`
	&tpl=`@INLINE <li><i class="fa fa-angle-right"></i> <a href="[[+link]]">[[+menutitle]]</a></li>`
	&tplParentRow=`@INLINE <li><i class="fa fa-angle-right"></i> <a href="[[+link]]">[[+menutitle]] ([[+children]])</a><ul>[[+wrapper]]</ul></li>`
	&tplInner=`@INLINE [[+wrapper]]`
 ]]

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

30.01.2016, 09:20

Может у тебя ресурсы скрыты для меню, попробуй добавить следующие параметры:

&showHidden=`1`,
&showUnpublished=`1`

Аноним

30.01.2016, 10:55

Шеф, ты лучший! Статьи-то скрыты от меню)

&showHidden=`1`

Решило мой вопрос) Может в статью добавить этот момент?) Наверняка, Я не один такой)

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

30.01.2016, 14:44

Спасибо.
Да, добавлю.

Аноним

18.03.2015, 16:38

Александр, скажите а как это у вас так реклама от adsense в версии для компьютера один размер, а под мобильники с другим размером отображается?

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

18.03.2015, 17:25

Добрый день, Аня.
Это можно выполнить выполнить различными способами:
Например, использовать фиксированные блоки различного размера и медиазапросы:

<div id="adblock1">
<!-- код рекламного блока 300x250 -->
</div>
<div id="adblock2">
<!-- код рекламного блока 728x90 -->
</div>

CSS:

#adblock1,#adblock2 {
  display: none;
} 
media (min-width: 300px) { 
  #adblock1 {
    display: block;
  } 
  #adblock2 {
    display: none;
  } 
}
media (min-width: 728px) { 
  #adblock1 {
    display: none;
  } 
  #adblock2 {
    display: block;
  } 
}

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

18.03.2015, 17:26

Или например, используя классы Twitter Bootstrap 3 (тут уже более точно не получиться):

<div class="hidden-md hidden-lg">
  <!-- код рекламного блока 300x250 -->
</div>
<div class="hidden-xs hidden-sm">
  <!-- код рекламного блока 728x90 -->
</div>

Или используя адаптивные рекламные блоки Google:

.adblock1 { display:inline-block; width: 336px; height: 280px; }
@media (max-width: 380px) { .adblock1 { display: none; } }
@media (min-width:600px) { .adblock1 { width: 550px; height: 60px; } }
@media (min-width:1000px) { .adblock1 { width: 728px; height: 90px; } }

Аноним

12.03.2015, 14:08

Здравствуйте Александр! А про микроразметку shema расскажете? ) заметила её у вас на сайте

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

12.03.2015, 14:34

Добрый день, Аня.
Про создание микроразметки для блога на основе schema.org обязательно напишу :)