Jekyll增量循环计数器

所以我试图创建一个页面，其中只显示前10个帖子，在开始。Jekyll增量循环计数器

做过这样的，它很简单：

<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个职位，所以它很糟糕。所以基本上我必须创建一个循环来创建每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>

来源

2015-07-20 Antonin Cezard

奇怪的想法。您将加载所有内容，隐藏文章并强制用户点击以阅读已加载的内容？有什么好处？ –

为什么不呢？它只是简单的摘录，它不会占用大量的空间。好处是用户可以在不更改页面的情况下继续阅读帖子摘录，并且不需要很长的垂直页面即可阅读。想想instagram如何工作，但是采用静态架构 –

@topleft：在列表中加载一次所有摘录，每个都在自己的列表项中，并通过CSS将它们从第11个元素中隐藏起来。因此，通过javascript – fcalderan

我同意使用液体这样做的一种奇怪的方式，但只是为了表明它可以做到：

--- 
--- 
{% 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个帖子的任何地方测试了上述页面。我试图尽可能明确地写出它，所以可以采用减少变量/计算量的方法。

来源

2015-08-06 02:43:19 Shadowen

Jekyll增量循环计数器

回答

相关问题