昨天,看完水八口那边对归档页面的折腾[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 日 补充反转输出文章列表部分