如何在Hexo中创建分页系统

时间:2015-11-04 18:58:01

标签: node.js hexo

我喜欢使用Hexo .. :)

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

使用JSONObject jsonObject=new JSONObject(<response_string>); // get images JSONArray from jsonObject JSONArray jsonArrImages=jsonObject.getJSONArray("images"); for(int index=0;index<jsonArrImages.length(); index++) { JSONObject jsonObjectInner=jsonArrImages.getJSONObject(index); String img_url=jsonObjectInner.optString("image_url")+"/" +jsonObjectInner.optString("image_filename"); // download image from url downloadFile(img_url,jsonObjectInner.optString("image_filename")); } 让我发布所有帖子而不分页。

如何将所有帖子从页面分页?

感谢。

1 个答案:

答案 0 :(得分:2)

在主要配置文件_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 documentation