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增量循環計數器

回答

相關問題