Statik bir site barındırmak için bir github ve Jekyll bunu üretmek için kullanıyorum.

Menü çubuğu (<ul>) ve geçerli sayfa için <li> CSS vurgulamak için farklı bir sınıf atanmış olmak ister.

Sahte kod gibi bir şey yani:

<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>

Ya da belki de Jekyll <ul> bütün oluşturmak bile.

Bu nasıl <ul> kusurlu dışında çok az değişiklik yapılabilir mi?

Evet, bunu yapabilirsiniz.
Bunu yapmak için çalışacağız yararlanmak aslında bu geçerli sayfa her zaman tarafından temsil edilen sıvı değişken: page şablon, ve de her yazı/sayfa için benzersiz bir tanımlayıcı page.url öznitelik.

Bu sadece bizim navigasyon sayfası oluşturmak için bir döngü kullanmak zorunda anlamına gelir, ve böylece döngü her üyesine karşı page.url kontrol edebiliriz. Eğer bir eşleşme bulursa, o öğeyi vurgulamak için bunu biliyor. İşte başlıyoruz:

  {% 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 %}

Bu beklendiği gibi çalışır. Ancak muhtemelen nav bar tüm sayfa istemiyorum. Sayfa "" gibi bir şey bu . gruplandırma taklit etmek için

## 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 %}

Şimdi sayfaları olabilir "". gruplandırılmış Bir sayfa belirtmek gerekir bir grup vermek için Ön Önemli YAML:

---
title: blah
categories: blah
group: "navigation"
---    

Son olarak, yeni bir kod kullanabilirsiniz! Navigation şablonunda nereye istersen, sadece "dosya ve geçirir bazı sayfalar ve görüntülemek istediğiniz grup vardır:" der

<ul>
  {% assign pages_list = site.pages %}
  {% assign group = 'navigation' %}
  {% include pages_list %}
</ul>

Örnekler

Bu işlevler Jekyll-Bootstrap çerçevesinin bir parçası. Kodu burada ana hatları için tam belgelerine bakın: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list

Sonunda kendisi web sitesi içinde eylem görebilirsiniz. Navigasyon ve geçerli sayfa yeşil ile renklendirilmiş olduğunu göreceksiniz sadece sağ bak: Example highlighted nav link