Сайт на MODX Evolution. Часть 8. Продолжаем выводить ресурсы с TV-картинками.

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

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

<div id="fbox1">
  <!-- ... -->
</div>
<div id="fbox2">
  <!-- ... -->
</div>
<div id="fbox3">
  <!-- ... -->
</div>

на элементы ненумерованного списка.

1. Подготавливаем стили CSS, правим файл default.css, расположенный в каталоге assets/templates/openhouse:

#footer-content ul#services {
    list-style: none;
}

#footer-content ul#services li:first-child {
    float: left;
    width: 320px;
    margin-right: 20px;
}

#footer-content ul#services li {
    float: left;
    width: 320px;
}

#footer-content ul#services li:last-child {
    float: right;
    width: 320px;
}

Как видно, я использую псевдо-классы first-child и last-child.

Просмотреть

2. Вносим изменения в шаблоне MODX Evolution под названием index (его мы создали в одной из прошлых статей).

<ul id="services">
  <li>
    <!-- ... -->
  </li>
  <li>
    <!-- ... -->
  </li>
  <li>
    <!-- ... -->
  </li>
</ul>
Просмотреть

3. Вот теперь у нас более или менее пригодная структура верстки. Теперь подготавливаем чанк для сниппета под названием Ditto.

<li>
  <h2><span>Услуга:</span> [+title+]</h2>
  <p>[+thumbnail+]</p>
  <p>[+introtext+]</p>
  <p><a href="[~[+id+]~]">Подробнее</a></p>
</li>
  • [+title+] — плейсхолдер заголовка страницы;
  • [+thumbnail+] — TV-параметр а-ля прикрепленная к посту картинка;
  • [+introtext+] — краткий анонс статьи;
  • [~[+id+]~] — ссылка на полную версию страницы.

TV-параметры в качестве плейсхолдеров в Ditto можно вызывать вот так [+ИМЯ_TV_ПАРАМЕТРА+].

[[Ditto? 
&parents=`13`
&display=`3`
&tpl=`services-excerpt`
]]

Эти параметры сниппета я не буду уже расшифровывать, т.к. мы с вами так уже выводили однажды Новости.

А получится должно следующее:

Услуги - MODX Evolution

Посмотреть исходник шаблона index на данном этапе можно здесь:

Просмотреть
Опубликовано 10-01-2014 в 17:02


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Свежие комментарии

  • Радик: к записи Помогите, не получается спарсить. Вот тут #ire »
  • Администратор: к записи Когда меняете пароль к базе в панели управления хо »
  • Александр: к записи Добрый день! Подскажите пожалуйста есть макхост на »
  • Администратор: к записи Зависимость - от версий JQuery разве что и того, ч »
  • VellioN: к записи Есть какая нибудь зависимость от модулей друпал на »
  • VellioN: к записи Здравствуйте, у меня возникли проблемы. Сделал все »
  • Администратор: к записи Погуглите по теме FancyBox или LightBox скриптов. »

Статистика спама

Последние твиты