Jekyll sélectionnez l'url de la page actuelle et le changement de sa classe

Je le fais en deux pages, j'ai mis en place dans Jekyll.

La première chose que je fais est la création d'une entrée à l'intérieur de _config.yml avec les informations de toutes les pages:

# this goes inside _config.yml. Change as required
navigation:
- text: What we do
  url: /en/what-we-do/
- text: Who we are
  url: /en/who-we-are/
- text: Projects
  url: /en/projects/
  layout: project
- text: Blog
  url: /en/blog/
  layout: post

Puis, sur ma page principale, j'ai utiliser cette information pour générer les liens de navigation. Sur chaque lien, je compare l'url du lien avec l'url de la page en cours. Si elles sont égales, la page est active. Sinon, ils ne le sont pas.

Il y a quelques cas particuliers: tous les articles du blog doit mettre en évidence le "blog" de lien, et les premières pages (anglais et espagnol) ne doivent pas présenter à la barre de navigation. Pour les deux cas, je m'appuie sur le fait que les messages de blog et les pages de couverture ont des dispositions spécifiques (notez que le "Blog" et "Projet" liens sur le yaml ont un paramètre supplémentaire appelé "mise en page")

La navigation code est généré comme ceci:

{% unless page.layout == 'front' %}
  <ul class="navigation">
    {% for link in site.navigation %}
      {% assign current = nil %}
      {% if page.url == link.url or page.layout == link.layout %}
        {% assign current = 'current' %}
      {% endif %}

      <li class="{% if forloop.first %}first{% endif %} {{ current }} {% if forloop.last %}last{% endif %}">
        <a class="{{ current }}" href="{{ link.url }}">{{ link.text }}</a>
      </li>
    {% endfor %}
  </ul>
{% endunless %}

J'ai encore le souvenir de l'ajout d'une entrée à _config.yaml à chaque fois que j'ajoute une nouvelle page, puis redémarrez Jekyll, mais il arrive très rarement maintenant.

Je pense la navigation yaml pourrait aller à l'intérieur d'un _include appelé "navigation" ou quelque chose de similaire, mais je n'ai pas essayé d'utiliser yaml à l'intérieur donc je ne sais pas si cela va fonctionner. Dans mon cas, depuis que j'ai un site multilingue, il est plus facile d'avoir tout à l'intérieur de config (traductions manquantes sont plus faciles à repérer)

J'espère que cette aide.

Cela peut être une nouvelle fonctionnalité depuis que la question est d'abord apparue, mais j'ai découvert cela peut être fait en un seul fichier:

1. définir la navigation en tant que variable dans le fichier yaml en-tête
2. en boucle sur la variable à l'aide de liquide

Donc, à mon _layouts/base.html j'ai:

---
navigation:
- text: Home
  url: /index.html
- text: Travel
  title: Letters home from abroad
  url: /travel.html
---

<ul>
    {% for link in page.navigation %}
    <li {% if page.url == link.url %}class="current"{% endif %}>
       <a href="{{link.url}}" title="{{link.title}}">{{link.text}}</a></li>
    {% endfor %}
</ul>

---

Qui génère cette sur le Home page:

<ul>
    <li class="current"><a href="/index.html" title="">Home</a></li>
    <li><a href="/travel.html" title="Letters home from abroad">Travel</a></li>
</ul>

Et ce sur la Travel page:

<ul>
    <li><a href="/index.html" title="">Home</a></li>
    <li class="current"><a href="/travel.html" title="Letters home from abroad">Travel</a></li>
</ul>

Même la navigation sur toutes les pages

Après avoir lu toutes les réponses, je suis venu avec une nouvelle et plus facile à entretenir solution:

1. Ajouter {% include nav.html %} à votre _layouts/layout.html fichier
2. Ajouter un nav.html fichier sur votre _includes dossier

3. Ajoutez le contenu suivant votre nav.html fichier. Il permettra de déterminer si votre lien est sur la page en cours et ajouter une classe de active ainsi que de supprimer index.html à partir de votre lien. Il permettra également de travailler avec un sous-dossier comme /repo-name, ce qui est nécessaire pour GitHub gh-pages Pages branche.

   <nav>
       <ul class="nav">
           {% assign url = page.url|remove:'index.html' %}
           {% for link in site.navigation %}
               {% assign state = '' %}
               {% if page.url == link.url %}
                   {% assign state = 'active ' %}
               {% endif %}
               <li class="{{ state }}nav-item">
                   <a href="{% if page.url == link.url %}{{ site.baseurl }}{% else %}{{ site.baseurl }}{{ link.url }}{% endif %}" title="{{ link.title }}">{{ link.text }}</a>
               </li>
           {% endfor %}
       </ul>
   </nav>

4. Puis ajouter de la valeur liquidative lien tableau de votre _config.yml fichier de la manière suivante. L'esprit du droit de l'indentation, en YAML est assez pointilleux sur qu' (Jekyll ainsi).

   navigation:
         - text: Home
           title: Back to home page
           url: /index.html
         - text: Intro
           title: An introduction to the project
           url: /intro.html 
         - text: etc.
           title: ...
           url: /foo.html 

Navigation uniquement sur "retour" pour les autres

En supposant que le lien vers votre "Maison"-page (index.html) est la première partie de tableau à l'intérieur de la _config.htmls navigation tableau, vous pouvez utiliser le code suivant pour afficher la navigation à travers les différentes pages de la main/page d'accueil et un lien vers la page d'accueil sur toutes les autres pages:

<nav>
    <ul class="grid">
        {% assign url = page.url | remove:'/index.html' %}
        {% assign home = site.navigation.first %}
        {% if url == empty %}
            {% for link in site.navigation %}
                {% assign state = '' %}
                {% if page.url == link.url %}
                    {% assign state = 'active ' %}
                {% endif %}
                {% if home.url != link.url %}
                    <li class="{{ state }}nav-item">
                        <a href="{% if page.url == link.url %}{{ site.baseurl }}{% else %}{{ site.baseurl }}{{ link.url }}{% endif %}" title="{{ link.title }}">{{ link.text }}</a>
                    </li>
                {% endif %}
            {% endfor %}
        {% else %}
            <li class="nav-item active">
                <a href="{{ home.url }}" title="{{ home.title }}">{{ home.text }}</a>
            </li>
        {% endif %}
    </ul>
</nav>

Avec Jekyll 3.4.3, cela fonctionne :

<ul>
    {% for my_page in site.pages %} 
        {% if my_page.title %}
            <li {% if my_page.url == page.url %} class="active" {% endif %}>
                <a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}
                </a>
            </li>
        {% endif %} {% endfor %}
</ul>

Ajoutant à la solution de l'incarné, le plus simple ligne de code avec jQuery est ceci:

    $( "a[href='{{ page.url | remove: "index.html" }}']" ).addClass("current");

Fonctionne parfaitement pour moi.