Jekyllでのページング機能の使用

多くのサイト(特にブログ)では、文章がますます多くなると、文章のリストをページ別に表示する必要があります.Jekyllはすでにページング機能を独自に構築しており、約束通りにファイルを置くだけでいいです.
ページング機能はHTMLファイルのみをサポートします
Jekyllのページング機能はMarkdownファイルやTextileファイルではなく、HTMLファイルのみをサポートします.もちろん、これはあなたを不快にさせません.

ページング機能の有効化

ページング機能を開くのは簡単です._config.ymlに1行追加し、各ページに何行か記入するだけです.

paginate: 5

下には、ページングページが必要な構成があります.

paginate_path: "blog/page:num"

blog/index.htmlはこの設定を読み取り、各ページングページに転送し、2ページからblog/page:numに出力し、:numはページ番号である.12の文章があり、paginate: 5の構成をしている場合、Jekyllは前の5つの文章をblog/index.htmlに書き込み、次の5つの文章をblog/page2/index.htmlに書き込み、最後の2つの文章をblog/page3/index.htmlに書き込む.

paginatorと同じプロパティ

ツールバーの
説明page
現在のページ番号per_page
1ページあたりの記事数posts
現在のページの記事リストtotal_posts
合計記事数total_pages
合計ページ数previous_page
前のページ番号またはnilprevious_page_path
前のパスまたはnilnext_page
次のページ番号またはnilnext_page_path
次のパスまたはnilラベルとカテゴリのページングはサポートされていません
ページング機能は、記事リストを巡回して結果を計算するだけで、YAMLヘッダ情報は読み込まれず、「ラベル」と「カテゴリ」のページングはサポートされていません.

ページング機能付き文書の生成

次にやるべきことはページに表示され、下には簡単な例があります.

--- layout: default title: My Blog --- <!--   --> {% for post in paginator.posts %} <h1><a href="{{ post.url }}">{{ post.title }}</a></h1> <p class="author"> <span class="date">{{ post.date }}</span> </p> <div class="content"> {{ post.content }} </div> {% endfor %} <!--   --> <div class="pagination"> {% if paginator.previous_page %} <a href="/page{{ paginator.previous_page }}" class="previous">Previous</a> {% else %} <span class="previous">Previous</span> {% endif %} <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span> {% if paginator.next_page %} <a href="/page{{ paginator.next_page }}" class="next">Next</a> {% else %} <span class="next ">Next</span> {% endif %} </div>

最初と最後のページに注意
Jekyllはフォルダ「page 1」を生成していないので、上のコードにバグがあり、下のコードがこの問題を解決しました.
下のHTMLクリップは最初のページで、彼は自分以外に、各ページにリンクを生成しました.

<div id="post-pagination" class="pagination"> {% if paginator.previous_page %} <p class="previous"> {% if paginator.previous_page == 1 %} <a href="/">Previous</a> {% else %} <a href="{{ paginator.previous_page_path }}">Previous</a> {% endif %} </p> {% else %} <p class="previous disabled"> <span>Previous</span> </p> {% endif %} <ul class="pages"> <li class="page"> {% if paginator.page == 1 %} <span class="current-page">1</span> {% else %} <a href="/">1</a> {% endif %} </li> {% for count in (2..paginator.total_pages) %} <li class="page"> {% if count == paginator.page %} <span class="current-page">{{ count }}</span> {% else %} <a href="/page{{ count }}">{{ count }}</a> {% endif %} </li> {% endfor %} </ul> {% if paginator.next_page %} <p class="next"> <a href="{{ paginator.next_page_path }}">Next</a> </p> {% else %} <p class="next disabled"> <span>Next</span> </p> {% endif %} </div>