Modx Evolution Лабораторный практикум

это будет нижняя область нашего сайта.

После, того как вы закончите, у вас страница с чанками должна выглядеть, как показано на рис. 4. 9.



Рис. 4.9

Число в скобочках — это ID чанка, не обращайте на него внимания. Также у вас будет демо-чанк, созданный по умолчанию, он нам не понадобится, можете его удалить.

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



Рис. 4.10

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

4.4. Контрольные задания

1. 
   Что такое чанк?
   
2. 
   Из каких структурных элементов состоит главная страница вашего сайта?
   
3. 
   Для чего нужно разбивать страницы на чанки?
   

Задание 5

Дерево документов и создание страниц

цели занятия

• 
  Освоение приемов создания и изменения дерева документов
  

Форма организации занятия

Фронтальная.

Студент должен знать

• 
  принципы создания и изменения дерева документов
  

Студент должен уметь

• 
  выполнять лабораторно-практическое задание №4,
  
• 
  создавать и изменять дерево документов сайта.
  

Обеспеченность

• 
  компьютер с доступом в Интернет,
  
• 
  настоящий курс лабораторно-практических работ.
  

Практическое задание

Следующим шагом в нашем изучении MODx СMS будет знакомство с деревом документов. Мы разберем основные параметры страниц и научимся создавать и редактировать ресурсы в MODx.

5.1. Дерево документов

Создадим несколько страниц, чтобы было с чем работать. Для этого, я прошу обратить ваше внимание на дерево документов MODx, которое располагается в левой части администраторской панели, рис. 5.1.

Дерево документов будет представлять собой всю структуру вашего сайта. Тут вы будете создавать и редактировать все ваши страницы и категории на сайте. Кстати, страницы и категории в MODx называются «ресурсами», поэтому можете привыкать потихоньку и к этому термину. Древовидная структура очень удобна для администрирования сайтов и за счет своей интуитивности будет понятна даже неискушенному пользователю.

В самом верху дерева указано название вашего сайта, которое задается на странице системной конфигурации в самом первом поле Заголовок сайта. Напомню, что поменять название своего сайта вы сможете, проследовав по вкладкам Инструменты → Конфигурация → Сайт → Заголовок сайта.



Рис. 5.1

По умолчанию у вас уже создан один документ с названием MODx CMS Install Success, который и служит главной страницей вашего сайта. В скобках указан ID ресурса, это целое число и оно уникальное для каждой страницы. Т.е. не может быть двух разных документов с одним и тем же идентификатором. Мы будем использовать эти ID в дальнейшем для обращения к ресурсам, но вы с этим познакомитесь в дальнейшем на практике.



Рис. 5.2

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

Нажимайте на название этой страницы в дереве документов. Перед вами появится страница редактирования ресурса, рис. 5.2.

В принципе, тут все интуитивно понятно.

5.1.1 Вкладка общие

На этой вкладке вы заполняете основные атрибуты вашей страницы, а именно следующие поля:

Заголовок — вписываете название вашей страницы Главная страница.

Расширенный заголовок — в этом поле вы можете вписать расширенный заголовок вашей страницы. Можете в это поле скопировать содержимое поля Заголовок.

Описание — в это поле вы можете внести информацию, которую хотите разместить в мета теге Description для данной страницы.

Псевдоним — здесь нужно вписать имя страницы (латинскими буквами), которое вы хотите видеть в URL. Если вы его оставите пустым, оно заполнится автоматически исходя из заголовка страницы, если настроен плагин TransAlias о котором я писал во втором уроке. Если плагин вы не настроили, то пустое поле заменится на идентификатор ресурса.

Аннотация — поле с кратким описанием страницы, например первый абзац или что-нибудь в этом роде.

Шаблон — представленное в виде выпадающего списка. В этом списке у нас будут отображаться все созданные шаблоны, и вы сможете для каждой новой страницы выбрать подходящий шаблон. Количество шаблонов в MODx не ограничено. Если вы помните, в предыдущих уроках мы с вами создали шаблон для главной страницы. Он так и называется Главная страница, пока этот шаблон у нас один и выбран в настройках, как шаблон по умолчанию.

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

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

Показывать в меню — убрав галочку с этого пункта, вы запретите показ вашей страницы в меню.

Папка — здесь вы указываете, какой родительский документ будет у вашего ресурса. Для того, чтобы изменить родительский документ вы должны кликнуть мышкой по иконке рядом, после чего выбираете родительский документ в дереве сайта.

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

5.1.2 Настройка страницы

Здесь мы должны указать дополнительные параметры для создаваемой/редактируемой страницы, рис. 5.3.



Рис. 5.3

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

Остальные параметры в большинстве случаев можно будет оставлять как есть. Галочки, которые будут выставлены при редактировании страницы по умолчанию можно назначать на странице конфигурации MODx. Об этих настройках я писал в уроке с первоначальной настройкой MODx.

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

На вкладку Ключевые слова вы можете пока не заходить, так как мы еще не создали ни одного ключевого слова и эта вкладка будет пока бесполезна. Я планирую уделить целый урок для описания процесса создания и управления ключевыми словами в MODx . Скажу лишь только то, что с помощью этой вкладки мы сможем для каждой отдельной страницы задавать определенные наборы ключевых слов, что само по себе очень удобно, и не может не радовать SEO-оптимизаторов.

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

5.1.3 создание новой страницы

Для создания новой страницы, выделите мышью пункт Главное меню, нажмите правую кнопку мыши – откроется контекстное меню, выберите пункт Дочерний ресурс, рис. 5.4.



Рис. 5.4

Вначале мы будем делать сайт-визитку. Поэтому создаем типичные страницы для сайтов-визиток, при этом не забываем заполнять текстовые поля:

№	Заголовок	Расширенный заголовок	Описание	Псевдоним
1	Главная страница	расширенный заголовок главной страницы	мета тег Description	main
2	О нас	Подробное описание нашей компании	Описание для поисковиков	about
3	Новости	Новости нашей компании	Описание страницы с новостями для поисковиков	news
4	Услуги	Услуги нашей компании	Описание для поисковиков
5	Контактная информация	Наши контакты	Описание для поисковиков	contact

После создания ресурсов ваше дерево будет выглядеть как на рисунке 5.5.



Рис. 5.5

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

На этом мы заканчиваем урок по созданию страниц в MODx и мне хочется подвести итоги предыдущих уроков.

5.2. итоги

Мы с вами установили систему управления MODx CMS, познакомились c ее особенностями и сделали первоначальную установку, после чего подобрали шаблон для нашего будущего сайта и интегрировали готовый дизайн в MODx.

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

5.3. Контрольные задания

1. 
   Как создать новый документ в MODx?
   
2. 
   Как изменить иерархию документа в MODx?
   
3. 
   Как опубликовать документ MODx в Инете?
   
4. 
   Как изменить параметры документа в MODx?
   
5. 
   Как удалить документ из MODx?
   

Задание 6

Реализация динамического меню

цели занятия

• 
  Освоение приемов создания главного меню сайта
  

Форма организации занятия

Фронтальная.

Студент должен знать

• 
  принципы создания и редактирования главного меню сайта.
  

Студент должен уметь

• 
  выполнять лабораторно-практическое задание №5,
  
• 
  создавать главное меню сайта.
  

Обеспеченность

• 
  компьютер с доступом в Интернет,
  
• 
  настоящий курс лабораторно-практических работ.
  

Практическое задание

В прошлом уроке мы с вами научились создавать и редактировать страницы в дереве документов MODx. Мы создали несколько страниц. Все страницы у нас опубликованы и отмечены для показа в меню. Если нет, то вы должны это сделать на странице редактирования ресурсов.

В этом уроке мы создадим главное меню сайта. В MODx есть встроенное решение, для организации динамических меню на сайте — делается это с помощью сниппета Wayfinder.

6.1. Сниппет

Сниппет — это PHP код, который мы можем вызывать из шаблона сайта. Результат работы сниппета вставляется в место вызова. Чтобы посмотреть список сниппетов, которые идут в комплекте MODx по умолчанию, проследуйте по вкладкам в администраторской панели: Элементы → Управление элементами → Сниппеты. Все они доступны для редактирования. Но пока вы не разберетесь что к чему, советую ничего не редактировать. Для чего же нужны эти самые сниппеты? А нужны они для обеспечения динамической логики на сайте. Например, для генерации динамических меню, вывода контента из базы данных по некоему условию, организации формы обратной связи, вообще, для любых действий, доступных через MODx API. Сейчас на примере вы все поймете.

Вызов осуществляется по имени сниппета, помещенном между квадратными скобками с восклицательными знаками. Например, если имя определенного сниппета — Name, то вызов его будет осуществляться следующей конструкцией, помещенной в шаблон:

[!Name!]

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

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

[!Имя_сниппета? &параметр1=`значение` &параметр2=`значение` !]

