Хлебные крошки в Publii

Несмотря на большое число готовых плагинов и решений у Publii еще много мест требующих доработок. Одно из таких слабых мест - "хлебные крошки" (breadcrumb). 

getPublii.com - одна из лучших статических CMS в мире. Для пользователей без знаний программирования и администрирования - практически безальтернативный "движок".

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

  • Просто breadcrumb
  • Breadcrumb через теги
  • Breadcrumb через доп поля

Простые breadcrumb

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

<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a itemprop="item" href="{{@website.url}}">
		<span itemprop="name">{{@website.name}}</span>
		</a>
		<meta itemprop="position" content="1" />
	</li>
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<span itemprop="name">{{title}}</span>
		<meta itemprop="position" content="2" />
	</li>
	</ol>

Вместо {{@website.name}} можно жестко прописать нужный вам текст. В простом варианте это все "крошки" размеченные по schema

Breadcrumb через теги

Самая логичная реализация через "главный" тэг. Таким образом мы получим крошки 3х уровней.

Если крошки будут вставлены в post.hbs:

<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a itemprop="item" href="{{@website.url}}">
		<span itemprop="name">Главная</span>
		</a>
	<meta itemprop="position" content="1" />
	</li>
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a itemprop="item" href="{{mainTag.url}}">
		<span itemprop="name">{{mainTag.name}}</span>
		</a>
		<meta itemprop="position" content="2" />
	</li>
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<span itemprop="name">{{title}}</span>
		<meta itemprop="position" content="3" />
	</li>
	</ol>

Если крошки будут вставлены в общий шаблон footer.hbs:

	<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a itemprop="item" href="{{@website.url}}">
		<span itemprop="name">Главная</span>
		</a>
		<meta itemprop="position" content="1" />
	</li>
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a itemprop="item" href="{{post.mainTag.url}}">
		<span itemprop="name">{{post.mainTag.name}}</span>
		</a>
		<meta itemprop="position" content="2" />
	</li>
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<span itemprop="name">{{post.title}}</span>
		<meta itemprop="position" content="3" />
	</li>
	</ol>

Breadcrumb через дополнительные поля

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

Крошки 4-го уровня реализованные на Publii
Крошки 4-го уровня реализованные на Publii

 


Комментарии:

Related posts