Помню как-то давно, у нас тут на форуме, встал вопрос о превращении многоуровнего списка выдаваемого Wayfinder’om в красивую карту сайта — с узлами и ветвями. Задачу в ходе обсуждения сочли нетривиальной и браться никто не захотел.
И вот буквально неделю назад, решил я на одном сайте сделать красивую, насколько это возможно, карту. Гугл в этот день оказался жадным на быстрые решения, и поэтому полчасика пришлось пофантазировать.
В итоге, дефолтовый вывод Wayfinder’a —
список любой глубины и размера, удалось стилизовать под дерево всего тремя строками стилей и тремя маленькми изображениями.
Решение оказалось настолько простым и универсальным, что на радостях я внедрил его и на всех остальных сайтах
Вот живой пример:
http://sudexpertiza.by/sitemap/ — не скажу, что пример этот удачный именно как карта сайта, но как демка — очень показательный.
Однако, чудес не бывает и на деле всё оказалось не так гладко, как хотелось бы.
Дело в том, что
Wayfinder не считает единственный элемент на ветке дерева (один документ в папке) последним. Т.е. для него не проставляется атрибут
class="last". Если документа два — второй будет помечен последним, а вот если один — последнего не будет. Не будем спорить о правильности такого подхода, а лучше обсудим как это исправить.
Атрибут class со значеним "last" имеет ключевую роль в оформлении дерева, и без него дерево будет правильно выглядеть только если на сайте у вас нет папок со всего одним документом внутри. Для того, чтоб
Wayfinder всё таки помечал такие документы последними в списке, нужно использовать небольшой хак.
В файле
wayfinder.inc.php меняем строку (93)
if ($counter == ($numSubItems) && $numSubItems > 1) {
на
if ($counter == ($numSubItems) && $numSubItems >= 1) {
Очевидно, что тут мы вместо знака ’больше’ (’>’) посто делаем ’больше либо равно’ (’>=’).
Теперь как это использовать.
1. На странице где будет распологаться карта, делайте вызов
Wayfinder обрамляя его в контрейнер, как в следущем примере:
<div id="#sitemap">
[[Wayfinder? &startId=`0`]]
</div>
C помощью параметра &excludeDocs можно исключить из вывода [не]нужные документы.
2. [Подправляете и] заливаете прилагаемою к стилям графику на хост.
3. [Исправляете и ] добавлятее в свою таблицу стилей правила из файла tree.css находящегося в прилагаемом архиве.
Вот, они, кстати, для любопытных и ленивых.
#sitemap ul {
margin: 0 0 0 1px;
padding: 0 0 0 3px;
background-image: url("t1.gif");
background-repeat: repeat-y;
}
#sitemap ul li {
margin: 0;
padding: 0 0 0 14px;
list-style: none;
background-image: url("t2.gif");
background-repeat: no-repeat;
background-position: -3px 0;
}
#sitemap ul li.last {
margin-bottom: 6px;
background-image: url("t3.gif");
background-repeat: no-repeat;
background-position: -3px 9px;
}
Результат ниже на скриншоте.
