Сайт на 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>











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

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Blogroll:

  • после взлома почты даются инструкции как незаметно просматривать ящик →

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