68 votos

Ordenados menú de navegación con Jekyll y Líquido

Estoy construyendo un sitio estático (no blog) con Jekyll/Líquido. Yo quiero tener una auto-generado menú de navegación que enumera todas las páginas existentes y poner de relieve la página actual. Los artículos deben ser añadido a la carta en un orden determinado. Por lo tanto, defino un weight de la propiedad en las páginas de' YAML:

---
layout : default
title  : Some title
weight : 5
---

El menú de navegación se construye como sigue:

<ul>
  {% for p in site.pages | sort:weight %}
    <li>
      <a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
        {{ p.title }}
      </a>
    </li>
  {% endfor %}
</ul>

Esto crea enlaces a todas las páginas, pero son sin clasificar, sort filtro parece ser ignorado. Obviamente, estoy haciendo algo mal, pero no puedo averiguar qué.

36voto

kikito Puntos 23229

Su única opción parece ser el uso de un doble bucle.

<ul>
{% for weight in (1..10) %}
  {% for p in site.pages %}
    {% if p.weight == weight %}
      <li>
        <a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
          {{ p.title }}
        </a>
      </li>
    {% endif %}
  {% endfor %}
{% endfor %}
</ul>

Fea como ella es, se debe trabajar. Si usted también tiene páginas sin un peso, usted tendrá que incluir un adicional de bucle interno sólo haciendo {% unless p.weight %} antes/después de la actual interna.

29voto

Wojtek Kruszewski Puntos 1659

A continuación la solución funciona en Github (no requiere de un plugin):

{% assign sorted_pages = site.pages | sort:"name" %}
{% for node in sorted_pages %}
  <li><a href="{{node.url}}">{{node.title}}</a></li>
{% endfor %}

Fragmento anterior tipo de páginas por nombre de archivo (name de atributo en la Página de objeto se deriva del nombre de archivo). He cambiado el nombre de los archivos para que coincida con mi orden deseado: 00-index.md, 01-about.md – y listo! Las páginas están ordenadas.

Uno de gotcha es que los número de prefijos que terminan en la Url, que se ve incómodo para la mayoría de las páginas y es un problema real en con 00-index.html. Permalilnks al rescate:

---
layout: default
title: News
permalink: "index.html"
---

P. S. yo quería ser inteligente y añadir atributos personalizados sólo para la clasificación. Por desgracia atributos personalizados no son accesibles a los métodos de la clase de la Página y por lo tanto no puede ser utilizado para la clasificación:

{% assign sorted_pages = site.pages | sort:"weight" %} #bummer

15voto

Jan Dupal Puntos 151

He escrito un simple Jekyll plugin para solucionar este problema:

  1. Copia sorted_for.rb de https://gist.github.com/3765912 a _plugins subdirectorio de su Jekyll proyecto:

    module Jekyll
      class SortedForTag < Liquid::For
        def render(context)
          sorted_collection = context[@collection_name].dup
          sorted_collection.sort_by! { |i| i.to_liquid[@attributes['sort_by']] }
    
          sorted_collection_name = "#{@collection_name}_sorted".sub('.', '_')
          context[sorted_collection_name] = sorted_collection
          @collection_name = sorted_collection_name
    
          super
        end
    
        def end_tag
          'endsorted_for'
        end
      end
    end
    
    Liquid::Template.register_tag('sorted_for', Jekyll::SortedForTag)
    
  2. El uso de la etiqueta sorted_for en lugar de for con sort_by:property parámetro para ordenar por una determinada propiedad. También puede agregar reversed al igual que el original for.
  3. No olvides usar diferentes extremo de la etiqueta endsorted_for.

En su caso, el uso de este aspecto:

<ul>
  {% sorted_for p in site.pages sort_by:weight %}
    <li>
      <a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
        {{ p.title }}
      </a>
    </li>
  {% endsorted_for %}
</ul>

10voto

Mark Meeus Puntos 275

La solución más simple sería el prefijo del nombre de archivo de sus páginas con un índice como este:

00-home.html 01-services.html 02-page3.html

Las páginas se puede ordenar por nombre de archivo. Sin embargo, ahora tendrás una url feas.

En su yaml frente a la materia secciones puede reemplazar la url generada por la configuración de la permalink variable.

Por ejemplo:

---
layout: default
permalink: index.html
---

10voto

sdmeyers Puntos 209

Fácil solución:

Asignar un conjunto ordenado de sitio.primeras páginas, a continuación, ejecute un bucle for en la matriz.

Por lo tanto el código se verá así:

{% assign links = site.pages | sort: 'weight' %}
{% for p in links %}
  <li>
    <a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
      {{ p.title }}
    </a>
  </li>
{% endfor %}

Esto funciona en mi navbar _include que es simplemente:

<section id="navbar">
    <nav>
        {% assign tabs = site.pages | sort: 'weight' %}
        {% for p in tabs %}
            <span class="navitem"><a href="{{ p.url }}">{{ p.title }}</a></span>
        {% endfor %}
    </nav>
</section>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X