Question

具体来说，我希望每次在页面上以随机顺序列出数组的内容。

所以，给定page.array = [1, 2, 3]以下内容：

{% for i in page.array %}
  <p>{{ i }}</p>
{% endfor %}

<!-- 
  Yields:
  <p>1</p>
  <p>2</p>
  <p>3</p>
-->

如何随机化该订单？（希望语法有点类似于以下内容）

{% for i in page.array.shuffle %}
  <p>{{ i }}</p>
{% endfor %}

<!--
  Yielding something like this, or a random reordering:
  <p>3</p>
  <p>1</p>
  <p>2</p>
-->

Answer 1

我设法通过Jekyll的插件系统添加自定义过滤器来实现这一目标：

# _plugins/shuffle.rb
module Jekyll
  module ShuffleFilter
    def shuffle(array)
      array.shuffle
    end
  end
end

Liquid::Template.register_filter(Jekyll::ShuffleFilter)

使用：

{% assign shuffled_array = page.array | shuffle %}
{% for i in shuffled_array %}
  <p>{{ i }}</p>
{% endfor %}

Answer 2

currently accepted answer使用自定义过滤器，但这在某些常见的Jekyll环境中（例如GitHub Pages）是不可能的。

在GitHub Pages上工作的一种简单解决方法是使用Jekyll's sample filter并将其传递给数组的size。例如，这是一个Markdown格式的Jekyll模板，该模板将在每个Jekyll版本上以随机顺序打印您的Jekyll博客文章的标题：

---
title: Posts in random order
---

{% assign n = site.posts | size %}
{% assign posts = site.posts | sample: n %}
{% for post in posts %}
    * {{ post.title }}
{% endfor %}

Answer 3

尝试了这里讨论的解决方案后，我意识到使用JS更好，因为我可以随时随意动态地调整列表。易于实现。这是一个示例：

html

<div id="my-list">
  {% for i in page.array %}
    <p>{{ i }}</p>
  {% endfor %}
</div>

js

var myList = document.querySelector('#my-list');
for (var i = myList.children.length; i >= 0; i--) {
    myList.appendChild(myList.children[Math.random() * i | 0]);
}

参考：javascript - shuffle HTML list element order

如何在Jekyll中改组数组的顺序？

3 个答案: