Sortiertes Navigationsmenü mit Jekyll und Liquid

Ich erstelle eine statische Site (kein Blog) mit Jekyll / Liquid. Ich möchte, dass es ein automatisch generiertes Navigationsmenü gibt, das alle vorhandenen Seiten auflistet und die aktuelle Seite hervorhebt. Die Elemente sollten in einer bestimmten Reihenfolge zum Menü hinzugefügt werden. Daher definiere ich eine weightEigenschaft in der YAML der Seiten:

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

Das Navigationsmenü ist wie folgt aufgebaut:

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

Dadurch werden Links zu allen vorhandenen Seiten erstellt, diese sind jedoch unsortiert. Der sortFilter scheint ignoriert zu werden. Natürlich mache ich etwas falsch, aber ich kann nicht herausfinden, was.

Seit Jekyll 2.2.0 können Sie ein Array von Objekten nach jeder Objekteigenschaft sortieren. Sie können jetzt tun:

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

Und sparen Sie viel Bauzeit im Vergleich zur @ kikito-Lösung.

Bearbeiten : Sie MÜSSEN Ihre Sortiereigenschaft als Ganzzahl weight: 10und nicht als Zeichenfolge zuweisen weight: "10".

Das Zuweisen von Sortiereigenschaften als Zeichenfolge führt zu einer Zeichenfolgensortierung wie "1, 10, 11, 2, 20, ...".

Ihre einzige Option scheint die Verwendung einer Doppelschleife zu sein.

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

Hässlich wie es ist, sollte es funktionieren. Wenn Sie auch Seiten ohne Gewicht haben, müssen Sie eine zusätzliche interne Schleife einfügen, die nur {% unless p.weight %}vor / nach der aktuellen internen Schleife ausgeführt wird .

Die folgende Lösung funktioniert auf Github (benötigt kein Plugin):

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

Das obige Snippet sortiert Seiten nach Dateinamen (das nameAttribut für das Seitenobjekt wird vom Dateinamen abgeleitet). Ich habe Dateien umbenannt, um meiner gewünschten Reihenfolge zu entsprechen : 00-index.md, 01-about.md- und presto! Seiten werden bestellt.

Ein Problem ist, dass diese Nummernpräfixe in den URLs landen, was für die meisten Seiten unangenehm aussieht und ein echtes Problem bei 00-index.html darstellt. Permalilnks zur Rettung:

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

PS Ich wollte schlau sein und benutzerdefinierte Attribute nur zum Sortieren hinzufügen. Leider sind benutzerdefinierte Attribute als Methoden für die Page-Klasse nicht verfügbar und können daher nicht zum Sortieren verwendet werden:

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

Ich habe ein einfaches Jekyll-Plugin geschrieben, um dieses Problem zu lösen:

1. Kopieren Sie sorted_for.rbvon https://gist.github.com/3765912 in das _pluginsUnterverzeichnis Ihres Jekyll-Projekts:

   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. Verwenden Sie tag sorted_foranstelle von forwith sort_by:propertyparameter, um nach der angegebenen Eigenschaft zu sortieren. Sie können auch reversedgenau wie das Original hinzufügen for.
3. Vergessen Sie nicht, ein anderes End-Tag zu verwenden endsorted_for.

In Ihrem Fall sieht die Verwendung folgendermaßen aus:

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

Die einfachste Lösung wäre, dem Dateinamen Ihrer Seiten einen Index wie diesen voranzustellen:

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

Die Seiten werden nach Dateinamen sortiert. Jetzt haben Sie jedoch hässliche URLs.

In Ihren Yaml-Front-Materie-Abschnitten können Sie die generierte URL überschreiben, indem Sie die Permalink-Variable festlegen.

Zum Beispiel:

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

Einfache Lösung:

Weisen Sie zuerst ein sortiertes Array zu site.pagesund führen Sie dann eine for-Schleife für das Array aus.

Ihr Code sieht folgendermaßen aus:

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

Dies funktioniert in meiner Navigationsleiste, _includedie einfach ist:

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

Ich habe das mit einem Generator gelöst. Der Generator iteriert über Seiten, ruft die Navigationsdaten ab, sortiert sie und schiebt sie zurück in die Site-Konfiguration. Von dort kann Liquid die Daten abrufen und anzeigen. Es kümmert sich auch darum, Gegenstände zu verstecken und anzuzeigen.

