昨天，看完水八口那边对归档页面的折腾[1]，感觉自己的归档页面过于简单。我认为归档应尽量简洁，但连文章数量都没显示，就有点说不过去，所以我决定在年份旁，增加显示文章数。
按年份归档
Jekyll 文章按年份归档显示的代码可如下：
{% for post in site.posts %}
{% assign year = post.date | date: '%Y' %}
{% assign nyear = post.next.date | date: '%Y' %}
{% if year != nyear %}
## {{ post.date | date: '%Y' }}
{:.archive-title}
{% endif %}
* {{ post.date | date: '%m-%d' }} » [{{ post.title }}]({{ post.url }} "{{ post.title }}"){:.archive-item-link}
{% endfor %}
原理是这样的：遍历时比较每篇文章及下篇文章的年份，若不等同，则显示年份。
降序显示文章数
如果要显示出每一年的文章数，我想只要在每一年的开始定义一个变量，在遍历中自增，一直到下一年开始就是该年的文章数，可显示并重新赋值。
在一次循环遍历中完成的话，文章数应显示在结尾的地方，这与初心有点背道而驰。且仔细看来，文章数也并非可以按照意愿显示出来，因为 site.posts 中的文章是按时间降序排序，这个就不多说了。
不改变原有代码的前提下，我们可以在前面增加一次遍历，反转 site.posts，把每一年的文章数存进一个数组，再在原有代码添加文章数就很简单了。可实现如下：
{% assign count = 1 %}
{% for post in site.posts reversed %}
{% assign year = post.date | date: '%Y' %}
{% assign nyear = post.next.date | date: '%Y' %}
{% if year != nyear %}
{% assign count = count | append: ', ' %}
{% assign counts = counts | append: count %}
{% assign count = 1 %}
{% else %}
{% assign count = count | plus: 1 %}
{% endif %}
{% endfor %}
{% assign counts = counts | split: ', ' | reverse %}
{% assign i = 0 %}
{% for post in site.posts %}
{% assign year = post.date | date: '%Y' %}
{% assign nyear = post.next.date | date: '%Y' %}
{% if year != nyear %}
## {{ post.date | date: '%Y' }} ({{ counts[i] }})
{:.archive-title}
{% assign i = i | plus: 1 %}
{% endif %}
* {{ post.date | date: '%m-%d' }} » [{{ post.title }}]({{ post.url }} "{{ post.title }}"){:.archive-item-link}
{% endfor %}
以上代码并不完美，有时间再修改。当然，这只是一种实现的思路，Liquid 模板语言看起来很简单，我想或许会有更灵活的用法。
升序显示文章数
根据 Jimmy 所提示的 CSS Counters 实现思路，直接使用 CSS 计算文章数量，也是要在每个年份的文章后面才能显示，可以使用 flex-direction 反转。那文章也得反转输出，也就是：
文章按时间升序输出，再在每一年文章后显示年份，就可以通过 CSS 计算文章数显示在年份。
不过若反转输出文章，使用 Liquid 也可以很方便输出每个年份的文章数，如下：
{% assign count = 1 %}
{% for post in site.posts reversed %}
* {{ post.date | date: '%m-%d' }} » [{{ post.title }}]({{ post.url }} "{{ post.title }}"){:.archive-item-link}
{% assign year = post.date | date: '%Y' %}
{% assign nyear = post.next.date | date: '%Y' %}
{% if year != nyear %}
## {{ post.date | date: '%Y' }}({{ count }})
{:.archive-title}
{% assign count = 1 %}
{% else %}
{% assign count = count | plus: 1 %}
{% endif %}
{% endfor %}
参考资料
本文历史
- 2017 年 08 月 24 日 完成初稿
- 2017 年 08 月 24 日 补充反转输出文章列表部分