Да, вы можете сделать это.
Для этого мы воспользуемся преимуществом того факта, что текущая страница всегда представлена жидкой переменной: page
в шаблоне, а также что каждая запись / страница имеет уникальный идентификатор в своем атрибуте page.url
.
Это означает, что нам просто нужно использовать цикл для построения нашей страницы навигации, и таким образом мы можем проверять page.url
для каждого члена цикла. Если он находит совпадение, он знает, чтобы выделить этот элемент. Вот и мы:
{% for node in site.pages %}
{% if page.url == node.url %}
<li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
{% else %}
<li><a href="{{node.url}}">{{node.title}}</a></li>
{% endif %}
{% endfor %}
Это работает как ожидалось. Однако вы, вероятно, не хотите, чтобы все ваши страницы были в панели навигации. Чтобы эмулировать «группировку» страниц, вы можете сделать что-то вроде этого:
## Put the following code in a file in the _includes folder at: ./_includes/pages_list
{% for node in pages_list %}
{% if group == null or group == node.group %}
{% if page.url == node.url %}
<li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
{% else %}
<li><a href="{{node.url}}">{{node.title}}</a></li>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
Теперь страницы можно «группировать». Чтобы дать странице группу, вам необходимо указать ее на страницах YAML Front Matter:
---
title: blah
categories: blah
group: "navigation"
---
Наконец-то вы можете использовать свой новый код!
Везде, где вам нужна навигация, чтобы перейти в шаблон, просто «позвоните» вашему включаемому файлу и передайте ему несколько страниц и группу, которую вы хотите отобразить:
<ul>
{% assign pages_list = site.pages %}
{% assign group = 'navigation' %}
{% include pages_list %}
</ul>
Примеры
Эта функциональность является частью Jekyll-Bootstrap framework.
Вы можете увидеть точную документацию для кода, изложенного здесь: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list
Наконец, вы можете увидеть это в действии на самом сайте. Просто посмотрите на правую навигацию, и вы увидите, что текущая страница выделена зеленым цветом: Пример выделенной навигационной ссылки