Jekyll - Met automatiquement en surbrillance l'onglet actuel dans la barre de menus

Question

J'utilise github pour héberger un site statique et Jekyll pour le générer.

J'ai une barre de menus (en tant que <ul> ) et je voudrais que les <li> correspondant à la page en cours se voient attribuer une classe différente pour la surbrillance CSS.

Donc, quelque chose comme pseudo-code:

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

Ou peut-être même générer le <ul> entier dans Jekyll.

Comment cela peut-il être fait avec des changements minimes en dehors du <ul> incriminé?

Answer 1

Oui, vous pouvez le faire.
Pour ce faire, nous allons profiter du fait que la page en cours est toujours représenté par le liquide de la variable: page dans le modèle, et aussi que chaque poste/page possède un identificateur unique en son page.url d'attribut.

Cela signifie que nous avons juste à utiliser une boucle pour construire notre page de navigation, et en faisant ainsi, nous pouvons vérifier page.url contre chaque membre de la boucle. S'il trouve une correspondance, il sait mettre en surbrillance cet élément. Ici, nous allons:

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

Cela fonctionne comme prévu. Cependant, vous ne voulez probablement pas à tous de votre page dans votre barre de navigation. Afin d'émuler la page "groupement", vous pouvez quelque chose comme ceci:

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

Maintenant, les pages peuvent être regroupés. Pour donner une page d'un groupe, vous devez le spécifier dans les pages YAML Avant la Matière:

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

Enfin, vous pouvez utiliser votre nouveau code! Partout où vous avez besoin de votre navigation pour aller dans votre modèle, il suffit "d'appel" de votre fichier et de le transmettre à certaines pages et le groupe que vous souhaitez afficher:

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

Exemples

Cette fonctionnalité fait partie de la Jekyll-Bootstrapcadre. Vous pouvez voir exact de la documentation pour le code présenté ici: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list

Enfin vous pouvez le voir en action à l'intérieur du site lui-même. Il suffit de regarder le bras droit de navigation et vous verrez la page en cours est mis en surbrillance en vert: Exemple mis en évidence nav lien

Answer 2

Je me sens comme de la simple navigation exigence, les solutions sont trop complexes. Voici une solution qui n'implique pas de préliminaires, javascript, les boucles, etc.

Depuis que nous avons accès à l'URL de la page, nous pouvons normaliser et de diviser l'URL et tester les segments, comme suit:

{% assign current = page.url | downcase | split: '/' %}

<nav>
  <ul>
    <li><a href='http://stackoverflow.com/about' {% if current[1] == 'about' %}class='current'{% endif %}>about</a></li>
    <li><a href='http://stackoverflow.com/blog' {% if current[1] == 'blog' %}class='current'{% endif %}>blog</a></li>
    <li><a href='http://stackoverflow.com/contact' {% if current[1] == 'contact' %}class='current'{% endif %}>contact</a></li>
  </ul>
</nav>

Bien sûr, ce n'est utile que si statique segments de fournir le moyen de délimiter la navigation. Rien de plus compliqué, et vous aurez à utiliser une matière de premier plan comme @RobertKenny démontré.

Answer 3

Semblable à la solution de @ ben-Foster mais sans utiliser jQuery

J'avais besoin de quelque chose de simple, c'est ce que j'ai fait.

Dans mon avant-propos, j'ai ajouté une variable appelée active

par exemple

 ---
layout: generic
title:  About
active: about
---
 

J'ai une navigation inclure avec la section suivante

     <ul class="nav navbar-nav">
        {% if page.active == "home" %}
            <li class="active"><a href="#">Home</a></li>
        {% else %}
            <li><a href="http://stackoverflow.com/">Home</a></li>
        {% endif %}
        {% if page.active == "blog" %}
            <li class="active"><a href="#">Blog</a></li>
        {% else %}
            <li><a href="../blog/">Blog</a></li>
        {% endif %}
        {% if page.active == "about" %}
            <li class="active"><a href="#">About</a></li>
        {% else %}
            <li><a href="../about">About</a></li>
        {% endif %}
    </ul>
 

Cela fonctionne pour moi car la quantité de liens dans la navigation est très étroite.

Answer 4

J'ai utilisé un peu de JavaScript pour accomplir cela. J'ai la structure suivante dans le menu:

 <ul id="navlist">
  <li><a id="index" href="index.html">Index</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="projects.html">Projects</a></li>
  <li><a href="videos.html">Videos</a></li>
</ul>
 

Cet extrait de code javascript met en évidence la page correspondante actuelle:

 $(document).ready(function() {
    var pathname = window.location.pathname;

    $("#navlist a").each(function(index) {
        if (pathname.toUpperCase().indexOf($(this).text().toUpperCase()) != -1)
            $(this).addClass("current");
    });

    if ($("a.current").length == 0)
        $("a#index").addClass("current");
});
 

Answer 5

Mon approche consiste à définir une variable personnalisée dans l'avant-plan YAML de la page et à l'exporter dans l'élément <body> :

 <body{% if page.id %} data-current-page="{{ page.id }}"{% endif %}> 
 

Mes liens de navigation incluent l'identifiant de la page à laquelle ils renvoient:

 <nav>
    <ul>
        <li><a href="artists.html" data-page-id="artists">artists</a></li>
        <li><a href="#" data-page-id="contact">contact</a></li>
        <li><a href="#" data-page-id="about">about</a></li>
    </ul>
</nav>
 

Dans l’avant-page, nous définissons l’identifiant de la page:

 ---
layout: default
title: Our artists
id: artists
---
 

Et enfin un peu de jQuery pour définir le lien actif:

 // highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
    $("a[data-page-id='" + currentPage + "']").addClass("active");
}