如何在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 官方文档