middleman blogでタグとカテゴリの並び順を昇順・降順に変更してみよう。

middlemanでタグを並び替え

Wordpressからmiddlemanでのブログ運用に変えて、困ったことの一つに「タグとカテゴリの並び順の指定」があります。Wordpressではorder => ASCのように書いてループすれば良いのですが、middlemanでの実装方法がわからず、途方に暮れていました。でも、すぐに解決できたよ。

middlemanはRuby製だった

結論はコードを見た方が早いので先に掲載します。

参考: Ruby リファレンスマニュアル

<!-- タグ: erbの場合 -->
<% blog.tags.sort.each do |tag, articles| %>
  <% unless tag.nil? %>
    <a href="<%= tag_path(tag) %>">
      <span><%= tag %></span>
      <span>( <%= articles.size %> )</span>
    </a>
  <% end %>
<% end %>
/ タグ: slimの場合
- blog.tags.sort.each do |tag, articles|
  - unless tag.nil?
    = link_to tag_path(tag) do
      span = tag
      span
        | (
        span = articles.size
        | )

いつもslimで書くので、erb記法が正しく書けているか若干不安が残りますが、上のような感じです。

Rubyのsortメソッドを使います。blog.tagsが配列のデータなので、sortを使って新しい配列を返してくれます。順序の比較には演算子が使われているのでblog.tags.sortでは「a → z」の昇順で並ぶことになります。

並びを逆にしたい時はblog.tags.sort{|a, b| b <=> a }.each do |tag, articles|のようにsort{|a, b| b <=> a }のようにします。

middlemanはRuby製なので、基本的にはRubyのメソッドが使えるはずで、あとはmiddlemanで取得するデータが何なのかを理解することが重要です。
確認用に出力する時はputsprintpの表示メソッドを使うと良いです。下記のようにターミナルに値を表示してくれます。

show method

これだけ見ると非エンジニアの私にはきついですが…

カテゴリの並び替えも同じ

middlemanブログでカテゴリを設定する方法は以前書いた記事をご覧ください。

カテゴリ一覧を昇順で出力するには以下のように記述します。

<!-- カテゴリ: erbの場合 -->
<% blog.articles.group_by {|a| a.data.category }.sort.each do |cat, articles| %>
  <% unless cat.nil? %>
    <a href="<%= category_path(cat) %>">
      <span><%= cat %></span>
      <span>( <%= articles.size %> )</span>
    </a>
  <% end %>
<% end %>
/ カテゴリ: slimの場合
- blog.articles.group_by {|a| a.data.category }.sort.each do |cat, articles|
  - unless cat.nil?
    = link_to category_path(cat) do
      span = cat
      span
        | (
        span = articles.size
        | )

これもblog.articles.group_by {|a| a.data.category }が配列になっているので、タグと同様にsortメソッドが使えます。

なぜ並び変えるのか

ユーザービリティの観点から並び替えを変更したいと思いました。というのも、このサイトを見てくれた人から「過去記事を見たい時にタグの並びが順不同で探しにくかった」という一言があったからです。

compare-drawer

左が順不同の並びで、右がアルファベット順(昇順)に並べたものです。
小さな変更かもしれませんが、ユーザービリティ向上の秘訣は、小さな変更の積み重ねなので、閲覧ページ数の増加などにつながると思っています。

ちょっとTips系の内容になりましたが、参考になれば。 今日の業務はこれにて終了です。

関連記事