如何在Jekyll中打乱数组的顺序？

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>
-->

- Mike Jarema

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

- Mike Jarema

---

我真的想不出来如何安装这个插件。如果有任何指导，将不胜感激。 - bryan

@bryan 使用 Jekyll v3.6.2，我所要做的就是将自定义过滤器放入 _plugins 文件夹中的一个文件中，例如 _plugins/shuffle.rb。 - Mike Jarema

有没有办法只使用 GitHub Pages gem 中的 Jekyll 插件来实现相同的功能呢？Github-pages 不支持自定义插件。 - fangda

如果您知道长度，可以使用“sample”过滤器，但我不知道任何动态数组长度的方法。 - Scott Buchanan

谢谢！这是我第一个可用的自定义插件！ - Martin Delille

Answer 2

目前被接受的答案使用了自定义过滤器，但在一些常见的Jekyll环境中，比如GitHub Pages，这是不可能的。

一个简单的解决方法是使用Jekyll的sample过滤器并传递数组的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 %}

- M12

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 - 打乱 HTML 列表元素顺序

- mnishiguchi