node.js - 如何在 Hexo 中创建分页系统

Question

我喜欢使用 Hexo .. :)

我已经设置了自定义页面。是否可以将我页面中的所有帖子显示为分页？

使用site.posts让我所有帖子都没有分页。

我应该怎么做才能让所有帖子从页面分页？

谢谢。

Answer 1

在主配置文件_config.yml中，有一个per_page变量允许您选择每页显示多少帖子。

创建一个模板，index.ejs例如：

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

如您所见，我们使用该page变量获得 7 个帖子。之后，创建另一个模板pagination.ejs，允许您浏览页面：

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

我写了一个 Hexo 主题：Tranquilpeak，我建议你查看源代码以了解我是如何构建它的，当然还要阅读官方Hexo 文档