How to implement "load more posts" from homepage using jekyll?

Question

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?

Answer 1

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">&larr; Newer Posts</a>
  {% else %}
 <a class="newer-posts" href="{{ site.url }}/{{ paginate_url }}/page{{ paginator.previous_page }}/" class="btn" title="Newer Posts">&larr; 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 &rarr;</a>
{% endif %} 
{% else %}
{% if paginator.previous_page %}
  {% if paginator.previous_page == 1 %}
  <a class="newer-posts" href="{{ site.url }}/" class="btn" title="Newer Posts">&larr; Newer Posts</a>
  {% else %}
 <a class="newer-posts" href="{{ site.url }}/page{{ paginator.previous_page }}/" class="btn" title="Newer Posts">&larr; 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 &rarr;</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.