Nanoc のカスタマイズ - 最近の記事一覧の表示

Nanoc で最近の記事一覧を表示できるようにしてみる。このサイトでいうと、以下の部分。

標準で用意されているヘルパーを活用する

Nanoc には、標準で幾つかのヘルパーが用意されており、これからやろうとしていることは、そのヘルパーを Mix-In することで容易に実現できる。

Module: Nanoc3::Helpers

上記のヘルパーを利用するためには、事前にヘルパーを include しておく必要がある。

lib 配下の Ruby スクリプトはコンパイル時に全てロードされるので、適当なファイルで必要な Module を include しておけばよい。
ここでは、lib/default.rb にこれから使用する 3 つのヘルパーを include しておく。

lib/default.rb:

include Nanoc3::Helpers::Blogging
include Nanoc3::Helpers::Rendering
include Nanoc3::Helpers::LinkTo

それぞれ以下の役目を持つヘルパーとなる。

Blogging Helper (Module: Nanoc3::Helpers::Blogging)
- ブログを構築する際に役立つ機能を集めたもの
- このヘルパーで扱われるページの前提
  - ページ(Item) のメタデータ kind に "article" が設定されていること
  - ページ(Item) のメタデータ created_at に発行日となるタイムスタンプを持っていること。 created_at には、Time.parse で処理できるフォーマットで記載を行う。
Rendering Helper (Module: Nanoc3::Helpers::Rendering)
- 部分テンプレートとしてレイアウトを描画する。
- Rails を扱ったことのある方であれば、Rails のテンプレートを表示する際の render メソッド、と言えばピンとくるかもしれない。
LinkTo Helper (Module: Nanoc3::Helpers::LinkTo)
- リンクの生成のためのヘルパー

Blogging Helper を利用するためのページのメタデータの例は以下のようなもの。

---
title: Nanoc Customize
tags: [nanoc]
datetime: "0001-01-01T00:00:00+00:00"
kind: article
publish: true
---

サイドバーに直近 10 件の記事一覧を表示させる

まずは、記事一覧用の部分テンプレートとして、layouts/_article_list.html を用意して、以下を記述しておく。

<ul>
<% sorted_articles[0, 10].each do |article| %>
  <li>
    <%= link_to(article[:title], article.path) %>
    <span class="meta">(<%= article[:created_at] %>)</span>
  </li>
<% end %>
</ul>

上記は、表示させたい記事の配列を取得するために、Nanoc3::Helpers::Blogging#sorted_articles を利用し、ページのメタデータの kind が “article” となっているページを created_at の降順にソートされたリストを 10 件表示する。

それぞれのリストの要素は、ページのタイトルを表示し、そのページへのリンクを持つ。

layouts/default.html でサイドバーを表示しているスペースに上記の部分テンプレートの表示部分を記載する。

<div id="sidebar-wrapper">
  <h2>Recent Entries</h2>
    <%= render('_article_list') %>
  ...

以上で、本サイトのサイドバーの Recent Articles のような記事一覧の表示が追加される。

Nanoc のカスタマイズ - 最近の記事一覧の表示

Table of Contents

標準で用意されているヘルパーを活用する

サイドバーに直近 10 件の記事一覧を表示させる

関連記事