How to create a pagination system in Hexo

Question

I like to use Hexo .. :)

I have a custom page. Can I show all posts on my page paginated?

Using site.posts , I received all the posts without pagination.

What should I do to receive all messages as pages from a page?

Thanks.

Answer 1

The _config.yml main configuration file has a _config.yml variable that lets you choose how many posts you want to display on the 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 receive 7 posts. After that, create another pagination.ejs template that will allow you to navigate 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 the Hexo: Tranquilpeak topic, I recommend that you check the source code to understand how I built it, and, of course, read the official Hexo documentation

Answer 2

This is a late answer, but I feel that there is a simple pagination answer with current hexo libraries. However, they must have default initialization.

Take a look at hexo-generator-index , it uses hexo-pagination to create an array of pages.

Each of these pages will contain posts for these pages. Your pages will also receive .prev and .next , among other things, through hexo-pagination . Pages will also be automatically sent to the renderer. You only need to install this module with

npm install hexo-generator-index

Hexo automatically looks for packages starting with hexo-* and require these modules during initialization. Pay attention to config.index_generator.path in the code. You can specify in the _config.yml default blogs initialized with hexo init a-blog , now type the following yaml

 # Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) index_generator: path: '' per_page: 10 order_by: -date 

These messages will be available in your templates. Just use page.posts . Have you looked at the line where layout: ['index', 'archive'] appears layout: ['index', 'archive'] ? This means that index.ejs will be used as a template for your pages. If it cannot find index.ejs , archive.ejs used as a backup. The project will default to index.ejs , which calls themes/layouts/_partial/archive.ejs as a partial file. Here is a sample from the _partial / archive.ejs file, accessing the page messages:

 <% page.posts.each(function(post){ %> <%- partial('article', {post: post, index: true}) %> <% }) %> 

One tip, however, page.posts not an array. This is actually a wrapped array (a query object, to be precise, a search warehouse, a database for hexo, if you're interested). This is why it is possible to use page.posts.each , where each javascript function has an Array.prototype.forEach value.

In the same file you will also find

 <% if (page.total > 1){ %> <nav id="page-nav"> <% var prev_text = "&laquo; " + __('prev');var next_text = __('next') + " &raquo;"%> <%- paginator({ prev_text: prev_text, next_text: next_text }) %> </nav> <% } %> 

See the paginator helper and source code . Basically, this is a function that takes a javascript object and writes a string that encodes <a> tags. You can also register your own helper and paginate as you like.

Return to index generator. Note that whatever you use for the path field, you will get the index.html file generated for you in that path. Therefore, if you enter path: cats , you can visit it at yoursite.com/cats/ , because after creating a shared folder, the cats/index.html file will exist in the cats/index.html file. Page 2, if you are not supplying anything for config.pagination_dir (or just pagination_dir in your _config.yml ), you can visit yoursite.com/cats/page/2/ .

hexo-generate-index will index all your posts. There are other modules for indexing posts and will be paginated for tags and categories. Look at the plugins and type "generat".