iT邦幫忙

DAY 27
7

Rails 的簡單任務系列 第 29

[RoR] 簡單加入 Tag Cloud 標籤雲 功能

接續上一篇 [RoR] 簡單加入 Tag, Tagging 標籤功能 ,還需要把所有的標籤列出來,並且可以用 Tag Cloud 的方式呈獻,就是像 IT邦幫忙的熱門標籤的樣子:

標籤雲的實作
有關 Tag Cloud 怎麼從 Tag 的多寡來算出 Tag 的字型大小的原理,有 Tag Cloud Font Distribution Algorithm 這一篇文章探討其演算法,若希望能夠有現成的程式碼來應用的話,幸好,在 Tagging & Tag Clouds Made Easy 這一文中,提供很簡單的方式就可以把標籤雲實作出來:
首先在 app/helpers/application_helper.rb 加入:

module ApplicationHelper
def tag_cloud( tags )
  classes = %w(cloud1 cloud2 cloud3 cloud4 cloud5 cloud6 cloud7)

  max, min = 0, 0
  tags.each { |t|
    max = t[1].to_i if t[1].to_i > max
    min = t[1].to_i if t[1].to_i < min
  }

  divisor = ((max - min) / classes.size) + 1

  tags.each { |t|
     yield t[0], classes[(t[1].to_i - min) / divisor]
  }
end
end

編輯 CSS 檔案 public/stylesheets/cloud.css

.cloud1 {font-size: 100%;}
.cloud2 {font-size: 120%;}
.cloud3 {font-size: 140%;}
.cloud4 {font-size: 160%;}
.cloud5 {font-size: 180%;}
.cloud6 {font-size: 200%;}
.cloud7 {font-size: 220%;}
# 然後記得在 app/views/layouts/blog.html.erb  加入
<%= stylesheet_link_tag 'cloud' %>

如果需要有更具特色的 Tag Cloud 的顯示,可參考 Tag Clouds Gallery: Examples And Good Practices 這篇文,裡面列出許多不同的 Tag Cloud 的設計。

編輯 app/views/blog/index.html.erb

<div id="cloud_area">
   <% tag_cloud Article.tags_count do |name, css_class|  -%>
      <%= link_to name, tagged_articles_path(name), :class => css_class -%>
   <% end -%>
</div>

再加上一些 CSS 語法,所呈獻的畫面為:

加入可切換 Tag Cloud, Tag List 的機制
模仿 del.icio.us 可以切換 標籤雲 或 標籤列表,將 index.html.erb 改為

<% if session['tagtype'] == 'cloud' -%>
<div id="cloud_area">
<h4>標籤 <%= link_to '表', '?tagtype=list' -%>|| 雲</h4>
   <% tag_cloud Article.tags_count do |name, css_class|  -%>
      <%= link_to name, tagged_articles_path(name), :class => css_class -%>
   <% end -%>
</div>
<% else -%>
<div id="list_area">
<h4>標籤 表 ||<%= link_to '雲', '?tagtype=cloud' -%></h4>
    <% Article.tags_count.sort.each do |pair| -%>
    <%= link_to(pair[0], tagged_articles_path(pair[0])) -%>(<%= pair[1] -%>)
   <% end -%>
</div>
<% end -%>

就可以依 Sessions 中所設的 tagtype 的值,來決定以 Tag Cloud 或者 Tag List 的值來呈獻;而使用者也可以從頁面來選擇何種方式來瀏表 所有的標籤。

而在 app/controllers/blog_controller.rb 的 def index 之中加入:

if params[:tagtype] == 'list'
	session['tagtype'] = 'list'
elsif params[:tagtype] == 'cloud'
	session['tagtype'] = 'cloud'
else
	session['tagtype'] = 'cloud'
end

就可以記住使用者選擇的呈獻模式,而讓 views 間接依據這邊的變化做改變。
像這種可以讓使用者做選擇如何呈獻的方式,可以用同樣的方式來建置,例如像:整個 template 主題的變換、顏色、字型大小的切換,甚至像每頁一次秀出幾筆資料的選擇等,讓使用者可以對網頁的呈獻方式有更多的選擇。


上一篇
[RoR] 簡單加入 Tag, Tagging 標籤功能
下一篇
[RoR] 小小複雜建置 Social Tagging 社會標籤功能
系列文
Rails 的簡單任務33

1 則留言

0
gric
iT邦高手 1 級 ‧ 2009-03-14 15:41:33

2009/03/09遲到 11:55 到

gric iT邦高手 1 級‧ 2009-03-14 15:47:05 檢舉

SORRY!是感恩謝謝分享!

我要留言

立即登入留言