[英]How to implement “load more posts” from homepage using jekyll?
My initial idea was.. This can be my homepage code (is it called liquid?).. 我最初的想法是..这可以是我的主页代码(它被称为液体吗?)..
{% for post in site.posts limit:4 %}
after which I thought of putting a "More Posts" button which links to page2 and does the same limit with offsetting the first 4.. Like this: 之后我想到了一个“更多帖子”按钮链接到page2并做了相同的限制,抵消了前4个..像这样:
{% for post in site.posts offset:4 limit:4 %}
From there "More Posts" button links to page3 with limit 4 and offset 8 and so on... 从那里“更多帖子”按钮链接到第3页,限制4和偏移8等等......
My Question is: 1> Is there a better way to do this in Jekyll? 我的问题是:1>在杰基尔有更好的方法吗? If not, 2> How many pages should I create? 如果没有,2>我应该创建多少页? 3> Can I create pages without duplicating the whole content just for 1 line change? 3>我可以创建页面而不重复整个内容只需1行更改吗? 4> Can I setup pages to Auto-create when posts increase? 4>当帖子增加时,我可以将页面设置为自动创建吗? How? 怎么样?
Why not use Jekyll's own pagination feature? 为什么不使用Jekyll自己的分页功能?
Simply drop in these two lines in the _config.yml
file. 只需将这两行放在_config.yml
文件中即可。
paginate: 4
paginate_path: "page:num"
The paginate_path allows you to specify the page you want to paginate. paginate_path允许您指定要分页的页面。 So if you have a page called blog which contains all your articles, maybe you'd like to have it paginated. 因此,如果您有一个名为博客的页面,其中包含您的所有文章,那么您可能希望将其分页。 To do that, set paginate_path: "blog/page:num"
. 为此,请设置paginate_path: "blog/page:num"
。 For default home page pagination leave it as "page:num"
. 对于默认主页分页,请将其保留为"page:num"
。 I have written a specific piece of code to help with the pagination navigation. 我编写了一段特定的代码来帮助分页导航。 To set up pagination in a page as you've specified in the paginate_path
, you've to specify something like this: 要像在paginate_path
指定的那样在页面中设置paginate_path
,您需要指定以下内容:
{% for post in paginator.posts %}
{{ post.title }}
{{ post.content | strip_html | truncatewords:40 }}
{% endfor %}
This will display the first paginated page. 这将显示第一个分页页面。 But you'll need a navigation bar, ie, <--newer posts...older posts--> button. 但是你需要一个导航栏,即< - 较新的帖子...较旧的帖子 - >按钮。 I have written a liquid expression to this specifically. 我特意写了一个流畅的表达方式。 So right after the previous code block, put these code for the pagination navigation. 因此,在上一个代码块之后,将这些代码放在分页导航中。
{% 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">← Newer Posts</a>
{% else %}
<a class="newer-posts" href="{{ site.url }}/{{ paginate_url }}/page{{ paginator.previous_page }}/" class="btn" title="Newer Posts">← 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 →</a>
{% endif %}
{% else %}
{% if paginator.previous_page %}
{% if paginator.previous_page == 1 %}
<a class="newer-posts" href="{{ site.url }}/" class="btn" title="Newer Posts">← Newer Posts</a>
{% else %}
<a class="newer-posts" href="{{ site.url }}/page{{ paginator.previous_page }}/" class="btn" title="Newer Posts">← 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 →</a>
</nav>
</div>
</div>
{% endif %}
{% endif %}
{% endif %}
This code will generate a navigation menu for paginated posts, which is intelligent and hides the buttons accordingly. 此代码将生成分页帖子的导航菜单,该菜单是智能的并相应地隐藏按钮。 For example, if you've 11 posts in total and you've opted for 4 pages in each paginated index, the first page will contain 4 posts, the second also 4 and the third 3. The first page needs to show only the Older posts -->
link, the second page will show both <--Newer posts...Older posts-->
links, the third will show only the <--Newer posts
link. 例如,如果您总共有11个帖子并且您在每个分页索引中选择了4个页面,则第一个页面将包含4个帖子,第二个页面还包含4个帖子和第三个帖子。第一个页面只需显示Older posts -->
帖子Older posts -->
链接,第二页将显示<--Newer posts...Older posts-->
链接,第三页将仅显示<--Newer posts
链接。 But if your total posts is less than 4, this code will hide your pagination navigation until the post number becomes larger than 4. 但如果您的总帖子少于4,此代码将隐藏您的分页导航,直到帖子编号大于4。
幸运的是,Jekyll已经加入了(您已经在上面描述过的内容)。您可以通过查看Jekyll分页文档了解如何将其合并到您的网站中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.