Betrachten Sie dieses Seitenfragment:

---
navigation:
  title: Page name
  weight: 100
  show: true
---
content.

Die Navigation wird mit diesem Liquid-Fragment gerendert:

{% for p in site.navigation %}
<li> 
    <a  {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">{{ p.navigation.title }}</a>
</li>
{% endfor %}

Fügen Sie den folgenden Code in eine Datei in Ihrem _plugins-Ordner ein:

module Jekyll

  class SiteNavigation < Jekyll::Generator
    safe true
    priority :lowest

    def generate(site)

        # First remove all invisible items (default: nil = show in nav)
        sorted = []
        site.pages.each do |page|
          sorted << page if page.data["navigation"]["show"] != false
        end

        # Then sort em according to weight
        sorted = sorted.sort{ |a,b| a.data["navigation"]["weight"] <=> b.data["navigation"]["weight"] } 

        # Debug info.
        puts "Sorted resulting navigation:  (use site.config['sorted_navigation']) "
        sorted.each do |p|
          puts p.inspect 
        end

        # Access this in Liquid using: site.navigation
        site.config["navigation"] = sorted
    end
  end
end

Ich habe eine ganze Weile damit verbracht, das herauszufinden, da ich für Jekyll und Ruby noch ziemlich neu bin. Es wäre also großartig, wenn jemand dies verbessern könnte.

Ich kann den folgenden Code erhalten, der mit Jekyll / Liquid übereinstimmt und mit Ihrer Anforderung mit Kategorie übereinstimmt:

• erstellt Links zu allen vorhandenen Seiten,
• sortiert nach Gewicht (funktioniert auch beim Sortieren nach Kategorien),
• Markieren Sie die aktuelle Seite.

Darüber zeigt es auch die Anzahl der Beiträge. Alles wird ohne Plug-In erledigt.

<ul class="topics">
{% capture tags %}
    {% for tag in site.categories %}
        {{ tag[0] }}
    {% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
    {% for tag in sortedtags %}
    <li class="topic-header"><b>{{ tag }} ({{ site.categories[tag] | size }} topics)</b>
        <ul class='subnavlist'>
        {% assign posts = site.categories[tag] | sort:"weight" %}
        {% for post in posts %}
            <li class='recipe {% if post.url == page.url %}active{% endif %}'>
            <a href="https://stackoverflow.com/{{ site.github.project_title }}{{ post.url }}">{{ post.title }}</a>
            </li>
        {% endfor %}
        </ul>
    </li>
    {% endfor %}
</ul>

Überprüfen Sie es auf unserer Netzwerkseite . Sie können auf einen Beitrag klicken, um die Navigation hervorzuheben, sowie auf einen bestimmten Link, um zur Quellseite zu gelangen, auf der deren Gewicht zugewiesen ist.

Wenn Sie versuchen, nach Gewicht und Tag zu sortieren und die Anzahl auf 10 zu beschränken, finden Sie hier den folgenden Code:

{% assign counter = '0' %}
{% assign pages = site.pages | sort: "weight"  %}
{% for page in pages %}
{% for tag in page.tags %}
{% if tag == "Getting Started" and counter < '9' %}
{% capture counter %}{{ counter | plus:'1' }}{% endcapture %}
<li><a href="{{ page.permalink | prepend: site.baseurl }}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %} 

Die obige Lösung von @kikito hat auch bei mir funktioniert. Ich habe nur ein paar Zeilen hinzugefügt, um Seiten ohne Gewicht aus der Navigation zu entfernen und Leerzeichen zu entfernen:

<nav>
  <ul>
    {% for weight in (1..5) %}
      {% unless p.weight %}
        {% for p in site.pages %}
          {% if p.weight == weight %}
            {% if p.url == page.url %}
              <li>{{ p.title }}</li>
            {% else %}
              <li><a href="{{ p.url }}" title="{{ p.title }}">{{ p.title }}</a></li>
            {% endif %}
          {% endif %}
        {% endfor %}
      {% endunless %}
    {% endfor %}
  </ul>
</nav>