如何使用 jekyll 从主页实现“加载更多帖子”？答案

【问题标题】：How to implement "load more posts" from homepage using jekyll?如何使用 jekyll 从主页实现“加载更多帖子”？
【发布时间】：2014-01-09 17:24:52
【问题描述】：

我最初的想法是..这可以是我的主页代码（是不是叫液体？）..

{% for post in site.posts limit:4 %}

之后我想放置一个“更多帖子”按钮，该按钮链接到第 2 页，并在抵消前 4 个时执行相同的限制。像这样：

{% for post in site.posts offset:4 limit:4 %}

从那里“更多帖子”按钮链接到 page3，限制为 4，偏移量为 8，依此类推...

我的问题是： 1> 在 Jekyll 中有没有更好的方法来做到这一点？如果不， 2> 我应该创建多少页？ 3> 我可以在不复制整个内容的情况下创建页面，只需更改 1 行吗？ 4> 我可以将页面设置为帖子增加时自动创建吗？怎么样？

【问题讨论】：

标签： html css jekyll liquid

【解决方案1】：

为什么不使用 Jekyll 自己的分页功能呢？

只需将这两行放入_config.yml 文件中即可。

paginate:    4
paginate_path: "page:num"

paginate_path 允许您指定要分页的页面。因此，如果您有一个名为 blog 的页面，其中包含您的所有文章，那么您可能希望对其进行分页。为此，请设置paginate_path: "blog/page:num"。对于默认主页分页，请将其保留为 "page:num"。我已经编写了一段特定的代码来帮助进行分页导航。要按照您在 paginate_path 中指定的方式在页面中设置分页，您必须指定如下内容：

{% for post in paginator.posts %} 
{{ post.title }}
{{ post.content | strip_html | truncatewords:40 }}
{% endfor %}

这将显示第一个分页页面。但是您需要一个导航栏，即按钮。我专门为此写了一个流畅的表达式。所以就在前面的代码块之后，把这些代码用于分页导航。

{% if paginator.total_pages != 1 %}  
    <div class="row text-center text-caps">
        <div class="col-md-8 col-md-offset-2">
            <nav class="pagination" role="pagination">

<span class="page-number">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if site.paginate_path != 'page:num'%}
{% assign paginate_url = site.paginate_path | remove:'/page:num' %}
{% if paginator.previous_page %}
  {% if paginator.previous_page == 1 %}
  <a class="newer-posts" href="{{ site.url }}/{{ paginate_url }}/" class="btn" title="Newer Posts">&larr; Newer Posts</a>
  {% else %}
 <a class="newer-posts" href="{{ site.url }}/{{ paginate_url }}/page{{ paginator.previous_page }}/" class="btn" title="Newer Posts">&larr; Newer Posts</a>
  {% endif %}
{% endif %}
{% if paginator.next_page %} 
<a class="older-posts" href="{{ site.url }}/{{ paginate_url }}/page{{ paginator.next_page }}/" class="btn" title="Older Posts">Older Posts &rarr;</a>
{% endif %} 
{% else %}
{% if paginator.previous_page %}
  {% if paginator.previous_page == 1 %}
  <a class="newer-posts" href="{{ site.url }}/" class="btn" title="Newer Posts">&larr; Newer Posts</a>
  {% else %}
 <a class="newer-posts" href="{{ site.url }}/page{{ paginator.previous_page }}/" class="btn" title="Newer Posts">&larr; Newer Posts</a>
  {% endif %}
{% endif %}
{% if paginator.next_page %} 
<a class="older-posts" href="{{ site.url }}/page{{ paginator.next_page }}/" class="btn" title="Older Posts">Older Posts &rarr;</a>
            </nav>
        </div>
    </div>
{% endif %}
{% endif %}
{% endif %}

此代码将为分页帖子生成一个导航菜单，它是智能的并相应地隐藏按钮。例如，如果您总共有 11 个帖子，并且您在每个分页索引中选择了 4 个页面，那么第一页将包含 4 个帖子，第二个也是 4 个，第三个是 3 个。第一页只需要显示 @ 987654328@ 链接，第二页将同时显示<--Newer posts...Older posts--> 链接，第三页将仅显示<--Newer posts 链接。但如果您的帖子总数少于 4，此代码将隐藏您的分页导航，直到帖子数大于 4。

【讨论】：

【解决方案2】：

幸运的是，Jekyll 已经融入了分页功能（即您在上面描述的内容）。您可以通过查看 Jekyll pagination documentation 了解如何将其合并到您的网站中。

【讨论】：