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

Written by @dr_taka_n at 2010/07/25 13:01:31 [, ]

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

Recent Articles

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

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

上記のヘルパーを利用するためには、事前にヘルパーを 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]
created_at: 2010/06/24 21:30:31
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 のような記事一覧の表示が追加される。

関連記事

  1. 静的な Web サイト生成ツール Nanoc 基本編 - まずは試してみる
  2. Nanoc のカスタマイズ - 最近の記事一覧の表示
  3. Nanoc のカスタマイズ - タグを管理する
  4. Nanoc のカスタマイズ - 年月毎の記事のアーカイブを用意する
blog comments powered by Disqus