Jekyllの投稿記事はFront-matter内にカテゴリーを指定出来るようになっていますがjekyll newで作成直後の状態だとindex.htmlには全記事の一覧が表示されるようになっているだけで、記事のサンプルにはカテゴリー情報は現れません。今回はこの情報の取り出し方を解説します。

まずはこちらを見て下さい。これらの変数にはLiquidテンプレートシステムを経由して参照出来るようになっています。

site.categoriesにはサイトに存在するカテゴリーが、そしてpage.categoriesには投稿記事が属しているカテゴリーが入っています。

サイトのカテゴリー名は以下のように取り出せます。

{% for category in  site.categories %}
{{ forloop.index }}. サイトカテゴリー {{ category[0] }}
{% endfor %}

投稿記事のカテゴリー名の場合もほぼ同様ですが、変数の中身が異なるので書き方が変わります。

{% for category in  page.categories %}
{{ forloop.index }}. 投稿記事カテゴリー  {{ category }}
{% endfor %}

ここまででカテゴリー情報は表示出来るようになりましたので、これを応用してカテゴリー別の一覧を作ってみます。

1. ディレクトリの作成

   mkdir archive

2. 一覧ページファイルの作成 archive/index.htmlファイルを作成します。

   <div>
     <h4>カテゴリーnewsの記事一覧</h4>
     <ul>
     {% for post in site.categories.news %}
       <li><a href="{{ post.url }}">{{ post.title }}</a></li>
     {% endfor %}
     </ul>
     <h4>カテゴリーjekyllの記事一覧</h4>
     <ul>
     {% for post in site.categories.jekyll %}
       <li><a href="{{ post.url }}">{{ post.title }}</a></li>
     {% endfor %}
     </ul>
   </div>

3. 実行結果

   <div>
     <h4>カテゴリーnewsの記事一覧</h4>
     <ul>
     
       <li><a href="/news/2013/08/25/start-blog-with-jekyll/">ついでにJekyllでブログも始めてみました。</a></li>
     
       <li><a href="/news/2013/08/24/revamped-our-sight/">弊社サイトをBootstrap 3で全面刷新しました。</a></li>
     
     </ul>
     <h4>カテゴリーjekyllの記事一覧</h4>
     <ul>
     
       <li><a href="/jekyll/2015/11/13/migration-jekyll-2-to-jekyll-3/">まんぷくブログのシステムをJekyll 3.0に移行</a></li>
     
       <li><a href="/jekyll/2013/08/28/jekyll-and-markdown/">JekyllとMarkdownでならすぐに書き始められる（はず）</a></li>
     
       <li><a href="/jekyll/2013/08/27/jekyll-category-howto/">Jekyllの投稿記事に指定したカテゴリーを参照するには？</a></li>
     
       <li><a href="/jekyll/2013/08/26/jekyll-pagination-setting/">JekyllのPagination機能を利用する</a></li>
     
     </ul>
   </div>

これでカテゴリー別一覧が出来上がるので、あとはカテゴリーが増えるたびにこの頁を修正すれば良いです。ちょっと一般的なブログシステムっぽくなりましたね。