Обратите внимание на вопросительный знак после имени сниппета, он говорит о том, что далее следуют объявление передаваемых параметров. Названию каждого передаваемого параметра предшествует знак «&», а его значение заключено в обратные одинарные кавычки. Это те кавычки, которые на русской клавиатуре добавляются нажатием клавиши с буквой «Ё». Не перепутайте, один неверный знак, и вы долго будете мучиться и разбираться, почему ничего не работает.

Еще хочется добавить, что выше я описал вызов некэшируемого сниппета. Если вам понадобится результат работы занести в кэш, то вызов будет осуществляться по имени сниппета, помещенном в двойные квадратные скобки. Т.е. для сниппета с именем Name кэшируемый вызов будет представлять собой следующую конструкцию:

[[Name]]

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

Ну что же, теперь вы в курсе что такое «сниппет» и мы двигаемся дальше. Как я уже писал выше, для организации динамических меню в MODx мы будем использовать встроенный сниппет Wayfinder.

6.2. создание меню

Результатом работы Wayfinder является вывод ненумерованного списка, элементами которого будут ссылки на дочерние документы для той страницы, на которой мы вызываем этот сниппет. Для примера, если у нас структура документов такая как изображена на рисунке 6.1. то, если мы вызовем на главной странице сниппет [!Wayfinder!] результатом его работы будет список из 4 ссылок на дочерние страницы.



Рис. 6.1

Список будет иметь вид:

• 
  
  
• О нас
• 
  
  
• Контактная информация
• 
  
  
• Новости
• 
  
  
• Услуги
• 
  
  

Внимание: при таком вызове обязательно наличие дочерних элементов, ведь если их не будет, то сниппет не выведет ничего. Нам этот вызов не подходит для организации меню на сайте, так как главное меню мы хотим видеть не только на главной, но также и на всех дочерних страницах сайта. При этом, мы хотим, чтобы меню на всех страницах состояло из одних и тех же пунктов. Для того чтобы это сделать, мы вызываем сниппет Wayfinder и одновременно передаем ему параметр startId, в который записываем ID того документа, ссылки на дочерние страницы которого мы будем выводить. Напомню, что ID документа это цифра, указанная в скобках в дереве документов MODx.

Вызов будет выглядеть следующим образом:

[!Wayfinder? &startId=`1`!]

В этом случае на какой бы странице мы не вызывали сниппет Wayfinder, список будет формироваться из ссылок на дочерние элементы главной страницы (ID=1), а не той, на которой мы сделали вызов.

Сейчас давайте посмотрим, что же представляет собой главное меню сайта в нашем шаблоне. Если вы помните, меню у нас хранится в одном чанке с логотипом под названием HEADER. И что мы видим?

01

Меню представляет собой обычный ненумерованный список, помещенный в контейнер с id="topnav". Это значит, что HTML разметка меню будет представлять собой обычный список, а всю задачу по внешнему виду берет на себя CSS файл, который мы подключали ранее. Но мы с вами уже в курсе, как можно этот ненумерованный список динамически вывести в MODx. Поэтому удаляем из чанка HEADER вот этот код:

01

• 
  
  02
• Home
• 
  
  03
• Style Demo
• 
  
  04
• Full Width
• 
  
  05
• DropDown
  
  06
  • 
    
    07
  • Link 1
  • 
    
    08
  • Link 2
  • 
    
    09
  • Link 3
  • 
    
    10
  
  
  11
• 
  
  12
• A Long Link Text
• 
  
  13

А на его месте вызываем сниппет Wayfinder с передаваемым ему параметром startId=`1`.

[!Wayfinder? &startId=`1`!]

Вызов сниппета должен находиться в контейнере с id="topnav" для того, чтобы наше динамическое меню в итоге отображалось так же, как указано в шаблоне. После сохранения можете посмотреть, что у вас получилось. На вкладке Сайт → Просмотр.

О чудо, у нас появилось главное меню, с автоматическими сгенерированными ссылками и названиями пунктов, рис. 6.2. При этом названия пунктов взяты как названия страниц в дереве документов, а URL ссылки определяется псевдонимом, указанным на странице редактирования ресурсов.



Рис. 6.2

Если мы будем переходить между пунктами, мы сможем увидеть в адресной строке браузера, как меняются URL страниц. Внешний вид страниц, правда, остается неизменным, это потому что у нас пока нет изменяемой информации на странице.

Давайте посмотрим на исходный код получившегося главного меню:

01

