Mon blog est construit avec Jekyll sur Github. Dans la barre de navigation, l'ordre par défaut est Pages, Messages, À propos de, Archives. Je souhaite modifier la liste en Pages, Archives, À propos de, Messages. Que devrais-je faire?
Je pense que c'est lié au code ci-dessous
{% assign pages_list = site.pages %}
Je pense que site.pages
est ce que je devrais changer, mais je ne sais pas comment.
L'ordre du menu de votre barre de navigation est déterminé par le modèle HTML dans _layout
(qui peut extraire des fragments HTML à partir de _includes
.
Il semble que votre barre de navigation est générée par programme à partir de la liste des pages fournie dans site.pages à l’aide du code liquide.
{% assign pages_list = site.pages %}
Si vous ne disposez que d'un petit nombre de pages, vous préférerez peut-être simplement écrire la liste manuellement. site.pages
est la liste alphabétique de toutes les pages de Jekyll. Rien ne vous empêche simplement de coder en dur ceci:
<div class="navbar" id="page-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">EverCoding.net</a>
<ul class="nav">
<li><a href="/pages.html">Pages</a></li>
<li><a href="/archive.html">Archive</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/messages.html">Messages</a></li>
Alors que je devine au moment où vous avez cette liste générée par programme, peut-être en suivant la façon dont Jekyll-bootstrap le fait avec du code liquide:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="{{ HOME_PATH }}">{{ site.title }}</a>
<ul class="nav">
{% assign pages_list = site.pages %}
{% assign group = 'navigation' %}
{% include JB/pages_list %}
</ul>
</div>
</div>
</div>
Le code de liquide dans ce deuxième exemple est pratique si vous voulez vraiment déterminer le menu à chaque fois, mais si vous avez un menu statique dans un ordre statique, il est probablement préférable de le coder à la main, comme dans mon premier exemple, plutôt que de modifier le liquide. code à trier.
Si vous pouviez créer un lien vers la source Jekyll, plutôt que vers le blog publié, nous pourrions être plus spécifiques.
Vous pouvez créer un ordre personnalisé de vos éléments de menu comme ceci:
1) Dans vos pages, ajoutez le champ de commande (vous pouvez le nommer comme vous préférez)
---
layout: default
published: true
title: Page title
order: 1
---
2) Lorsque vous obtenez des pages, appliquez le filtre 'trier'
{% assign sorted_pages = site.pages | sort:"order" %}
{% for node in sorted_pages %}
<li><a href="{{node.url}}">{{node.title}}</a></li>
{% endfor %}
Vous obtiendrez une liste de pages (ASC) ordonnée, basée sur la valeur du champ "commande" que vous ajoutez à chaque page.
Mise à jour: certaines fonctionnalités de commande semblent avoir été ajoutées à Jekyll: https://github.com/plusjade/jekyll-bootstrap/commit/4eebb4462c24de612612d6f4794b1aaaa8ddf4
Mise à jour: consultez le commentaire de Andy Jackson ci-dessous - "nom" devra peut-être être remplacé par "chemin".
Cela semble fonctionner pour moi:
{% assign sorted_pages = site.pages | sort:"name" %}
{% for node in sorted_pages %}
<li><a href="{{node.url}}">{{node.title}}</a></li>
{% endfor %}
name
est le nom du fichier. J'ai renommé les pages en 00-index.md
, 01-about.md
, etc. Le tri a fonctionné, mais les pages ont été générées avec ces préfixes, ce qui était particulièrement laid pour 00-index.html.
Pour résoudre ce problème, je remplace les permaliens:
---
layout: default
title: News
permalink: "index.html"
---
Malheureusement, cela ne fonctionnera pas avec les attributs personnalisés, car ils ne sont pas accessibles en tant que méthodes sur la classe Page:
{% assign sorted_pages = site.pages | sort:"weight" %} #bummer
J'ai créé le fichier pages.yml dans le répertoire _data qui ressemble à ceci:
- url: pages/test.html
title: Pages
group: navigation
- url: pages/front.html
title: Front
group: navigation
Et j'ai changé le default.html (de site.pages à site.data.pages):
<ul class="nav">
{% assign pages_list = site.data.pages %}
{% assign group = 'navigation' %}
{% include JB/pages_list %}
</ul>
Et maintenant je peux utiliser ce fichier yml pour le menu.
Vous pouvez voir la documentation: http://jekyll.tips/jekyll-casts/navigation/
Il existe de bons exemples et explications avec navigation_weight.
---
layout: page
title: About
permalink: /about/
navigation_weight: 10
---
Pour les minima:
<div>
{% assign navigation_pages = site.pages | sort: 'navigation_weight' %}
{% for p in navigation_pages %}
{% if p.navigation_weight %}
{% if p.title %}
<a class="page-link" href="{{ p.url | relative_url }}">{{ p.title | escape }}</a>
{% endif %}
{% endif %}
{% endfor %}
</div>
Tu étais sur le bon chemin. Vous pouvez trier une variable personnalisée nommée, par exemple, 'ordre'.
Dans header.html, insérer une ligne supplémentaire:
{% assign pages_list = (site.pages | sort: 'order') %}
Puis remplacez site.pages par Pages_list dans l'instruction for:
{% for my_page in pages_list %}
{% if my_page.title %}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{% endif %}
{% endfor %}
Ajoutez ensuite 'commande' à l’avant-plan YAML pour chaque page et attribuez-lui une valeur appropriée:
---
layout: page
title: About
permalink: /about/
order: 0
---
J'utilise Jekyll v2.5.3 et vous pouvez également numéroter vos fichiers de démarques réels (dans l'ordre), et comme vous utilisez le bloc Front Matter, vous pouvez toujours conserver les titres et les permaliens que vous le souhaitez.
L'analyseur ordonnera vos liens de page de cette façon.
C'est à dire.:
01_about.md
02_photos.md
03_projects.md
99_contact.md
Le Jekyll Bootstrap 3 template nécessite que vous incluiez group navigation
dans l'en-tête de Jekyll. En vous appuyant sur la réponse de @ Wojtek, vous pouvez modifier la liste de pages de JB3 pour utiliser ce champ group
à la fois pour le filtrage et le tri.
Avant d'appeler pages_list, triez par groupe:
{% assign sorted_pages = site.pages | sort:"group" %}
Ensuite, changez simplement une ligne dans pages_list:
{% if group == null or group == node.group %}
-> {% if group == null or node.group contains group %}
Maintenant, vous pouvez spécifier le groupe comme étant navigation-00
, navigation-01
, sans avoir à renommer vos fichiers ni à configurer de liens permanents, et vous obtenez un tri gratuit.
J'ai créé un simple plugin il y a quelque temps pour trier les pages selon un tableau page_order
, vous pouvez définir votre _config.yml
:
pages_order: ['index', 'summary', 'overview', 'part1', 'part2', 'conclusion', 'notes']
Il expose page.prev
et page.next
dans les modèles pour permettre la navigation:
{% if page.prev %}
<a id="previous-page" href="{{page.prev}}.html">Previous</a>
{% endif %}
{% if page.next %}
<a id="next-page" href="{{page.next}}.html">Next</a>
{% endif %}
Remarque: Ne fonctionne pas sur les pages Github.