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

Question

Specifically I'm looking to list an array's contents in random order on a page each time it is generated.

So, given page.array = [1, 2, 3] the following:

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

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

How do I randomize that order? (hopefully with syntax somewhat like the following)

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

I managed to achieve this by adding a custom filter via Jekyll's plugin system:

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

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

And using:

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

Answer 2

The currently accepted answer uses a custom filter, but this is not possible in some common Jekyll environments, such as GitHub Pages.

An easy workaround that does work on GitHub Pages is to use Jekyll's sample filter and pass it the size of the array. For example, here is a Markdown-formatted Jekyll template that will print the titles of your Jekyll blog posts in random order on each Jekyll build:

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

After trying solutions discussed here, I realized it is better using JS because I can shuffle the list dynamically anytime I want. It is easy to implement. Here is an example:

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]);
}

Reference: javascript - shuffle HTML list element order