Html Jekyll中的增量循环计数器
所以我试图创建一个页面,在开始时只显示前10篇文章 这样做很简单:Html Jekyll中的增量循环计数器,html,templates,jekyll,liquid,Html,Templates,Jekyll,Liquid,所以我试图创建一个页面,在开始时只显示前10篇文章 这样做很简单: <ul> {% for post in site.posts limit:10 %} <li>//show post</li> {% endfor %} </ul> 这仍然很糟糕,因为我必须为每十篇文章写一个循环,所以这很糟糕。所以基本上我必须创建一个循环,每10篇文章创建10篇文章。归根结底,我怎么能每次在偏移量上加10呢?我必须使用一个变量,但我不确定这里的语法是如何
<ul>
{% for post in site.posts limit:10 %}
<li>//show post</li>
{% endfor %}
</ul>
这仍然很糟糕,因为我必须为每十篇文章写一个循环,所以这很糟糕。所以基本上我必须创建一个循环,每10篇文章创建10篇文章。归根结底,我怎么能每次在偏移量上加10呢?我必须使用一个变量,但我不确定这里的语法是如何工作的
下面是我想要的html呈现:
<div id="first-ten">
// ten posts
</div>
<div id="see-more-1">
// ten posts
</div>
<div id="see-more-2">
// ten posts
</div>
<div id="see-more-3">
// last six posts for instance
</div>
//十个职位
//十个职位
//十个职位
//例如,最后六个职位
我同意使用液体是一种奇怪的方法,但只是为了证明它是可以做到的:
---
---
{% comment %}Constant, can assign in _config.yml or YAML front matter if desired{% endcomment %}
{% assign postsPerPage = 2 %}
{% assign numPages = site.posts | size | divided_by: postsPerPage %}
{% comment %}Sketchy ceiling function since Liquid does integer division{% endcomment %}
{% if site.posts.size | modulo: postsPerPage > 0 %}
{% assign numPages = numPages | plus: 1 %}
{% endif %}
Total pages: {{ numPages }}<br><br>
{% assign endIndex = numPages | minus: 1 %}
{% comment %}Output section{% endcomment %}
{% for pageNum in (0..endIndex) %}
{% assign offset = pageNum | times: postsPerPage %}
<div id="see-more-{{ pageNum }}" style="border-style: inset;">
Page {{ pageNum }}:<br>
<ol>
{% assign posts = site.posts | sort: 'title' %}
{% for post in posts limit: postsPerPage offset: offset %}
<li>{{ post.title }}</li>
{% endfor %}
</ol>
</div>
{% endfor %}
---
---
{%comment%}常量,如果需要,可以在_config.yml或YAML front matter中分配{%endcomment%}
{%assign postsPerPage=2%}
{%assign numPages=site.posts | size |除以:postsPerPage%}
{%comment%}由于Liquid进行整数除法,因此天花板函数略显粗糙{%endcomment%}
{%if site.posts.size |模:postsPerPage>0%}
{%assign numPages=numPages | plus:1%}
{%endif%}
总页数:{{numPages}
{%assign endIndex=numPages |减:1%}
{%comment%}输出节{%endcomment%}
{(0..endIndex)%中的pageNum为%1}
{%assign offset=pageNum |次:postsPerPage%}
第{pageNum}}页:
{%assign posts=site.posts | sort:'title%}
{post in posts limit:postsPerPage offset:offset%}
{{post.title}}
{%endfor%}
{%endfor%}
我已经用1-11篇文章测试了上面的页面。我试着写得尽可能通俗易懂,因此可能有办法减少变量/计算量。奇怪的想法。您将加载所有内容、隐藏帖子并强制用户单击以阅读已加载的内容?有什么好处?为什么不呢?它只是发布摘录,不会占用很多空间。好处是用户可以继续阅读文章摘要,而无需更改页面,也无需阅读很长的垂直页面。想想instagram是如何工作的,但是有一个静态architecture@topleft:在一个列表中加载所有摘录一次,每个摘录在其自己的列表项中,并通过CSS对第11个元素隐藏它们。因此,通过javascriptwell十个十个地向他们展示这不是一个坏主意,事实上,我可能会这么做。我还认为我可以使用JekyllPaginator创建包含我的帖子的不同html页面,然后通过ajax调用html页面。这有利于加载较轻的索引
---
---
{% comment %}Constant, can assign in _config.yml or YAML front matter if desired{% endcomment %}
{% assign postsPerPage = 2 %}
{% assign numPages = site.posts | size | divided_by: postsPerPage %}
{% comment %}Sketchy ceiling function since Liquid does integer division{% endcomment %}
{% if site.posts.size | modulo: postsPerPage > 0 %}
{% assign numPages = numPages | plus: 1 %}
{% endif %}
Total pages: {{ numPages }}<br><br>
{% assign endIndex = numPages | minus: 1 %}
{% comment %}Output section{% endcomment %}
{% for pageNum in (0..endIndex) %}
{% assign offset = pageNum | times: postsPerPage %}
<div id="see-more-{{ pageNum }}" style="border-style: inset;">
Page {{ pageNum }}:<br>
<ol>
{% assign posts = site.posts | sort: 'title' %}
{% for post in posts limit: postsPerPage offset: offset %}
<li>{{ post.title }}</li>
{% endfor %}
</ol>
</div>
{% endfor %}