Создаем «Хлебные крошки» (Breadcrumb) на Blogger
01.02.12
«Хлебные крошки» или Breadcrumb — замечательный и очень полезный элемент навигации, который также может отлично исполнять функцию базовой перелинковки для блога. Нельзя сказать, что его нужно обязательно использовать на всех подряд проектах — тут, считаю, автор решает самостоятельно. Данные рассуждения уже были частично затронуты в статье про хлебные крошки в WordPress. Суть их заключается в следующем: с одной стороны формат блога, в частности и проектов на blogspot, не подразумевает вывод в качестве «хлебных крошек» какой-то сложной структуры — здесь вы найдете ссылку на главную, перечень тегов + заголовок текущей страницы. Все эти элементы пользователь может добавить самостоятельно, да и, скорее всего, они у вас уже есть.
С другой стороны благодаря подобной навигационной цепочке (пожалуй самое «научное» название данного элемента) не только улучшается структурированность шаблона, его юзабилити, но также некоторые элементы внутренней поисковой оптимизация сайта. Хуже, как говорится, от этого все равно не будет.
К сожалению, разработчики Blogger данный элемент не предусмотрели. Чем они руководствовались догадаться не сложно, об этом я уже успел сказать выше — Blogspot это не платформа для построения большого корпоративного портала или новостного сайта с глубокой иерархией страниц. Максимально что можно сделать для «хлебных крошек» это вывод нескольких ярлыков (тегов) перед названием текущей страницы. Рассмотрим каким образом это реализовывается:
1. Идем в редактор шаблона — выбираем Изменить HTML (Edit HTML) и ставим галочку «расширить шаблон виджета» (expand the widget template).
2. Находим фрагмент кода
<b:include data='top' name='status-message'/>и вставляем перед ним:
<b:include data='posts' name='breadcrumb'/>Здесь следует заметить, что в некоторых шаблонах блок кода, который мы ищем, может быть найден сразу в нескольких местах. Если это так, то вам придется попробовать поочередно добавить код сначала перед одним, а потом перед другим html блоком. Хотя, в принципе, можно сразу между двумя разместить.
3. Далее находим
<b:includable id='main' var='top'>и вставляет перед ним:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Главная</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Главная</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Главная</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>По умолчанию приведенный HTML код отображает в «хлебных крошках» последний ярлык (тег), то есть получается что-то вроде: «Главная — последний тег — текущий пост». Если вы уберете из него строки, подсвеченные красным цветом (ту, что посредине — оставить), тогда в меню отобразятся все теги для данной записи — как это показано на рисунке выше.
4.Сохраните шаблон, далее можно перейти к редактированию стилей шаблона. Для этого заходим в раздел Шаблон — кликаем «Настроить» — выбираем «Дополнительно» (Advanced) и «Добавить CSS» (Add CSS ), где пишем:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}Проверяем результат. Кстати в данном скрипте «Хлебные крошки» также отображаются и на страницах архивов (тегов) для большего удобства посетителей. Вообще большинству пользователей в структуре типичного блога «без наворотов» запутаться не так уж сложно и без «хлебных крошек». Тем не менее, я настаиваю, что в большинстве случаев они как минимум не помешают. Если вы со мной согласны, может смело использовать приведенный выше алгоритм установки.