[jekyll] Jekyll-메뉴 모음에서 현재 탭을 자동으로 강조 표시

네, 할 수 있습니다.
이를 위해 우리는 현재 페이지가 page템플릿에서 항상 liquid 변수로 표현된다는 사실 과 각 게시물 / 페이지의 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 프레임 워크 의 일부입니다 . 여기에 설명 된 코드에 대한 정확한 문서를 볼 수 있습니다. http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list

마지막으로 웹 사이트 자체에서 작동하는 모습을 볼 수 있습니다. 오른쪽 탐색을 보면 현재 페이지가 녹색으로 강조 표시된 것을 볼 수 있습니다. 강조 표시된 탐색 링크의 예