63

私のブログは、Github の Jekyll で構築されています。ナビゲーション バーのデフォルトの順序は、ページ、メッセージ、概要、アーカイブです。リストをページ、アーカイブ、概要、メッセージに変更したい。私は何をすべきか？

以下のコードに関連していると思います

{% assign pages_list = site.pages %}

私site.pagesは何を変更すべきかを考えていますが、どうすればよいかわかりません。

4

10 に答える 10

143

次のように、メニュー項目のカスタム オーダーを作成できます。

  1. ページの front matter に order フィールドを追加します (好きな名前を付けることができます)。 
    ---
layout: default
published: true
title: Page title
order: 1
---
  2. ページを取得するときは、「並べ替え」フィルターを適用します 
    {% assign sorted_pages = site.pages | sort:"order" %}
{% for node in sorted_pages %}
  <li><a href="{{node.url}}">{{node.title}}</a></li>
{% endfor %}

各ページに追加する「順序」フィールドの値に基づいて、ページの順序付けされた (ASC) リストが作成されます。

于 2015-11-29T14:37:09.320 に答える
21

ナビゲーション バー メニューの順序は、 の HTML テンプレートによって決まります_layout( _includes.

液体コードを使用して、site.pages で提供されるページのリストから、ナビゲーション バーがプログラムで生成されているようです。

{% assign pages_list = site.pages %}

ページ数が少ない場合は、リストを手動で書き出すことをお勧めします。 site.pagesJekyll の全ページのアルファベット順リストです。代わりにこれをハードコーディングすることを止めるものは何もありません:

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

現時点では、おそらくJekyll-bootstrapがリキッドコードで行う方法に従って、そのリストをプログラムで生成していると思います。

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

この 2 番目の例の液体コードは、メニューを毎回決定したい場合に便利ですが、静的な順序の静的メニューがある場合は、液体を変更するよりも、最初の例のように手動でコーディングするのがおそらく最善です。ソートするコード。

公開されたブログではなく、Jekyll のソースにリンクしていただけると、より具体的になる可能性があります。

于 2012-11-08T20:25:13.773 に答える
9

私は Jekyll v2.5.3 を使用しており、実際のマークダウン ファイルに番号を付けることもできます (そのように並べ替えます)。Front Matter ブロックを使用しているため、タイトルとパーマリンクを必要に応じて保持できます。

パーサーはページ リンクをそのように並べます。
すなわち:

01_about.md
02_photos.md
03_projects.md
99_contact.md
于 2015-08-19T09:06:22.980 に答える
8

_data ディレクトリに pages.yml ファイルを作成しましたが、似ています。

- url: pages/test.html
  title: Pages
  group: navigation
- url: pages/front.html
  title: Front
  group: navigation

そして、default.html を (site.pages から site.data.pages に) 変更しました。

<ul class="nav">
  {% assign pages_list = site.data.pages %}
  {% assign group = 'navigation' %}
  {% include JB/pages_list %}
</ul>

これで、この yml ファイルをメニューに使用できます。

于 2015-01-24T15:25:57.680 に答える
0

少し前に、定義できる配列に従ってページをソートする簡単なプラグインを作成しました。page_order_config.yml

pages_order: ['index', 'summary', 'overview', 'part1', 'part2', 'conclusion', 'notes']

ナビゲーションを可能にするテンプレートでpage.prevとを公開します。page.next

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

注: Github ページでは機能しません。

于 2016-05-03T08:37:02.647 に答える