My initial idea was.. This can be my homepage code (is it called liquid?)..
{% for post in site.posts limit:4 %}
after which I thought of putting a "More Posts" button which links to page2 and does the same limit with offsetting the first 4.. Like this:
{% for post in site.posts offset:4 limit:4 %}
From there "More Posts" button links to page3 with limit 4 and offset 8 and so on...
My Question is: 1> Is there a better way to do this in Jekyll? If not, 2> How many pages should I create? 3> Can I create pages without duplicating the whole content just for 1 line change? 4> Can I setup pages to Auto-create when posts increase? How?
Why not use Jekyll's own pagination feature?
Simply drop in these two lines in the _config.yml
file.
paginate: 4
paginate_path: "page:num"
The paginate_path allows you to specify the page you want to paginate. So if you have a page called blog which contains all your articles, maybe you'd like to have it paginated. To do that, set paginate_path: "blog/page:num"
. For default home page pagination leave it as "page:num"
. I have written a specific piece of code to help with the pagination navigation. To set up pagination in a page as you've specified in the paginate_path
, you've to specify something like this:
{% for post in paginator.posts %}
{{ post.title }}
{{ post.content | strip_html | truncatewords:40 }}
{% endfor %}
This will display the first paginated page. But you'll need a navigation bar, ie, <--newer posts...older posts--> button. I have written a liquid expression to this specifically. So right after the previous code block, put these code for the pagination navigation.
{% if paginator.total_pages != 1 %}
<div class="row text-center text-caps">
<div class="col-md-8 col-md-offset-2">
<nav class="pagination" role="pagination">
<span class="page-number">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if site.paginate_path != 'page:num'%}
{% assign paginate_url = site.paginate_path | remove:'/page:num' %}
{% if paginator.previous_page %}
{% if paginator.previous_page == 1 %}
<a class="newer-posts" href="{{ site.url }}/{{ paginate_url }}/" class="btn" title="Newer Posts">← Newer Posts</a>
{% else %}
<a class="newer-posts" href="{{ site.url }}/{{ paginate_url }}/page{{ paginator.previous_page }}/" class="btn" title="Newer Posts">← Newer Posts</a>
{% endif %}
{% endif %}
{% if paginator.next_page %}
<a class="older-posts" href="{{ site.url }}/{{ paginate_url }}/page{{ paginator.next_page }}/" class="btn" title="Older Posts">Older Posts →</a>
{% endif %}
{% else %}
{% if paginator.previous_page %}
{% if paginator.previous_page == 1 %}
<a class="newer-posts" href="{{ site.url }}/" class="btn" title="Newer Posts">← Newer Posts</a>
{% else %}
<a class="newer-posts" href="{{ site.url }}/page{{ paginator.previous_page }}/" class="btn" title="Newer Posts">← Newer Posts</a>
{% endif %}
{% endif %}
{% if paginator.next_page %}
<a class="older-posts" href="{{ site.url }}/page{{ paginator.next_page }}/" class="btn" title="Older Posts">Older Posts →</a>
</nav>
</div>
</div>
{% endif %}
{% endif %}
{% endif %}
This code will generate a navigation menu for paginated posts, which is intelligent and hides the buttons accordingly. For example, if you've 11 posts in total and you've opted for 4 pages in each paginated index, the first page will contain 4 posts, the second also 4 and the third 3. The first page needs to show only the Older posts -->
link, the second page will show both <--Newer posts...Older posts-->
links, the third will show only the <--Newer posts
link. But if your total posts is less than 4, this code will hide your pagination navigation until the post number becomes larger than 4.
幸运的是,Jekyll已经加入了(您已经在上面描述过的内容)。您可以通过查看Jekyll分页文档了解如何将其合并到您的网站中。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.