如何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 documentation

Answer 2

这是一个迟到的反应，但我觉得有一个简单的答案与当前的hexo库分页。他们应该使用默认的初始化。

看看hexo-generator-index，它使用 hexo-pagination生成一个页面数组。

这些页面中的每一个都将包含这些页面的posts。您的网页还将获得.prev和.next属性，其中包括通过hexo-pagination运行的其他内容。页面也会自动发送到渲染器。你只需要与

npm install hexo-generator-index

HEXO自动查找安装该模块与hexo-*和require S于初始化这些模块开始包。请注意代码中的config.index_generator.path。您可以用hexo init a-blog初始化您_config.yml默认指定的博客现在提供了下列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 

这些职位将在你的模板访问。只需使用page.posts。你看看layout: ['index', 'archive']出现在哪一行？这意味着index.ejs将用作页面的模板。如果找不到index.ejs，则使用archive.ejs作为备份。默认项目将有一个index.ejs作为部分，themes/layouts/_partial/archive.ejs文件。下面是来自_partial/archive.ejs文件的示例，访问页的文章：

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

一个提示虽然，page.posts不是数组。它实际上是一个包装数组（一个Query对象是确切的;查找仓库，如果你感兴趣的话，数据库后端为hexo）。这就是为什么page.posts.each是可能的，其中原生javascript每个函数是Array.prototype.forEach。

在同一个文件，你还可以找到

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

参考the paginator helper和the source code。基本上，它是一个函数，它接受一个javascript对象并写入一个编码<a>标签的字符串。你也可以注册你自己的帮手，并以任何你喜欢的方式分页。

返回索引生成器。请注意，无论您用于path字段，您将在该路径中获得为您生成的index.html文件。因此，如果您输入path: cats，您将能够访问它yoursite.com/cats/，因为在生成您的公用文件夹后，将在cats/index.html中存在一个index.html文件。第二页，如果您没有提供config.pagination_dir（或只是您的_config.yml中的pagination_dir），可以访问yoursite.com/cats/page/2/。

hexo-generate-index将索引您的所有帖子。还有其他模块用于索引帖子，并为标签和类别进行分页。看看plugins并输入“generat”。