繁体   English   中英

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

[英]How to implement “load more posts” from homepage using jekyll?

我最初的想法是..这可以是我的主页代码(它被称为液体吗?)..

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

之后我想到了一个“更多帖子”按钮链接到page2并做了相同的限制,抵消了前4个..像这样:

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

从那里“更多帖子”按钮链接到第3页,限制4和偏移8等等......

我的问题是:1>在杰基尔有更好的方法吗? 如果没有,2>我应该创建多少页? 3>我可以创建页面而不重复整个内容只需1行更改吗? 4>当帖子增加时,我可以将页面设置为自动创建吗? 怎么样?

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

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

paginate:    4
paginate_path: "page:num"

paginate_path允许您指定要分页的页面。 因此,如果您有一个名为博客的页面,其中包含您的所有文章,那么您可能希望将其分页。 为此,请设置paginate_path: "blog/page:num" 对于默认主页分页,请将其保留为"page:num" 我编写了一段特定的代码来帮助分页导航。 要像在paginate_path指定的那样在页面中设置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个帖子和第三个帖子。第一个页面只需显示Older posts -->帖子Older posts -->链接,第二页将显示<--Newer posts...Older posts-->链接,第三页将仅显示<--Newer posts链接。 但如果您的总帖子少于4,此代码将隐藏您的分页导航,直到帖子编号大于4。

幸运的是,Jekyll已经加入了(您已经在上面描述过的内容)。您可以通过查看Jekyll分页文档了解如何将其合并到您的网站中。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM