Romych: /* Подсветка текущей страницы в навигации */

2021-12-22T13:38:42Z

Подсветка текущей страницы в навигации

Нова сторінка

←[[Hugo]]

== Список страниц определенного типа ==

Выведем на главной странице блок с 5 последними страницами из секции <code>portfolio</code>.

Добавьте в файл <code>layouts/index.html</code> следующий код:

<source lang="go">
{{ range first 5 (where .Data.Pages "Type" "portfolio") }}
{{ .Render "summary"}}
{{ end }}
</source>

Теперь создайте файл <code>layouts/_default/summary.html</code> с таким кодом:

<source lang="go">
<div class="post-preview">
<a href="{{ .Permalink }}"><h2 class="post-title">{{ .Title }}</h2></a>
<h3 class="post-subtitle">{{ .Description }}</h3>
{{ partial "categories.html" .}}<br>
{{ partial "tags.html" .}}
</div>
<hr>
</source>

Создайте три файла с кодом:

<code>layouts/partials/categories.html</code>:

<source lang="go">
{{ range .Params.categories }}
<a href="/category/{{ urlize . }}" >{{ title . }}</a>
{{ end }}
</source>

<code>layouts/partials/tags.html</code>:

<source lang="go">
{{ range .Params.tags }}
<a href="/tag/{{ urlize . }}" >{{ title . }}</a>
{{ end }}
</source>

<code>layouts/partials/years.html</code>:

<source lang="go">
{{ range .Params.years }}
<a href="/years/{{ urlize . }}" >{{ title . }}</a>
{{ end }}
</source>

Чтобы блок работал, нужно, чтобы в директории <code>content/portfolio</code> были файлы <code>.md</code> с такими полями в заголовке:

<source lang="yaml">
---
title: Литературный музей Владимира Даля
description: Официальный cайт музея, расположенного в Луганске.
tags:
- Drupal
categories:
- Site
- Culture
years:
- 2010
---
</source>

== Сортировка страниц ==

=== Стандартные сортировки ===

'''Weight -> Date (default)'''

<source lang="go">
{{ range .Data.Pages }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</source>

'''Weight -> Date'''

<source lang="go">
{{ range .Data.Pages.ByWeight }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</source>

'''Date'''

<source lang="go">
{{ range .Data.Pages.ByDate }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</source>

Аналогично добавляются сортировки по стандартным параметрам:

* '''PublishDate'''
* '''ExpiryDate'''
* '''Lastmod'''
* '''Length'''
* '''Title'''
* '''LinkTitle'''

=== Обратная сортировка ===

'''Reverse'''

<source lang="go">
{{ range .Data.Pages.ByDate.Reverse }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</source>

=== Сортировка определенного типа страниц ===

<source lang="go">
{{ range (where .Site.Pages "Section" "portfolio").ByDate.Reverse }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</source>

=== Cортировка по произвольному параметру ===

Добавим в страницы параметр <code>order</code>:

<source lang="yaml">
---
order: 0
---
</source>

Будем считать значение по умолчанию 0, а чем больше, тем выше в результатах сортировки будет находиться страница.

Выведем все страницы с сортировкой от большего значения <code>order</code> к меньшему:

<source lang="yaml">
{{ range sort .Data.Pages "Params.order" "desc" }}
{{ .Render "summary"}}
{{ end }}
</source>

Параметр <code>"desc"</code> нужен для инвертирования сортировки — потому что иначе сверху будут материалы с наименьшим значением <code>order</code>.

=== Универсальный блок со списком страниц текущего раздела и разными сортировками ===

Допустим, есть блок <code>partials/block_section_pages.html</code>, в котором выводится список страниц текущей Section.
Нужно в нем настроить, чтобы в разных Section список сортировался по-разному:

* по алфавиту (<code>Title</code>):
** slovar
* по весу (<code>Weight</code>):
** about
** how-to
** rules
* по дате (<code>Date</code>):
** portfolio

<source lang="go">
{{ if .Section }}
{{ $section_info := .Site.GetPage "section" .Section }}
<h4><a href="/{{ .Section }}/">{{ $section_info.Title }}</a></h4>
{{ $sort_by_field_map := (dict "slovar" "Title" "about" "Weight" "how-to" "Weight" "rules" "Weight" "portfolio" "Date" )}}
{{ $sort_by_field := index $sort_by_field_map .Section | default "Weight" }}
{{ range sort (where .Site.Pages "Section" .Section) $sort_by_field "asc" }}
{{ if .IsPage }}
<a {{ if eq ($.RelPermalink) .URL}} active{{ end }}" href="{{.URL}}">{{ .Title }}</a>
{{ end }}
{{ end }}
{{ end }}
</source>

== Список страниц с определенными параметрами ==

Усложним задачу: выведем только страницы, у которых <code>order</code> больше 0 и у которых параметр <code>to_title</code> содержит "yes":

<source lang="yaml">
{{ range sort .Data.Pages "Params.order" "desc" }}
{{ if eq .Params.to_title "yes" }}
{{ if gt .Params.order "0"}}
{{ .Render "summary"}}
{{ end }}
{{ end }}
</source>

Вариант с ограничением на вывод только первых 5 результатов:

<source lang="yaml">
{{ range first 5 (where (sort .Data.Pages "Params.order" "desc") ".Params.to_title" "yes") }}
{{ if gt .Params.order "0"}}
{{ .Render "summary" }}
{{ end }}
{{ end }}
</source>

== Список страниц в шаблоне <code>layouts/SECTION/single.html</code> ==

Список страниц раздела <code>about</code>:

<source lang="go">
{{ range where .Site.Pages "Section" "about" }}
{{ .Render "summary" }}
{{ end }}
</source>

Ссылка на главную страницу раздела:

<source lang="go">
<a href="{{.Site.BaseURL}}{{.Section}}/">{{.Section}}</a>
</source>

[[Категория:Hugo]]

== Подсветка текущей страницы в навигации ==

Используем шаблон:

<source lang="go">{{ if eq ($.RelPermalink) .URL}} class="active"{{ end }}</source>

Пример для меню:

<source lang="go">
{{ range .Site.Menus.menu_name }}
<li{{ if eq ($.RelPermalink) .URL}} class="active"{{ end }}><a href="{{.URL}}">{{ .Name }}</a></li>
{{ end }}
</source>

См. также:

* https://gohugo.io/functions/ismenucurrent/
* https://gohugo.io/templates/menu-templates/

Списки страниц Hugo - Історія редагувань

Romych: /* Подсветка текущей страницы в навигации */