Создание блога на MODx. Урок 3 — Реализация навигации и работа со специальными тегами MODx

Итак, в прошлом уроке мы с вами интегрировали готовую  HTML CSS верстку в систему управления MODx. Создали два шаблона и разбили их на логические части, которые вынесли в отдельные чанки. В сегодняшнем уроке мы будем «оживлять» наш статичный шаблон.

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

Еще раз напомню, для опоздавших на урок — мы работаем в этом курсе с последней версией MODx Evolution 1.0.5. 

Теги MODx

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

Отправляемся редактировать чанк HEAD, в котором хранится содержимое тега head.

Сейчас там находится следующий код

<head>
<title>CoolBlue</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
<link rel="stylesheet" type="text/css" media="screen" href="/assets/templates/blog/css/screen.css" />
</head>

Самым значимым содержимым этого тега является подключение файла с CSS стилями. Некоторые META-теги вообще можно опустить. Давайте сейчас добавим динамических данных этому блоку с помощью специальных тегов MODx и TV-параметров.

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

<head>
<title>[*pagetitle*] | [(site_name)]</title>
<base href="[(site_url)]" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=[(modx_charset)]" />
<meta name="author" content="Имя автора блога" />
<meta name="description" content="[*description*]" />
<meta name="keywords" content="[*keywords*]" />
<link rel="stylesheet" type="text/css" media="screen" href="/assets/templates/blog/css/screen.css" />
<link href="assets/templates/blog/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>

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

Мы использовали следующие специальные теги MODx:

  • [*pagetitle*] — заголовок ресурса
  • [(site_name)] — имя сайта, вписанное на странице системной конфигурации
  • [(modx_charset)] — кодировка, установленная в системе управления (UTF-8)
  • [*description*] — описание ресурса. Это поле находится на странице редактирования под полем «Расширенный заголовок»

Помимо специальных тегов, в чанке HEAD прописан вывод TV-параметра с именем keywords, который мы чуть позже создадим для указания ключевых слов страницы.

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

<link href="assets/templates/blog/favicon.ico" rel="shortcut icon" type="image/x-icon" />

В нашем случае эта иконка будет лежать в папке assets/templates/blog/.

Сгенерировать cебе иконку правильных размеров и в нужном формате .ico вы сможете с помощью сервиса, favicon.ru. Для этого достаточно прикрепить изображение на сайте и нажать «Создать favicon.ico». После этого скачиваете готовую иконку в формате .ico и помещаете её в папку с шаблоном.

Сохраняем изменения, внесенные в чанк HEAD, и отправляемся создавать TV-параметр для вывода ключевых слов на страницах.

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

Создать новый параметр можно на вкладке Элементы → Управление элементами → Параметры (ТV) → Новый параметр (TV). 

Создание TV

 

Заполняем поля при создании TV:

Имя параметра — keywords (при заполнении этого поля необходимо указать название, которое вы указали в чанке head).

Заголовок — ключевые слова.

Описание — ключевые слова для META тега на страницах сайта. Разделяются запятыми.

Тип ввода — text.

Не забудьте также указать шаблоны, которые могут использовать этот Параметр (TV).

Доступ шаблонов для TV

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

Дополнительное поле

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

Сейчас можно проверить, что получилось (Сайт→ Просмотр). Если вы все сделали правильно, то у вас должен автоматически генерироваться тег title страницы, а в META-теги keywords и description будет подставляться информация, вписанная в поля «Описание» и «Ключевые слова» при редактировании ресурса.

Создание динамического меню на блоге

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

Рекомендую создать следующую структуру сайта. 

Созданное дерево MODx

Т.е. все категории и подкатегории вложены в главную папку (в моем случае с названием «Блог веб-разработчика MODx»), а общие страницы «Контактная информация», «О блоге», «Карта сайта» и др. находятся в самом корне дерева. С такой структурой будет удобнее работать с шаблонами.

Внимание: если у вас возникнут вопросы при создании структуры сайта, то почитайте подробнее о дереве документов и создании ресурсов в MODx.

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

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

Внимание: если вы только начинаете изучать MODx и в первые сталкиваетесь с вызовом сниппетов, настоятельно рекомендую  почитать мою статью о работе со сниппетом Wayfinder. После её прочтения вы получите представление о сниппетах в MODx и об их использовании.

Создание главного меню

Главное меню у нас уже находится в чанке HEADER. Вот HTML разметка, отвечающая за вывод главного меню сверху страницы.

<div  id="nav">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="style.html">Style Demo</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">About</a></li>
</ul>
</div>

Это обычный список, в котором активный пункт выделен с помощью идентификатора  id="current". При этом список обернут в блок с идентификатором id="nav". Заменяем список UL на вызов сниппета Wayfinder, чтобы получилась такая конструкция:

<div  id="nav">
[!Wayfinder? &startId=`0` &level=`1`!]
</div>

Параметр startId=`0` указывает, что сниппет должен вывести документы, лежащие в папке с ID=0 из дерева ресурсов MODx, т.е. все документы дерева. Параметр &level=`1` накладывает дополнительное ограничение: вывести только документы с уровнем вложенноcти не более 1. Результатом работы сниппета будет UL список, пунктами которого являются ссылки на страницы, лежащие в самом корне дерева документов MODx. Все вложенные документы будут исключены из списка.