Обратите внимание, что сниппет Wayfinder автоматически генерирует класс для активного пункта меню и его название даже совпало с прописанным в нашем случае в CSS классом "active". Поэтому при переходе по меню, активный пункт у нас подсвечивается зеленым цветом, так как и было изначально в шаблоне.

По умолчанию, для активного пункта меню Wayfinder всегда будет генерировать , поэтому, если в вашем шаблоне он описывается другим классом, измените его в CSS файле. Если вы внимательно посмотрите еще раз на исходный код сгенерированного списка, то вы увидите, что последний пункт меню по умолчанию обозначается классом last, это тоже имейте ввиду, так как часто для оформления последнего пункта меню требуется прописывать стили отдельно. В этом случае для его оформления можете воспользоваться классом last.

6.3. редактирование меню

Теперь давайте еще раз взглянем на пункты меню. Как мы видим, в главном меню нет пункта, «главная страница». Так как мы указали в качестве параметра сниппета startId идентификатор главной страницы, то у нас вывелось меню, состоящее из дочерних ресурсов для главной страницы, не включая ее саму. Добавить ссылку на главную страницу можно различными способами, я не буду вас сильно загружать и для начала предложу самый оптимальный способ, которым надо было воспользоваться сразу. Для этого проще всего изменить структуру документов чтобы дерево выглядело следующим образом: (рис. 6.3.)



Рис. 6.3

Чтобы это сделать заходим на страницу редактирования ресурсов и в поле Папка указываем название сайта, в нашем случае это Мой бизнес т.е. документ с ID=0.

Может быть, надо было сразу создавать такую структуру, но зато вы отработаете процесс изменения родительских документов для ресурсов и лучше поймете, как работает вывод Wayfinder. И так, после того, как вы изменили структуру документов, нам нужно изменить значение параметра startId. Сейчас в него записан ID ресурса Главная страница, т.е. сниппет будет пытаться вывести дочерние документы этой страницы, которых, как мы видим, уже нет. Результатом работы сниппета будет пустота. Можете сами в этом убедиться: при просмотре сайта в браузере меню отображаться не будет.

Для того чтобы меню отображалось, мы в startId записываем идентификатор самой корневой папки. Он всегда будет равен 0. Делаем это, как и в прошлый раз в чанке HEADER:

[!Wayfinder? &startId=`0`!]

После этого в главном меню у нас, помимо тех пунктов меню, которые были до этого, появится еще пункт Главная страница, так как все эти пункты являются дочерними относительно корня сайта. Но, если у вас страницы названы так же, как и у меня, вы заметите, что меню уже не помещается в один ряд с логотипом, так как названия их слишком длинные, рис. 6.4. Это очень хорошо. Спросите почему. А потому, что я смогу вам показать на примере еще одно поле на странице редактирования ресурсов, о котором я говорил раньше, и с помощью которого можно будет решать проблемы такого характера.



Рис. 6.4

И так, чтобы меню не сползало под логотип нам нужно изменить длину одного или двух пунктов меню. В нашем случае лучше всего вместо названия пункта Главная страница написать просто Главная. Это можно сделать, не изменяя название самого ресурса. Просто идем на страницу редактирования ресурса с именем Главная страница и в поле Пункт меню вписываем короткое название нашего пункта — Главная, рис. 6.5.



Рис. 6.5

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



Рис. 6.6

Вот теперь у нас уже есть готовое главное меню, с помощью которого мы можем переходить по страницам, созданным в дереве документов MODx.

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

Что вам чаще всего может пригодиться при работе с меню? Конечно же, его сортировка. Допустим, вам хочется, чтобы пункты меню располагались в следующем порядке: Главная, О нас, Услуги, Контактная информация и в конце Новости. По умолчанию выставлена сортировка по параметру menuindex, который вы устанавливаете при редактировании ресурсов в поле Позиция в меню, рис. 6.7.



Рис. 6.7

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

Главная — 0, О нас — 1, Услуги —2, Контактная информация — 3 и в конце Новости — 4.

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



Рис. 6.8

После этого в дереве документов название ресурса Новости будет светло-серого цвета.

6.4. итоги

На этом, собственно, организация меню окончена. Мы научились выводить динамическое меню в MODx c помощью встроенного сниппета Wayfinder. При этом вы уже на практике попробовали отсортировать пункты меню и убирать из показа в меню выборочные пункты.

Единственное, что еще хочется посоветовать, это вынести главное меню в отдельный чанк. Для этого создайте чанк MAIN-MENU и в его содержимое вставьте конструкцию вызова сниппета, обрамленную контейнером