Jekyll 中的递增循环计数器答案

【问题标题】：Increment loop counter in JekyllJekyll 中的递增循环计数器
【发布时间】：2015-07-20 18:32:39
【问题描述】：

所以我正在尝试创建一个页面，一开始只显示前 10 个帖子。

这样就搞定了，很简单：

<ul>
{% for post in site.posts limit:10 %}
    <li>//show post</li>
{% endfor %}
</ul>

但是它变得很棘手，因为我想添加一个按钮来显示接下来的 10 个帖子。然后在接下来的 10 个帖子中再发布一个，直到显示网站上的每个帖子。

基本上，所有帖子都会在索引上生成，因为 jekyll 是静态的。但是第十篇之后的一切都会被js和css隐藏起来。但是，我仍然需要十乘十生成这些帖子吗？

所以我正在尝试做类似的事情

{% for post in site.posts limit:10 offset:9%}
     //show post
{% endfor %}

{% for post in site.posts limit:10 offset:19%}
     //show post
{% endfor %}

它仍然很糟糕，因为我必须为每十个帖子编写循环，所以它非常糟糕。所以基本上我必须创建一个循环，每 10 个帖子创建我的 UL 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>

【问题讨论】：

奇怪的想法。您将加载所有内容、隐藏帖子并强制您的用户单击以阅读已加载的内容？有什么好处？
为什么不呢？它只是发布摘录，加载时不会占用太多空间。好处是用户可以在不改变页面的情况下继续阅读帖子摘录，并且无需阅读很长的垂直页面。想想 instagram 是如何工作的，但使用的是静态架构
@topleft ：在列表中加载所有摘录一次，每个摘录在其自己的列表项中，并通过 CSS 将它们隐藏在第 11 个元素中。因此，通过 javascript 以十乘十的方式显示它们
其实这不是一个坏主意，我可能会这样做。我还认为我可以使用 jekyll paginator 创建包含我的帖子的不同 html 页面，然后通过 ajax 调用 html 页面。这有利于加载更轻的索引

标签： html templates jekyll liquid

【解决方案1】：

我同意使用 Liquid 是一种奇怪的做法，但只是为了表明它可以做到：

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

我已经用 1-11 个帖子测试了上面的页面。我尽量把它写得一目了然，所以有办法减少变量/计算的数量。

【讨论】：