Jekyll sélectionne l'URL de la page actuelle et change de classe

Question

J'ai été en utilisant Jekyll pour un site statique (de sorte que son facile à maintenir), et ont été bloqués à la fonctionnalité suivante :

C'est ma barre de liens :

<ul id="links">
    <li class="first"><a class="active" href="http://stackoverflow.com/">Home</a></li>
    <li><a href="./associate.html">Associate With Us</a></li>
    <li><a href="./media.html">Media</a></li>
    <li><a href="./clients.html">Clients</a></li>
    <li class="last"><a  href="./contact.html">Contact Us</a></li>
</ul>       

L' active classe gère la coloration. Ce que je veux, c'est cette classe à être appliqués par jekyll en fonction de certaines variables définies à l'aide de liquide/YAML.

Est-il un moyen facile d'aller à ce sujet?

Depuis le bar est commun à toutes les pages, il est maintenant dans la configuration par défaut. Je pourrais aller autour de par l'utilisation de Javascript pour détecter l'url, et faire la mise en évidence, mais je me demandais si il y avait un moyen de faire cela dans Jekyll.

Answer 1

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")

Le code de navigation 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 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 que 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.

Answer 2

En guise d’extension supplémentaire sur le travail de l’autre, voici un moyen de le faire fonctionner sans afficher index.html détrempé sur toutes vos belles URL:

 ---
navigation:
 - text: Home
   url: /
 - text: Blah
   url: /blah/
---
{% assign url = page.url|remove:'index.html' %}
{% for link in page.navigation %}
<li {% if url == link.url %}class="active"{% endif %}>
    <a href="{{link.url}}" title="{{link.title}}">{{link.text}}</a>
</li>
{% endfor %}
 

L'or est dans l'instruction assign qui obtient l'URL de la page (qui inclut naturellement le fichier index.html, puis le supprime pour correspondre aux jolies URL page.navigation.

Answer 3

Il s’agit peut-être d’une nouvelle fonctionnalité depuis l’apparition de la question, mais j’ai découvert que tout cela pouvait être fait dans un seul fichier:

1. définir la navigation en tant que variable dans l'en-tête yaml
2. boucle sur la variable en utilisant un liquide

Donc dans 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>
 

---

Ce qui génère ceci sur la page Home :

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

Et ceci sur la page Travel :

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

Answer 4

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

Dans ma matière antérieure, 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 5

De Navigation mettant en évidence la logique est la dernière chose que je ferais à côté serveur. Je préfère rester avec agréable, propre et discret, à l'aide JS/jQuery (si cette option fonctionne pour vous).

1. Les éléments qui doivent être mis en évidence au sein d'une commune de la mise en page comme ceci:

   <nav>
     <a id="section1" href="#">Section 1</a>
     <a id="section2" href="#">Section 2</a>
     <a id="section3" href="#">Section 3</a>
   </nav>
   

2. Dans votre page (ou même dans les mises en page) vous placez un élément avec data-ref="#section1" (en fait, toute sélecteur jQuery de travail).

3. Maintenant, comprennent les suivantes JS extrait de (montré que jQuery, mais aucun cadre ne) en <head>:

   $(function() {
     $("[data-ref]").each(function() {
       $($(this).attr("data-ref")).addClass("current");
     });
   });
   

Cette approche est bonne, car elle ne fait aucune hypothèse sur l'architecture sous-jacente, des cadres, des langues et des moteurs de template.

Mise à jour: Comme certains ont souligné que vous pourriez voulez omettre $(function() { ... }) de la partie qui lie le script à DOM prêt de l'événement - et il suffit de pousser le script vers le bas de votre <body>.