По умолчанию сниппет Wayfinder помечает активный пункт меню CSS классом class="active". У нас же, как вы помните, активный пункт в HTML разметке выделен с помощью идентификатора  id="current". Для того, чтобы активный пункт отображался правильно, давайте отредактируем CSS файл coolblue.css.

Находим следующих код:

#header #nav ul li#current a {
background: transparent url(../images/current.jpg) no-repeat center bottom;
color: #fff; }

и заменяем его на

#header #nav ul li.active a {
background: transparent url(../images/current.jpg) no-repeat center bottom;
color: #fff;
}

Т.е. в селекторе заменяем идентификатор current на класс active.

При редактировании главной страницы в поле «Пункт меню» впишите, например, «Главная». По умолчанию после установки там вписано «Base Install».

Пункт меню

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

Главное меню сайта

При переходе по меню активный пункт будет выделен треугольником.

Создание вспомогательного меню по категориям блога

Переходим к выводу вспомогательного меню.

Задача будет стоять следующая: вывести в меню рубрики блога, для активной рубрики отобразить все имеющиеся у неё подкатегории. Т.е. уровень вложенности документов будет равен 2. Но есть один момент, который мы должны учесть в этом случае: у некоторых рубрик может не быть вложенных категорий, и в этом случае в меню попадут обыкновенные статьи. Поэтому, нам также необходимо исключить ресурсы, которые не являются папкой, а, соответственно, являются обычной заметкой в блоге. Сделаем это так же, как в случае с главным меню, с помощью сниппета Wayfinder.

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

Вот HTML разметка, отвечающая за вывод бокового меню в правой колонке.

<div class="sidemenu">
<h3>Sidebar Menu</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#TemplateInfo">TemplateInfo</a></li>
<li><a href="style.html">Style Demo</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="archives.html">Archives</a></li>
</ul>
</div>

Вместо списка UL вставляем вызов сниппета Wayfinder и в тег h3 вписываем заголовок меню.

<div class="sidemenu">
<h3>Категории</h3>
[!Wayfinder? &startId=`1` &level=`2` &hideSubMenus=`1` &includeDocs=`SELECT id FROM modx_site_content WHERE isfolder<>0 `!
</div>

Переданные параметры сниппету:

&startId=`1` — указываем Id папки, в которой хранятся все категории блога. Если у вас ID этой папки другой, то впишите другое число при вызове сниппета.

&level=`2` — уровень вложенности.

&hideSubMenus=`1` — отображать вложенные документы для активного пункта.

&includeDocs=`SELECT id FROM modx_site_content WHERE isfolder<>0 `— включать в результат только документы, имеющие дочерние элементы, т.е. являющиеся категориями блога. Внимание: т.к. выборка ведется из базы данных, то убедитесь, что у таблиц в вашей базе данных префикс  modx_. Если вы при установке изменили стандартный префикс на какой-нибудь другой, то необходимо вместо modx_site_content вписать имя_вашего_префикса_site_content.

При этом вызове сниппета у нас будет выводится меню, удовлетворяющее всем поставленным условиям: вывод категорий блога с уровенем вложенности 2, при этом для активного пункта отображаются его подкатегории (при их наличии).

Давайте в CSS пропишем отступы и размер шрифта для подкатегорий. 

Находим в файле  coolblue.css место, где описан стиль для меню в правой колонке (.sidemenu), и добавляем код.

.sidemenu ul li ul li{ font-size:0.9em; padding: 5px 5px 0 10px;}

Тем самым для вложенных категорий мы делаем шрифт чуть поменьше и прописываем отступы.

При желании можете также изменить отображение шрифта. Например уберем перевод текста в верхний регистр и жирное выделение пунктов меню. При этом размер шрифта увеличим на 20%. Для этого отправляемся редактировать CSS файл и редактируем селектор sidemenu ul li a, чтобы получилась следующая конструкция:

.sidemenu ul li a:link, .sidemenu ul li a:visited { color: #33799B; padding-left: 0; font-size:1.2em; }

Внешний вид бокового меню в итоге получится следующим:

Боковое меню

Вывод содержимого заметок блога

Теперь, когда и главное и вспомагательное меню блога готовы, давайте сделаем вывод контента на внутренних страницах. Для этого отправляемся редактировать чанк MAIN-INSIDE, который у нас используется в шаблоне «Внутренняя страница». Для вывода контента, помещенного в поле «Содержимое ресурса», используется специальный тег MODx — [*content*].

В чанк MAIN-INSIDE вносим следующую конструкцию:

<div id="main">
<h2>[*pagetitle*]</h2>
[*content*]
</div>

Теперь при редактировании ресурсов с шаблоном «Внутренняя страница» информация, внесенная в визуальном редакторе, отобразится на странице сайта, а в качестве заголовка страницы будет использовано поле «Заголовок». Можете проверить: внесите какую-либо информацию в поле «Содержимое ресурса», и после сохранения нажмине на кнопку «Просмотр».

Отображение внутренних страниц

Все описанные в уроке дейcтвия вы сможете посмотреть в видео к уроку.

Чтобы не пропустить следующий урок подпишитесь на обновления в блоге.

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию блога на MODx:

30.09.2011
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus