前几天突然想到一个功能。点击菜单上的一个按钮，随机打开一篇博文。我原本的这个模板里并没有这个功能，所以决定自己开发一个。现在把整个实现方法记录下来。

　　主要的实现思路是：先拿到所有博文的列表，然后根据博文总数来随机跳转到这一篇博文。那么首先想想那个页面有所有博文的列表。我的这套模板的首页有所有的博文的列表。打开项目根目录的index.html页面。里面代码很少。

1
2
3
4
5

---
layout: index
---

　　这大概是说这个页面引用了layout是index页面。顺着_layouts/index.html这个路径找下去，里面代码是这样的。

1
2
3
4
5
6
7
8

---
layout: layout
---

{% assign __ = site.data.languages[site.language] %}
{% include index.html %}

　　它提到了index.html页面。所以去打开_includes/index.html这个页面看看。

1
2
3
4
5
6
7
8
9
10
11
12
13

{% assign posts = site.posts %}
{% if site.paginate > 0 %}{% assign posts = paginator.posts %}{% endif %}

<section id="posts" class="posts-expand">
  {% for post in posts %}
    {% assign is_index = true %}
    {% include _macro/post.html %}
  {% endfor %}
</section>

{% include _partials/pagination.html %}

　　这下就难了，这些类似于模板标记的代码是Jekyll使用的Liquid语法，而我只会JS。根据以往的经验这一行 for post in posts 应该就是for循环了。其中的posts变量应该就是所有博文的集合了。posts的初始值是site.posts。当site.paginate大于0时，则posts安照分页大小来确定。但是我不会写Liquid语法。最后我决定用Liquid语法和JS混合开发。

　　新建一个random目录，下面创建index.html页面。仿照之前看过的那些页面的格式，创建JS代码块，在JS里使用Liquid循环输出所有博文的URL，并放入一个数组中。然后用JS随机生成一个随机数，并跳转到对应的页面。具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---
title:
layout: page
---

{% assign posts = site.posts %}

<script type="text/javascript">
    var arr = new Array();
    {% for post in posts %}
        arr.push('{{ post.url }}');
    {% endfor %}
    window.location.href = arr[parseInt(Math.random()*(arr.length),10)];
</script>

　　在菜单里加入这个页面。打开项目根目录的_config.yml配置文件。找到menu对象，在里面添加 random: /random/。再找到menu_icons对象，在里面添加 random: random。这样就配置了一个菜单，路径是/random/，图标是FontAwesome icon 的 random。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  archives: /archives/
  random: /random/ #新的随机菜单
  categories: /categories/
  tags: /tags/
  about: /about/
  
# Enable/Disable menu icons.
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of menu item and value is the name of FontAwesome icon. Key is case-senstive.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  archives: archive
  random: random  #新的随机菜单的图标
  categories: th
  tags: tags
  about: user

　　这样新的随机菜单就配置好了，部署上去测试一下吧。