Kinopyo Blog

目標

http://mislav.uniqpath.com/will_paginate/のようなCSSを適用し、スタイリングする。

このCSSはwill_paginateのgh-pages treeからダウンロードできます。

バージョン

Rails: 3.0.0.rc1

will_paginate: 3.0.pre2

方法

例えばダウンロードしたCSSの中のdigg_paginationを適用するとします。

その場合はこの生成されたpaginateのdivのclassを”digg_pagination”に設定すればOKです。

実現する方法としては二つあります。

viewにハードコーディング

<%= will_paginate @articles, :class => "digg_pagination" %>

グローバルで設定する

例えばconfig/initializers/will_paginate.rbというファイルを作り下記のように設定します。

WillPaginate::ViewHelpers::pagination_options[:class] = "digg_pagination"

これを設定した後はサーバを再起動する必要があります。

ちょっとした問題

今の時点でのwill_paginateは該当ページの要素をemとして生成しclassは何も指定していないです。

<div class="digg_pagination">
  <span class="previous_page disabled">Previous</span>
  <em>1</em>
  <a ...>2</a>
  ......
</div>

しかしCSSではcurrentというclassでスタイリングを行ってます。なのでどうやらこのemをspanに変更しclass=”current”に変更する必要があります。方法としてはwill_paginateのあるメソッドをオーバーライドします。

will_paginateのRDOCをよく見るとPaginationListLinkRendererクラス内のpage_numberというメソッドが修正のターゲットになります。なので下記のようなクラスを作成ます。

class PaginationListLinkRenderer < WillPaginate::ViewHelpers::LinkRenderer

  protected

  def page_number(page)
    unless == current_page
      link(page, page, :rel => rel_value(page))
    else
      # tag(:em, page)
      tag(:span, page, :class => "current")
    end
  end

end

コメントアウトされたのがそもそものコードです。

次はこのクラスをrequireしてwill_paginateのoptionに指定すればOKです。

requireが必要なクラスは私は全部config/initializers/custom_requires.rbにまとめて書いてます。

# in config/initializers/custom_requires.rb
require 'lib/pagination_list_link_renderer'

# in config/initializers/will_paginate.rb
WillPaginate::ViewHelpers.pagination_options[:render] = "PaginationListLinkRenderer"

これで完了です。

リンク

will_paginateのgithubページ

will_paginateのcssダウンロード

大変参考になった記事(英語)