How to create a pagination system in Hexo

Question

I love using Hexo.. :)

I've setup custom page. Is it possible to show all post in my page as paginated?

Using site.posts got me all post without pagination.

What should I do to get all post as paginated from page?

Thanks.

Answer 1

In the main configuration file _config.yml, there is a per_page variable to allow you to choose how many post you want ot display per page.

Create a template, index.ejs for example :

<% page.posts.each(function(post) { %>
    <article>
    // do what you have to do to display each post 
    </article>
<% }) %>
<%- partial('pagination', {type: 'page'}) %>

As you can see, We use the page variable to get 7 posts. After that, create an other template pagination.ejs, that allow you to navigate through the page :

<div class="pagination-bar">
    <ul class="pagination">
        <% if (page.prev) { %>
        <li class="pagination-prev">
            <% if (page.prev === 1) { %>
                <a class="btn btn--default btn--small" href="<%- url_for(' ') %>">
            <% } else { %>
                <a class="btn btn--default btn--small" href="<%- url_for(page.prev_link) %>">
            <% } %>
                <i class="fa fa-angle-left text-base icon-mr"></i>
                    <span><%= __('pagination.newer_posts') %></span>
            </a>
        </li>
        <% } %>
        <% if (page.next) { %>
        <li class="pagination-next">
            <a class="btn btn--default btn--small" href="<%- url_for(page.next_link) %>">
                    <span><%= __('pagination.older_posts') %></span>
                <i class="fa fa-angle-right text-base icon-ml"></i>
            </a>
        </li>
        <% } %>
        <li class="pagination-number"><%= _p('pagination.page', page.current) + ' ' + _p('pagination.of', page.total) %></li>
    </ul>
</div>

I wrote a Hexo theme : Tranquilpeak, I recommend you to check the source code to understand how I built it and of course read the official Hexo documentation