メインコンテンツまでスキップ

Jekyll:アーカイブページを作る

· 約4分
mebiusbox
engineer

こちらの記事 では jekyll-archives を使った方法を紹介しました。 ですが、GitHub Pages では動作しません。 ここでは GitHub Pages で使える機能でアーカイブページを作成します。

年月日

全記事から年月日を参照して、列挙します。 記事の列挙は次のようになります。

{% for post in site.posts %}
{{ post.title }}
{% endfor %}

記事の日付は post.date です。 年月ごとに列挙する場合は次のようになります。

{% for post in site.posts %}
{% unless post.next %}
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
{% capture month %}{{ post.date | date: '%m' }}{% endcapture %}
<h2 id="{{year}}{{nmonth}}">{{ month }}/{{ year }}</h2>
<ul class="posts">
<li>
<span class="post-date">{{ post.date | date_to_string }} &raquo;</span>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</li>
{% else %}
{% capture month %}{{ post.date | date: '%m' }}{% endcapture %}
{% capture nmonth %}{{ post.next.date | date: '%m' }}{% endcapture %}
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
{% if month != nmonth %}
</ul>
<h2 id="{{year}}{{nmonth}}">{{ month }}/{{ year }}</h2>
<ul class="posts">
{% else %}
{% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
{% if year != nyear %}
</ul>
<h2 id="{{year}}{{nmonth}}">{{ month }}/{{ year }}</h2>
<ul class="posts">
{% endif %}
{% endif %}
<li>
<span class="post-date">{{ post.date | date_to_string }} &raquo;</span>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</li>
{% endunless %}
{% endfor %}
</ul>

post.date はそのまま出力すると 2016-06-18 00:00:00 +0900 となってしまいます。 {{ post.date | date_to_string }} とすると 18 Jun 2016 というように変換されます。 date_to_string 以外にも細かく指定するオプションがあります。ここでは詳しく解説しません。

post.next は次の記事ですが、最後の記事の場合 nil になります。そのため unless を使って処理を分岐しています。

{% capture year %}{% capture year %}{% endcapture %} で囲んだ内容を year に代入します。

カテゴリ

カテゴリの列挙は次のようになります。

{% for category in site.categories %}
{% capture name %}{{ category[0] }}{% endcapture %}
<h2>{{ name }} ({{ site.categories[name] | size }})</h2>
<ul class="posts">
{% for post in site.categories[name] %}
<li>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
<span class="post-date">{{ post.date | date_to_string }}</span>
</li>
{% endfor %}
</ul>
{% endfor %}

例えば hoge というカテゴリ名の場合 site.categories.hoge で記事を列挙できます。 変数を使って参照する場合は site.categories[variable] というようになります。

site.categories.hoge | size を指定すると記事数を取得できます。

タグ

カテゴリとやり方は同じです。タグの場合、site.tags になります。

{% for tag in site.tags %}
{% capture name %}{{ tag[0] }}{% endcapture %}
<h2>{{ name }} ({{ site.tags[name] | size }})</h2>
<ul class="posts">
{% for post in site.tags[name] %}
<li>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
<span class="post-date">{{ post.date | date_to_string }}</span>
</li>
{% endfor %}
</ul>
{% endfor %}

これで、カテゴリ一覧やタグ一覧などが作れます。あとは好きなようにレイアウトしてあげればいいです。